Rose Engine

/*
BSD Zero Clause License

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
*/

window.addEventListener('load', () => {
    'use strict';

    // Convert hex string colour to RGB array (0.0 to 1.0).
    function hexColorToRgb(hexCol) {
        return [
            parseInt(hexCol.substring(1, 3), 16) / 255,
            parseInt(hexCol.substring(3, 5), 16) / 255,
            parseInt(hexCol.substring(5, 7), 16) / 255,
        ]
    }

    //--------------
    // Canvas Setup
    //--------------

    const canvas = document.getElementById('roseEngineCanvas');
    const displayContext = canvas.getContext('webgl2');
    if (displayContext == null) {
        alert("WebGL2 unsupported?");
        return;
    }
    const hiddenCanvas = document.getElementById('hiddenCanvas');
    const hiddenGraphicsContext = hiddenCanvas.getContext('2d');

    function resize(force) {
        const w = canvas.clientWidth;
        const h = canvas.clientHeight;
        if (!force && canvas.width == w && canvas.height == h) {
            return;
        }

        // Render circuits at double size for anti-aliasing.
        const side = Math.min(w, h) * 2;
        hiddenCanvas.width = side;
        hiddenCanvas.height = side;
        circuits.forEach(c => c.dirty = true);

        canvas.width = w;
        canvas.height = h;
        const gl = displayContext;
        gl.viewport(0, 0, w, h);
        gl.bindTexture(gl.TEXTURE_2D, depthTexture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,
            w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
            gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,
            gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
            gl.LINEAR);

        requestRender();
    }

    //--------
    // Curves
    //--------

    const curves = {
        "sin(θ)": angle => Math.sin(angle),
        "sin(θ)^3": angle => Math.sin(angle) ** 3,
    };

    //----------
    // Controls
    //----------

    function addOneControl(fromElement, toObject, name) {
        toObject[name] = fromElement;
        // Update value display on input
        const valDisplay = fromElement.parentNode.parentNode
            .getElementsByClassName('range-value-display')[0];
        if (fromElement.type == 'range' && valDisplay) {
            fromElement.addEventListener('input', () => {
                valDisplay.innerHTML = fromElement.value;
            });
        }
    }

    // Add DOMObjects of controls under 'fromElement' into 'toObject'
    function addControls(fromElement, toObject) {
        const group = fromElement.dataset?.ctrlGroup;
        const name = fromElement.dataset?.ctrl;
        const arr = fromElement.dataset?.ctrlArray;
        if (group) {
            if (!toObject[group]) {
                toObject[group] = { element: fromElement };
            }
            Array.from(fromElement.children).forEach(
                element => addControls(element, toObject[group]));
        } else if (name) {
            addOneControl(fromElement, toObject, name);
        } else if (arr) {
            const destArr = toObject[arr] = [];
            Array.from(fromElement.children).forEach(element => {
                if (element.tagName === 'DIV') {
                    const obj = { element };
                    destArr.push(obj);
                    addControls(element, obj);
                }
            });
        } else {
            // Recurse down through selected tags.
            switch (fromElement.tagName) {
                case 'DIV':
                case 'LABEL':
                case 'SPAN':
                    Array.from(fromElement.children).forEach(
                        element => addControls(element, toObject));
                    break;
            }
        }
    }

    const controls = {};
    addControls(document.getElementById('roseEngineCtrls'), controls);

    function getRenderSettings(controls) {
        return {
            quality: controls.quality.valueAsNumber,
            surfaceColour: controls.surfaceColour.value,
            light: {
                x: controls.light.x.valueAsNumber,
                y: controls.light.y.valueAsNumber,
                z: controls.light.z.valueAsNumber,
            }
        }
    }

    // Populate curve shape selection lists.
    controls.circuits.forEach(ctrl => {
        const select = ctrl.curveName;
        Object.keys(curves).forEach(cName => {
            select.add(new Option(cName, cName));
        });
    });

    controls.quality.addEventListener('change', () => {
        circuits.forEach(c => c.dirty = true);
        requestRender(8);
    });
    controls.surfaceColour.addEventListener('change',
        () => requestRender(1));

    Object.values(controls.light).forEach(
        ctrl => ctrl.addEventListener('input', () => requestRender(1)));

    //-------------
    // WebGL Setup
    //-------------

    const vertexSource = `
        attribute vec4 aVertexPosition;

        varying highp vec2 vTextureCoord;

        uniform highp vec2 uScale;

        void main() {
            gl_Position = vec4(aVertexPosition.xy * uScale, 0.0, 1.0);
            vTextureCoord = aVertexPosition.xy / 2.0 + 0.5;
        }
    `;

    const fragmentSource = {
        copy: `
            varying highp vec2 vTextureCoord;
            uniform sampler2D uSampler;

            void main() {
                gl_FragColor = texture2D(uSampler, vTextureCoord);
            }
        `,
        light: `
            varying highp vec2 vTextureCoord;
            uniform sampler2D uSampler;
            uniform highp vec3 uLightPos;
            uniform mediump vec3 uColor;
            uniform highp vec2 uPixelSize;
            uniform highp float uDepthScale;

            highp vec3 pos(highp vec2 offset) {
                highp vec2 readFrom = vec2(vTextureCoord +
                    offset * uPixelSize);
                return vec3(readFrom,
                    texture2D(uSampler, readFrom) * uDepthScale);
            }

            void main() {
                // positions
                highp vec3 mid = pos(vec2(0,0));
                highp vec3 up = pos(vec2(0, -1));
                highp vec3 down = pos(vec2(0, 1));
                highp vec3 left = pos(vec2(-1, 0));
                highp vec3 right = pos(vec2(1, 0));
                highp vec3 normal = cross(right - left, down - up);
                highp vec3 lightDir = mid - uLightPos;
                mediump vec3 col = dot(lightDir, normal) /
                    length(normal) / length(lightDir) * uColor;
                gl_FragColor = vec4(col, 1.0);
            }
        `,
    };

    function loadShader(ctx, type, source) {
        const shader = ctx.createShader(type);
        ctx.shaderSource(shader, source);
        ctx.compileShader(shader);

        if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
            console.log("Shader compiler failed: " +
                ctx.getShaderInfoLog(shader));
            ctx.deleteShader(shader);
            return null;
        }

        return shader;
    }

    function initShaderProgram(ctx, vsSource, fsSource) {
        const vertexShader = loadShader(ctx, ctx.VERTEX_SHADER,
            vsSource);
        const fragmentShader = loadShader(ctx, ctx.FRAGMENT_SHADER,
            fsSource);

        const shaderProgram = ctx.createProgram();
        ctx.attachShader(shaderProgram, vertexShader);
        ctx.attachShader(shaderProgram, fragmentShader);
        ctx.linkProgram(shaderProgram);

        if (!ctx.getProgramParameter(shaderProgram, ctx.LINK_STATUS)) {
            console.log("Shader link fail: " +
                ctx.getProgramInfoLog(shaderProgram));
            return null;
        }

        return shaderProgram;
    }

    function initBuffers(ctx) {
        const positionBuffer = ctx.createBuffer();
        ctx.bindBuffer(ctx.ARRAY_BUFFER, positionBuffer);

        const positions = new Float32Array([
            -1.0, 1.0,
            1.0, 1.0,
            -1.0, -1.0,
            1.0, -1.0,
        ]);

        ctx.bufferData(ctx.ARRAY_BUFFER, positions, ctx.STATIC_DRAW);

        return { position: positionBuffer };
    }

    const depthTexture = displayContext.createTexture();
    const frameBuffer = displayContext.createFramebuffer();

    const copyShaderInfo = function(ctx) {
        const program = initShaderProgram(ctx, vertexSource,
            fragmentSource.copy);
        const vertexPosition = ctx.getAttribLocation(program,
            'aVertexPosition');
        const uSampler = ctx.getUniformLocation(program, 'uSampler');
        const uScale = ctx.getUniformLocation(program, 'uScale');
        return {
            program,
            attribLocations: { vertexPosition },
            uniformLocations: { uSampler, uScale },
        };
    }(displayContext);

    const lightShaderInfo = function(ctx) {
        const program = initShaderProgram(ctx, vertexSource,
            fragmentSource.light);
        const vertexPosition = ctx.getAttribLocation(program,
            'aVertexPosition');
        const uniformLocations = {};
        [
            'uSampler',
            'uLightPos',
            'uColor',
            'uPixelSize',
            'uDepthScale',
            'uScale',
        ].forEach(u =>
            uniformLocations[u] = ctx.getUniformLocation(program, u));
        return {
            program,
            attribLocations: { vertexPosition },
            uniformLocations,
        };
    }(displayContext);

    const glBuffers = initBuffers(displayContext);

    //--------
    // Circuit
    //--------

    class Circuit {
        constructor(workCtx, displayCtx, control) {
            this.workCtx = workCtx;
            this.displayCtx = displayCtx;
            this.texture = displayCtx.createTexture();
            this.control = control;
            this.element = control.element;
            this.element.circuitObj = this;

            this.updateParams();
            this.dirty = true;

            const cb = () => {
                this.updateParams();
                this.dirty = true;
                requestRender();
            };
            [
                control.repeat,
                control.travel,
                control.radius,
                control.offset,
                control.curveName,
            ].forEach(c => c.addEventListener('input', cb));
            control.btns.up.addEventListener('click', () => {
                const target = this.element.previousElementSibling;
                if (target) {
                    target.before(this.element);
                    target.circuitObj?.updateControlState();
                }
                this.updateControlState();
            });
            control.btns.down.addEventListener('click', () => {
                const target = this.element.nextElementSibling;
                if (target) {
                    target.after(this.element);
                    target.circuitObj?.updateControlState();
                }
                this.updateControlState();
            });
            control.btns.remove.addEventListener('click', () => {
                const prev = this.element.previousElementSibling;
                const next = this.element.nextElementSibling;
                if (prev != null || next != null) {
                    this.destroy();
                    prev?.circuitObj?.updateControlState();
                    next?.circuitObj?.updateControlState();
                    requestRender();
                } else {
                    this.updateControlState();
                }
            });
            control.btns.add.addEventListener('click', () => {
                const newNode = this.element.cloneNode(true);
                this.element.after(newNode);
                const ctrls = {element: newNode};
                addControls(newNode, ctrls);
                ctrls.curveName.selectedIndex =
                    this.control.curveName.selectedIndex;
                const newObj = new Circuit(workCtx, displayCtx, ctrls);
                circuits.push(newObj);
                this.updateControlState();
            });
            this.updateControlState();
        }

        updateParams() {
            const c = this.control;
            this.params = {
                repeat: c.repeat.valueAsNumber,
                travel: c.travel.valueAsNumber,
                radius: c.radius.valueAsNumber,
                offset: c.offset.valueAsNumber,
                cutWidth: 0.03,
                cutDepth: 1.0,
                curveName: c.curveName.value,
            };
        }

        destroy() {
            this.element.circuitObj = null;
            const index = circuits.findIndex(e => e == this);
            circuits.splice(index, 1);
            this.element.remove();
            if (this.texture) {
                this.displayCtx.deleteTexture(this.texture);
                this.texture = null;
            }
        }

        updateControlState() {
            const control = this.control;
            const element = this.element;
            if (element.parentElement.childElementCount < 2) {
                control.btns.up.disabled = true;
                control.btns.down.disabled = true;
                control.btns.remove.disabled = true;
            } else {
                control.btns.remove.disabled = false;
                control.btns.up.disabled =
                    element.previousElementSibling === null;
                control.btns.down.disabled =
                    element.nextElementSibling === null;
            }
        }

        updateTexture(quality) {
            if (!this.dirty) {
                return;
            }

            const ctx = this.workCtx;
            const gl = this.displayCtx;
            const canvas = ctx.canvas;
            const side = Math.min(canvas.width, canvas.height);
            const unit = side / 2;

            const repeat = this.params.repeat;
            const travel = this.params.travel * unit / 2000;
            const radius = this.params.radius * unit / 1000;
            const offset = this.params.offset * Math.PI * 2;
            const cutWidth = this.params.cutWidth * unit;
            const cutDepth = this.params.cutDepth;
            const travelFunction = curves[this.params.curveName];

            ctx.save();

            ctx.clearRect(0, 0, side, side);
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, side, side);

            // Create gradient representing the depth of a
            // cross-section of the cut.
            const grad = ctx.createLinearGradient(0, 0, cutWidth, 0);
            grad.addColorStop(0, 'black');
            const c = Math.floor(cutDepth * 255);
            grad.addColorStop(0.5, `RGB(${c},${c},${c})`);
            grad.addColorStop(1, 'black');
            ctx.strokeStyle = grad;

            // Use lighten so we always represent the deepest point cut.
            ctx.globalCompositeOperation = 'lighten';
            ctx.translate(side / 2, side / 2);
            ctx.lineWidth = 1;

            // Use less segments for inner circuits.
            const segments = quality * Math.PI * (radius + cutWidth);

            // Stamp out a load of 1px long cross-sections to
            // approximate the cut.
            const segmentAngle = Math.PI * 2 / segments;
            for (let i = segments; i-- > 0;) {
                ctx.save();

                const angle = segmentAngle * i;
                ctx.rotate(angle);

                const q = (angle * repeat + offset) % (Math.PI * 2);
                ctx.translate(radius + travel * travelFunction(q), 0);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(cutWidth, 0);
                ctx.stroke();

                ctx.restore();
            }

            ctx.restore();

            gl.bindTexture(gl.TEXTURE_2D, this.texture);
            gl.texImage2D(
                gl.TEXTURE_2D,
                0,
                gl.RGBA,
                gl.RGBA,
                gl.UNSIGNED_BYTE,
                canvas
            );
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,
                gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,
                gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
                gl.LINEAR);

            this.dirty = false;
        }
    };


    const circuits = controls.circuits.map(c =>
        new Circuit(hiddenGraphicsContext, displayContext, c)
    );

    //-----------
    // Rendering
    //-----------

    function glRender(renderSettings) {
        const gl = displayContext;

        circuits.forEach(c => c.updateTexture(renderSettings.quality));

        // Render to target texture.
        gl.activeTexture(gl.TEXTURE1);
        gl.bindTexture(gl.TEXTURE_2D, depthTexture);
        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
            gl.TEXTURE_2D, depthTexture, 0);

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.enable(gl.BLEND);
        gl.blendEquation(gl.MAX);

        gl.useProgram(copyShaderInfo.program);

        const numComponents = 2;
        const type = gl.FLOAT;
        const normalize = false;
        const stride = 0;
        const offset = 0;
        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffers.position);
        gl.vertexAttribPointer(
            copyShaderInfo.attribLocations.vertexPosition,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(
            copyShaderInfo.attribLocations.vertexPosition);

        gl.activeTexture(gl.TEXTURE0);
        // Use scale to place design in centre, with correct aspect ratio.
        gl.uniform2f(copyShaderInfo.uniformLocations.uScale,
            hiddenCanvas.width / canvas.width / 2,
            hiddenCanvas.height / canvas.height / 2);

        circuits.forEach(c => {
            gl.bindTexture(gl.TEXTURE_2D, c.texture);
            gl.uniform1i(copyShaderInfo.uniformLocations.uSampler, 0);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        });

        // Switch back to rendering onto canvas.
        gl.bindFramebuffer(gl.FRAMEBUFFER, null);

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.enable(gl.BLEND);
        gl.blendEquation(gl.FUNC_ADD);

        gl.useProgram(lightShaderInfo.program);

        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffers.position);
        gl.vertexAttribPointer(
            lightShaderInfo.attribLocations.vertexPosition,
            numComponents,
            type,
            normalize,
            stride,
            offset);
        gl.enableVertexAttribArray(
            lightShaderInfo.attribLocations.vertexPosition);

        const lightPos = [
            renderSettings.light.x,
            1 - renderSettings.light.y,
            -renderSettings.light.z,
        ];

        gl.activeTexture(gl.TEXTURE1);
        gl.uniform1i(lightShaderInfo.uniformLocations.uSampler, 1);
        gl.uniform3fv(lightShaderInfo.uniformLocations.uLightPos,
            lightPos);
        gl.uniform3fv(lightShaderInfo.uniformLocations.uColor,
            hexColorToRgb(renderSettings.surfaceColour));
        gl.uniform2f(lightShaderInfo.uniformLocations.uPixelSize,
            1.0 / hiddenCanvas.width, 1.0 / hiddenCanvas.width);
        gl.uniform1f(lightShaderInfo.uniformLocations.uDepthScale,
            6.0 / hiddenCanvas.width);
        gl.uniform2f(lightShaderInfo.uniformLocations.uScale, 1.0, 1.0);

        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }

    let renderDelay = 0;
    function requestRender(delayFrames = 4)
    {
        renderDelay = delayFrames || 1;
    }

    function frame() {
        resize();
        if (renderDelay && !--renderDelay) {
            glRender(getRenderSettings(controls));
        }
        window.requestAnimationFrame(frame);
    }

    resize(true);
    requestRender(1);
    frame();
});