文章/答案/技术大牛

发布

社区首页 >问答首页 >使用颜色缓冲区时WebGL呈现失败

问使用颜色缓冲区时WebGL呈现失败
EN

Stack Overflow用户

提问于 2016-04-23 15:33:08

回答 2查看 1.1K关注 0票数 0

<!doctype html>
<html>

<body>
<canvas id ="ctx" width = "300" height = "300"></canvas> 
    <script>
        //Getting Webgl Context

        var ctx = document.getElementById("ctx");
        var webgl = ctx.getContext("experimental-webgl");

        /*Creating Shader*/

        //Vertex Code
        var vertexCode =
        'attribute vec3 coordinates;'+
        'attribute vec3 color;'+
        'varying vec3 vColor;'+
        'void main(void) {' +
           ' gl_Position = vec4(coordinates, 1.0);' +
           'vColor = color;'+
        '}';

        //Creating Shader Object    
        var vertexShader = webgl.createShader(webgl.VERTEX_SHADER);

        //Assigning the Source
        webgl.shaderSource(vertexShader, vertexCode);

        //Compiling the Source
        webgl.compileShader(vertexShader);

        //Fragment Shader Code 
         var fragmentCode ='precision mediump float;'+
        'varying vec3 vColor;'+
        'void main(void) {'+
           'gl_FragColor = vec4(vColor, 1.);'+
        '}';

        //Creating Shader Object    
        var fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);

        //Assigning the Source
        webgl.shaderSource(fragmentShader, fragmentCode);

        //Compiling the Source
        webgl.compileShader(fragmentShader);

        //Creating Program to store Shader
        var shaderProgram = webgl.createProgram();

        //Attaching the shaders
        webgl.attachShader(shaderProgram, vertexShader);
        webgl.attachShader(shaderProgram, fragmentShader);

        //linking the Program
        webgl.linkProgram(shaderProgram);

        //using the Program
        webgl.useProgram(shaderProgram);

        //Defining geometry
        var vertices = [
        -0.5,0.5,0.0,
        -0.5,-0.5,0.0,
        0.5,-0.5,0.0,
        0.5,0.5,0.0
     ];

     var colors = [0,0,1, 1,0,0, 0,1,0, 1,0,1,];

     indices = [3,2,1,3,1,0];

        //Creating a Buffer
        var VextexBuffer = webgl.createBuffer();
        var IndexBuffer = webgl.createBuffer();
        var colorBuffer = webgl.createBuffer();

        //Binding the Buffer
        webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
        webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
        webgl.bindBuffer(webgl.ARRAY_BUFFER, colorBuffer);

        //Buffer Data
        webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);
        webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);
        webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(colors), webgl.STATIC_DRAW);

        /*Associating the shaders to bufferObject*/

        //Getting attribute location
        var coord = webgl.getAttribLocation(shaderProgram,"coordinates");
        var color = webgl.getAttribLocation(shaderProgram, "color");

        //pointing an attribute to the currently bound VBO
        webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,0,0);
        webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,0,0);

        //enabling the attributes
        webgl.enableVertexAttribArray(coord);
        webgl.enableVertexAttribArray(color);
        //Unbind Array


        /*Drawing the Triangle*/

        //Clearing the Colour
        webgl.clearColor(.5,.5,.5,1);

        //Enabling the depth test
        webgl.enable(webgl.DEPTH_TEST);

        //Clearing colour nuffer bit
        webgl.clear(webgl.COLOR_BUFFER_BIT);

        //Setting a viewport
        webgl.viewport(0,0,ctx.width,ctx.height);

        //Draw the triangle
            webgl.drawElements(webgl.TRIANGLES,indices.length,webgl.UNSIGNED_SHORT,0);

    </script>
</body>
</html>

如果删除颜色缓冲区和与其相关的所有内容，代码将运行，但使用颜色缓冲区时，我只看到灰色画布，没有其他任何东西。

此外，Chrome控制台不显示任何错误或警告。请帮帮我。

javascript

html

webgl

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-23 16:39:07

你用你的颜色覆盖你的顶点位置：

 webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);
 webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(colors), webgl.STATIC_DRAW);

在任何给定的时间，每个类型(和ELEMENT_ARRAY_BUFFER)只能绑定一个缓冲区，因此流是绑定缓冲区并设置其数据，然后为特定的缓冲区为设置顶点属性指针，然后转到下一个缓冲区：

// setup positions
var VextexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);
var coord = webgl.getAttribLocation(shaderProgram,"coordinates");
webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,0,0);

// setup indices
var IndexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);

// setup colors
var colorBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, colorBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(colors), webgl.STATIC_DRAW);
var color = webgl.getAttribLocation(shaderProgram, "color");
webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,0,0);

对于使用多个不同缓冲区并希望实时的应用程序，流程是在初始化阶段创建和设置缓冲区，然后只绑定缓冲区，并在动画循环期间设置顶点属性指针。

<!doctype html>
<html>

<body>
<canvas id ="ctx" width = "300" height = "300"></canvas> 
    <script>
        //Getting Webgl Context

        var ctx = document.getElementById("ctx");
        var webgl = ctx.getContext("experimental-webgl");

        /*Creating Shader*/

        //Vertex Code
        var vertexCode =
        'attribute vec3 coordinates;'+
        'attribute vec3 color;'+
        'varying vec3 vColor;'+
        'void main(void) {' +
           ' gl_Position = vec4(coordinates, 1.0);' +
           'vColor = color;'+
        '}';

        //Creating Shader Object    
        var vertexShader = webgl.createShader(webgl.VERTEX_SHADER);

        //Assigning the Source
        webgl.shaderSource(vertexShader, vertexCode);

        //Compiling the Source
        webgl.compileShader(vertexShader);

        //Fragment Shader Code 
         var fragmentCode ='precision mediump float;'+
        'varying vec3 vColor;'+
        'void main(void) {'+
           'gl_FragColor = vec4(vColor, 1.);'+
        '}';

        //Creating Shader Object    
        var fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);

        //Assigning the Source
        webgl.shaderSource(fragmentShader, fragmentCode);

        //Compiling the Source
        webgl.compileShader(fragmentShader);

        //Creating Program to store Shader
        var shaderProgram = webgl.createProgram();

        //Attaching the shaders
        webgl.attachShader(shaderProgram, vertexShader);
        webgl.attachShader(shaderProgram, fragmentShader);

        //linking the Program
        webgl.linkProgram(shaderProgram);

        //using the Program
        webgl.useProgram(shaderProgram);

        //Defining geometry
        var vertices = [
        -0.5,0.5,0.0,
        -0.5,-0.5,0.0,
        0.5,-0.5,0.0,
        0.5,0.5,0.0
     ];

     var colors = [0,0,1, 1,0,0, 0,1,0, 1,0,1,];

     indices = [3,2,1,3,1,0];

       // setup positions
       var VextexBuffer = webgl.createBuffer();
       webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
       webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);
       var coord = webgl.getAttribLocation(shaderProgram,"coordinates");
       webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false ,0,0);

       // setup indices
       var IndexBuffer = webgl.createBuffer();
       webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
       webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);

       // setup colors
       var colorBuffer = webgl.createBuffer();
       webgl.bindBuffer(webgl.ARRAY_BUFFER, colorBuffer);
       webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(colors), webgl.STATIC_DRAW);
       var color = webgl.getAttribLocation(shaderProgram, "color");
       webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false ,0,0);

        //enabling the attributes
        webgl.enableVertexAttribArray(coord);
        webgl.enableVertexAttribArray(color);
        //Unbind Array


        /*Drawing the Triangle*/

        //Clearing the Colour
        webgl.clearColor(.5,.5,.5,1);

        //Enabling the depth test
        webgl.enable(webgl.DEPTH_TEST);

        //Clearing colour nuffer bit
        webgl.clear(webgl.COLOR_BUFFER_BIT);

        //Setting a viewport
        webgl.viewport(0,0,ctx.width,ctx.height);

        //Draw the triangle
            webgl.drawElements(webgl.TRIANGLES,indices.length,webgl.UNSIGNED_SHORT,0);

    </script>
</body>
</html>

票数 0

Stack Overflow用户

发布于 2016-04-23 16:38:35

这是工作小提琴。

代码中最大的错误是使用bindBuffer方法。WebGL上下文可以一次绑定一个缓冲区。一次绑定两个或多个缓冲区只导致绑定最后一个缓冲区。

当您必须将数据复制到缓冲区时，您需要绑定它，然后调用bufferData函数。

vertexAttribPointer函数也是如此。首先绑定要绑定属性的缓冲区，然后调用vertexAttribPointer，等等。

//Getting Webgl Context

var ctx = document.getElementById("ctx");
var webgl = ctx.getContext("experimental-webgl");

/*Creating Shader*/

//Vertex Code
var vertexCode =
        'attribute vec3 coordinates;' +
        'attribute vec3 color;' +
        'varying vec3 vColor;' +
        'void main(void) {' +
        ' gl_Position = vec4(coordinates, 1.0);' +
        'vColor = color;' +
        '}';

//Creating Shader Object    
var vertexShader = webgl.createShader(webgl.VERTEX_SHADER);

//Assigning the Source
webgl.shaderSource(vertexShader, vertexCode);

//Compiling the Source
webgl.compileShader(vertexShader);

//Fragment Shader Code 
var fragmentCode = 'precision mediump float;' +
        'varying vec3 vColor;' +
        'void main(void) {' +
        'gl_FragColor = vec4(vColor, 1.);' +
        '}';

//Creating Shader Object    
var fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER);

//Assigning the Source
webgl.shaderSource(fragmentShader, fragmentCode);

//Compiling the Source
webgl.compileShader(fragmentShader);

//Creating Program to store Shader
var shaderProgram = webgl.createProgram();

//Attaching the shaders
webgl.attachShader(shaderProgram, vertexShader);
webgl.attachShader(shaderProgram, fragmentShader);

//linking the Program
webgl.linkProgram(shaderProgram);

//using the Program
webgl.useProgram(shaderProgram);

//Defining geometry
var vertices = [
    -0.5, 0.5, 0.0,
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.5, 0.5, 0.0
];

var colors = [0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, ];

indices = [3, 2, 1, 3, 1, 0];

var coord = webgl.getAttribLocation(shaderProgram, "coordinates");
var color = webgl.getAttribLocation(shaderProgram, "color");

webgl.enableVertexAttribArray(coord);
webgl.enableVertexAttribArray(color);

//Creating a Buffer
var VextexBuffer = webgl.createBuffer();
var IndexBuffer = webgl.createBuffer();
var colorBuffer = webgl.createBuffer();

//Binding the Buffer
webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(vertices), webgl.STATIC_DRAW);

webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), webgl.STATIC_DRAW);

webgl.bindBuffer(webgl.ARRAY_BUFFER, colorBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(colors), webgl.STATIC_DRAW);

webgl.bindBuffer(webgl.ARRAY_BUFFER, VextexBuffer);
webgl.vertexAttribPointer(coord, 3, webgl.FLOAT, false, 0, 0);

webgl.bindBuffer(webgl.ARRAY_BUFFER, colorBuffer);
webgl.vertexAttribPointer(color, 3, webgl.FLOAT, false, 0, 0);
/*Drawing the Triangle*/
//Clearing the Colour
webgl.clearColor(.5, .5, .5, 1);
//Enabling the depth test
webgl.enable(webgl.DEPTH_TEST);
//Clearing colour nuffer bit
webgl.clear(webgl.COLOR_BUFFER_BIT);
//Setting a viewport
webgl.viewport(0, 0, ctx.width, ctx.height);
//Draw the triangle
webgl.drawElements(webgl.TRIANGLES, indices.length, webgl.UNSIGNED_SHORT, 0);

<canvas id ="ctx" width = "300" height = "300"></canvas>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36812755

复制

相似问题

问使用颜色缓冲区时WebGL呈现失败
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用颜色缓冲区时WebGL呈现失败EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用颜色缓冲区时WebGL呈现失败
EN