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,
with extra classes 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
Genuine 3D engine
Built on a 3D engine that comes with lights,
shadows, glTF... DOM syncing is not mandatory!
Just do what you want.
gpu-curtains was
thought as a true 3D engine, with a lot of essential features: custom geometries, built-in lights and
shadows, material shading helpers, basic glTF support, raycasting, deferred rendering...
The DOM syncing classes are not part of the core, letting you use it as a regular 3D library if you
need.
Hello suzanne (from the glTF Sample Assets)
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, render bundles, instancing,
post processing, multiple renderers, etc.
Everything you need.
gpu-curtains comes with
all the new features and capabilities added by WebGPU.
Compute shaders, render bundles, native antialiased post processing, super easy instancing, rendering
to multiple canvases...
2000 post processed instanced meshes,
updated by a compute shader
and 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.