Console.logs not printing in custom HTML embed? for WebGL Shader

Ask us anything
1

Trying to add a webGL shader to the background of my landing page but am unable to debug why it is not showing up because the console logs themselves are not showing up.

Any help would be greatly appreciated!

script

document.addEventListener("DOMContentLoaded", () => {
    console.log("Shader script loaded and DOM fully parsed.");

    const canvas = document.getElementById("shaderCanvas");

    if (!canvas) {
        console.error("Canvas element not found!");
        return;
    }

    console.log("Canvas element found!");

    const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!gl) {
        console.error("WebGL not supported in this browser.");
        return;
    }

    console.log("WebGL context successfully initialized.");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    console.log(`Canvas size set to: ${canvas.width}x${canvas.height}`);

    // Vertex Shader
    const vertexShaderSource = `
        attribute vec2 position;
        void main() {
            gl_Position = vec4(position, 0.0, 1.0);
        }`;

    const fragmentShaderSource = `
        precision mediump float;
        uniform vec2 resolution;
        void main() {
            vec2 uv = gl_FragCoord.xy / resolution.xy;
            gl_FragColor = vec4(uv, 0.5, 1.0);
        }`;

    const createShader = (type, source) => {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.error(
                `Shader compilation failed for ${
                    type === gl.VERTEX_SHADER ? "vertex" : "fragment"
                } shader:`,
                gl.getShaderInfoLog(shader)
            );
            return null;
        }
        console.log(`${type === gl.VERTEX_SHADER ? "Vertex" : "Fragment"} shader compiled successfully.`);
        return shader;
    };

    const vertexShader = createShader(gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    if (!vertexShader || !fragmentShader) {
        console.error("Failed to create shaders.");
        return;
    }

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error("Program linking failed:", gl.getProgramInfoLog(program));
        return;
    }
    console.log("WebGL program linked successfully.");

    gl.useProgram(program);
    console.log("WebGL program is now in use.");

    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
    console.log("Position buffer initialized and data uploaded.");

    const positionLocation = gl.getAttribLocation(program, "position");
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    console.log("Position attribute linked.");

    const resolutionLocation = gl.getUniformLocation(program, "resolution");
    gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
    console.log("Resolution uniform set.");

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    console.log("Canvas cleared.");

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    console.log("WebGL rendering completed.");
});
2

probably the problem is that the loaded event has already been triggered by the time your code executes. weweb html component is not embedded in the html response for the page, it’s inserted dynamically when the page renders.
try this:

1 Like