Почему не рисование WebGL? - PullRequest
Новая
       1

Почему не рисование WebGL?

0 голосов
/ 18 января 2012

У меня есть очень простой (но большой) код, который не работает.Треугольник не показывает.Он просто проходит 3 вершины, уже умноженные на орто-матрицу.Ничего не делайте в вершинном шейдере и закрашивайте белым во фрагментном шейдере. 

<head>
    <script type="text/javascript">
        var gl;
        _main_web = function() {
            gl = document.getElementById("canvas").getContext("experimental-webgl");
            gl.clearColor(1,0,0,1);
            gl.enable(gl.DEPTH_TEST);
            gl.viewport(0, 0, 640, 480);
            gl.clearDepth(1);

            buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
            gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]),
            gl.STATIC_DRAW);

            vert_shader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vert_shader,"attribute vec4 vertex;void main(void) {gl_Position = vertex;}\n");
            gl.compileShader(vert_shader);
            if( !gl.getShaderParameter(vert_shader,gl.COMPILE_STATUS ) ) {
                throw 0;
            }

            frag_shader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(frag_shader,"void main(void) { gl_FragColor = vec4(1.0,1.0,1.0,1.0); } \n");
            gl.compileShader(frag_shader);
            if( !gl.getShaderParameter(frag_shader,gl.COMPILE_STATUS) ) {
                throw 1;
            }

            program = gl.createProgram();
            gl.attachShader(program,vert_shader);
            gl.attachShader(program,frag_shader);
            gl.linkProgram(program);
            if( !gl.getProgramParameter(program,gl.LINK_STATUS) ) {
                throw 2;
            }

            vertexLocation = gl.getAttribLocation(program,"vertex");

            gl.deleteShader(frag_shader);
            gl.deleteShader(vert_shader);
            gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
            gl.enableVertexAttribArray(vertexLocation);
            gl.vertexAttribPointer(vertexLocation,4,gl.FLOAT,false,0,0);

            gl.drawArrays(gl.TRIANGLES,0,3);
        }
    </script>
    <style>
        body {
            margin:0px;
        }
    </style>
</head>
<body onload="_main_web()">
    <canvas id="canvas" width=640 height=480>

    </canvas>
</body>

Я отлаживаю весь день и не могу найти ошибку.getError всегда возвращает 0. Что я пропустил?

Ответы [ 2 ]

3 голосов
/ 18 января 2012

С вашим измененным кодом я смог заставить его отобразить белый треугольник, удалив дополнительный набор [] вокруг вызова конструктора Float32Array. Итак, перейдите от этого: 

new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]),

к этому 

new Float32Array([-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]),

Я предполагаю, что это была простая опечатка, но ради или ясности: new Float32Array() ожидает, что ему будет дан массив чисел, который он затем "приведёт" к 32-битным значениям с плавающей запятой. Вы передавали ему массив, содержащий один элемент, который также был массивом. Он не знает, как с этим справиться, поэтому приведение завершается неудачно, и поэтому вам возвращается Float32Array, который содержит 1 значение: NaN.

3 голосов
/ 18 января 2012 
gl.drawArrays(4,3,0);

Это выглядит странно.Должен выглядеть так: 

gl.drawArrays(
    /* mode */ gl.TRIANGLES,
    /* first vertex */ 0,
    /* num vertices */ 3
);

Также (неважно): 

gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

Последний bindBuffer не важен в данный момент.Вам это нужно, когда вы устанавливаете местоположение атрибута с помощью gl.vertexAttribPointer, но после его установки вы можете изменить привязку ARRAY_BUFFER на что угодно.

Это необходимо сделать, если несколько атрибутов были расположены в разных VBO.

(Примечание: это не относится к привязкам ELEMENT_ARRAY_BUFFER, которые должны быть установлены, если вы делаете drawElements или что-то еще.)

...