DOM 2 WebGPU
Easily add 3D objects to your pages.
Scale them based on DOM elements.
Animate them with the power of WebGPU.
Easy peasy.
gpu-curtains is an
open-source WebGPU 3D engine built to help you synchronize DOM and 3D elements.
Use built-in geometries or define your own custom ones. The 3D objects sizes and positions are
automatically updated on scroll and resize.
Its high-level API helps you focus on writing shaders.
These are DOM Elements
Those are, too
Medias as textures
Easily adds images, videos or canvases as textures,
automatically scaled to fit the 3D mesh.
Apply any additional transformations.
Out of the box.
gpu-curtains can
automatically detect the DOM elements <img />,
<video /> and <canvas /> children, and
create WebGPU textures using them as sources.
You can apply any additional transformation such as translation, scale and rotation and define a custom
transform origin as you would do in CSS.
This is a bunch of divs with img and video tags
WebGPU features
Built-in support for compute shaders, instancing,
post processing, multiple renderers, etc.
Everything you need.
gpu-curtains comes with
all the new features and capabilities added by WebGPU.
Compute shaders, native antialiased post processing, super easy instancing, rendering to multiple
canvases...
2000 post processed instanced meshes,
rendered on a separate canvas
Found a bug? Have an idea? You are more than welcomed to contribute to the repository by filing an issue or creating a PR.
gpu-curtains is an open-source project made by Martin Laxenaire, a french freelance front-end developer.