css-to-webgl v0.1.86

NOTE: This is just for fun. Do not use in production.

import CssToWebgl from 'css-to-webgl';

const testBoxGeo = new THREE.BoxBufferGeometry(50, 50, 50);
const testBoxMat = new THREE.MeshBasicMaterial({ color: 'red' });
const testBoxMesh = new THREE.Mesh(testBoxGeo, testBoxMat);
testBoxMesh.position.z = -50;

const cssToWebgl = new CssToWebgl({
    THREE, // pass inn THREE.js
    shaders: {
        testFs,
    },
    meshes: {
        testBox: testBoxMesh,
    },
    bufferTextures: {
        brain: bufferTexture.texture,
    },
    renderer, // same renderer as used by bufferTexture
    onRender: (delta, elapsed) => {
        testBoxMesh.rotation.set(
            (Math.PI * 0.1 + elapsed) % (Math.PI * 2),
            (Math.PI * 0.2 + elapsed) % (Math.PI * 2),
            (Math.PI * 0.3 + elapsed) % (Math.PI * 2)
        );
        testBoxMesh.updateMatrix();
    },
    attributePrefix: 'data-render' // is default
    preloadAssets: [imageSrc1, imageSrc2],
    onLoad: () => {
        // called after scene is ready
    },
    scrollContainer: myScrollableDiv, // default is window
});

Call cssToWebgl.updateElements() when DOM is ready (and images are loaded)

Data attributes

Used to indicate a scroll container. Body will have overflow hidden, so this will have to be a child of body data-render-scrollable="true"

Type data-render="text|color|image|video|has-image|texture|bufferTexture"

Speed of parallax scroll data-render-scroll-speed="slow|medium|fast|max|0.0-1.0"

Enter and leave duration/Tween easing data-render-enter-duration="500" data-render-leave-duration="500" data-render-enter-easing="Quadratic.InOut" data-render-leave-easing="Quadratic.InOut"

Only trigger in view animation once data-render-enter-once="true"

Color (used together with data-render="color|text") data-render-color="rgb(0,0,255)"

Blend mode data-render-blending="additive|subtractive|multiply"

ID of custom vertex shader data-render-fs="myVertexShader"

ID of custom fragment shader data-render-fs="myFragmentShader"

ID of custom material data-render-material="myMaterial"

ID of custom mesh data-render-mesh="myMesh"

• Note that the z can't be above 0
• Whenever updating the mesh, for instance in onRender, call .updateMatrix()

ID of custom render target texture data-render-buffer-texture="myRenderTargetTextureId"

Geometry segments data-render-width-segments="20" data-render-height-segments="20" data-render-depth-segments="20"

Z position (place objects beneath others) data-render-z="-20"

Fixed position data-render-fixed="true"

Active uniform (controls the value of uActive) data-render-active="0"

Custom uniforms data-render-uniform-test="-20" data-render-uniform-anotheruniform="0.5"

Only floats and name has to be lowercase and in one word

Types

text

Will attempt to rasterize text on canvas, so you can use the text as a texture. The texture will be black and white (for antialiasing) and is available under the sampler2D uniform uTexture. Color is vec3 uColor

image

Used on <img>-tag. Creates texture of currentSrc

has-image

Searches children for <img>-tag with data attribute data-render-src="your-image-source.jpg". Creates texture of currentSrc child image

video

Used on <video>-tag. Creates texture of src

texture

Experimental. Uses domToImage to create a texture of the current dom element. Doesn't work well with margins and overflow. Ensure that the element it is used on doesn't have margins or collaped margins.

bufferTexture

Use texture output of a WebGLRenderTarget as a sampler2D uniform.

Magic uniforms

The following uniforms will be added to shaders

• float uElapsed
• vec2 uMouse
• vec2 uResolution
• float uDPR
• float uGlobalVisible
• float uVisible
• float uScrollSpeed
• float uScrollProgress
• float uActive (can be used arbitrarily, value comes from data-render-active)
• sampler2D uImage (for types image, video)
• sampler2D uTexture (for types texture, text)
• vec3 uColor (for types color, text)
• float uHovering (if element or parent is <button> or <a>)
• float uFocused (if element or parent is <button> or <a>)

CSS

Add the following:

[data-render-hidden],
[data-render='video'],
[data-render='text'],
[data-render='image'],
[data-render='color'] {
  opacity: 0;
}