Witam, mam następujący problem: element canvas nie chce mi wyświetlić żadnej figury z poziomu kodu. co robić

Question

function main(){

var plotno=document.querySelector("plotno");
var gl=plotno.getContext("WEBGL");

if(gl===null) {

alert('Nie można zainicjować renderowania.');

return;
}

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

gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload=main;

function draw(drawScene) {
    var plotno = document.querySelector("plotno");
    var plotno = getContext('webgl');

    var vsSource = `
    "attribute vec4 aVertexPosition;"

    "uniform mat4 uModelViewMatrix;"
    "uniform mat4 uProjectionMatrix;"

    void main() {
      gl_Position = "uProjectionMatrix * uModelViewMatrix * aVertexPosition;"
    }
  `;

    function initShaderProgram(gl, vsSource, fsSource) {
       var vertexShader = "loadShader(gl, gl.VERTEX_SHADER, vsSource);"
        var fragmentShader = "loadShader(gl, gl.FRAGMENT_SHADER, fsSource);"

 

        var shaderProgram = "gl.createProgram();"
        "gl.attachShader(shaderProgram, vertexShader);"
        "gl.attachShader(shaderProgram, fragmentShader);"
        "gl.linkProgram(shaderProgram);"

 

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
            return null;
        }

        return shaderProgram;
    }

    function loadShader(gl, type, source) {
        var shader = "gl.createShader(type);"

 

        gl.shaderSource(shader, source);

 

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
        }

        return shader;
    }

    var shaderProgram = "initShaderProgram(gl, vsSource, fsSource);"

    var programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
        },
        uniformLocations: {
            projectionMatrix: "gl.getUniformLocation(shaderProgram, 'uProjectionMatrix')",
            modelViewMatrix: "gl.getUniformLocation(shaderProgram, 'uModelViewMatrix')",
        },
    };

    function initBuffers(gl) {

 

        const positionBuffer = gl.createBuffer();

 

        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

 

        var positions = [-1.0, 1.0,
            1.0, 1.0, -1.0, -1.0,
            1.0, -1.0,
        ];

        gl.bufferData(gl.ARRAY_BUFFER,
            new Float32Array(positions),
            gl.STATIC_DRAW);

        return {
            position: positionBuffer,
        };
    }

 

    function drawScene(gl, programInfo, buffers) {
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clearDepth(1.0);
        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        const fieldOfView = 45 * Math.PI / 180; // in radians
        const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
        const zNear = 0.1;
        const zFar = 100.0;
        const projectionMatrix = mat4.create();

        mat4.perspective(projectionMatrix,
            fieldOfView,
            aspect,
            zNear,
            zFar);

        var modelViewMatrix = mat4.create();

 

        mat4.translate(modelViewMatrix,
            modelViewMatrix, [-0.0, 0.0, -6.0]);

        {
            const numComponents = 2; // pull out 2 values per iteration
            const type = gl.FLOAT; // the data in the buffer is 32bit floats
            const normalize = false; // don't normalize
            const stride = 0; // how many bytes to get from one set of values to the next
            // 0 = use type and numComponents above
            const offset = 0; // how many bytes inside the buffer to start from
            gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
            gl.vertexAttribPointer(
                programInfo.attribLocations.vertexPosition,
                numComponents,
                type,
                normalize,
                stride,
                offset);
            gl.enableVertexAttribArray(
                programInfo.attribLocations.vertexPosition);
        }

 

        gl.useProgram(programInfo.program);

 

        gl.uniformMatrix4fv(
            programInfo.uniformLocations.projectionMatrix,
            false,
            projectionMatrix);
        gl.uniformMatrix4fv(
            programInfo.uniformLocations.modelViewMatrix,
            false,
            modelViewMatrix);

        {
            var offset = 0;
            var vertexCount = 4;
            gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
        }
    }
}
window.onload=draw;

 

Comments

Nie znam dobrze WebGLa, ale... na oko ten kod ma całe mnóstwo błędów?

var plotno=document.querySelector("plotno");

Masz element o tagu `plotno`?

    var plotno = document.querySelector("plotno");
    var plotno = getContext('webgl');

(?)

        var shaderProgram = "gl.createProgram();"
        "gl.attachShader(shaderProgram, vertexShader);"
        "gl.attachShader(shaderProgram, fragmentShader);"
        "gl.linkProgram(shaderProgram);"

Czemu losowe linie kodu JSa związane z shaderami są owinięte w stringi?

(btw, to wygląda na koślawie przepisany kod z https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context ? Wiesz, że na dole jest link do pełnego działającego kodu?)

(rozumiem, że koniecznie chcesz rysować w canvasie WebGLem, a nie prostymi API do rysowania w canvasie?)

---

Zgadza się ,a jak powinien wyglądać prawidłowy kod WebGL do rysowania w canvas Obiektów 3d ? Jeśli możesz to proszę podeślij mi prawidłową składnię.

Pozdrawiam

---

(btw, to wygląda na koślawie przepisany kod z https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context ? Wiesz, że na dole jest link do pełnego działającego kodu?)

---

Dzięki, sprawdzę i odpowiem jaki uzyskałem rezultat