时间戳

首页 > 解决方案 > 使用 WEBGL 的彩色渐变片段

javascript - 使用 WEBGL 的彩色渐变片段

问题描述

webgl练习题

我必须创建的练习题是上图，我不知道如何执行它。每次我都得到一个白屏。我知道这与我将颜色变量添加到缓冲区属性有关，但我无法弄清楚。任何帮助将不胜感激。

var gl;

window.onload = function init()
{
    var canvas = document.getElementById( "gl-canvas" );

    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    // Four Vertices

    var vertices = [
        vec2( -0.5, -0.5 ),
        vec2( -0.5,  0.5 ),
        vec2(  0.5,  0.5 ),
        vec2(  0.5, -0.5)
    ];


    var colors = [
        1.0,  1.0,  1.0,  1.0,    // white
        1.0,  0.0,  0.0,  1.0,    // red
        0.0,  1.0,  0.0,  1.0,    // green
        0.0,  0.0,  1.0,  1.0,    // blue
    ];
    //
    //  Configure WebGL
    //
    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

    //  Load shaders and initialize attribute buffers

    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );

    // Load the data into the GPU

    var bufferId = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );


   var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new flatten(colors), gl.STATIC_DRAW);



    // Associate out shader variables with our data buffer


    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    render();
};


function render() {
    gl.clear( gl.COLOR_BUFFER_BIT );
    gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
}

标签： javascriptwebgl

解决方案

    gl.bufferData(gl.ARRAY_BUFFER, new flatten(colors), gl.STATIC_DRAW);

在这里使用new看起来像一个错误，也没有什么可以展平的，因为颜色数组已经是平的（顺便说一句。有一个官方的平面功能）。

此外，您仍然需要像使用位置一样设置顶点属性（请记住，您的颜色具有比您的位置更多的元素）并在着色器中输出颜色。

推荐阅读