爲什麼我的形狀不會像這個例子那樣改變顏色？

這是我下面的例子：https://thebookofshaders.com/03/爲什麼我的形狀不會像這個例子那樣改變顏色？

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <!--Include A/S WebGL support libraries--> 
    <script type="text/javascript" src="../Common/webgl-utils.js"></script> 
    <script type="text/javascript" src="../Common/initShaders.js"></script> 
    <script type="text/javascript" src="../Common/MV.js"></script> 
    <script type="text/javascript" src="../Common/webgl-debug.js"></script> 
    <script type="text/javascript" src="assignment1.js"></script> 
    <script id="vertex-shader" type="x-shader/x-vertex"> 
     // GLSL vertex shader code 
     attribute vec4 vPosition; 
     void main() 
     { 
      gl_Position = vPosition; 
     } 
    </script> 
    <script id="fragment-shader" type="x-shader/x-fragment"> 
     // GLSL fragment shader code 
     precision mediump float; 
     uniform float u_time; 
     void main() 
     { 

      gl_FragColor = vec4(abs(sin(u_time)), 1.0, 1.0, 1.0); 
     } 
    </script> 
<canvas id="gl-canvas" width="512" height=" 512">> 
Oops ... your browser doesn't support the HTML5 canvas element 
</canvas> 
</body> 
</html>

這裏是我的JavaScript：

// square.js -- a graphics "Hello World" 
var gl; 
var points; 

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

    // gl = WebGLUtils.setupWebGL(canvas); // More efficient 
    gl = WebGLDebugUtils.makeDebugContext(canvas.getContext("webgl")); // For debugging 
    if (!gl) { alert("WebGL isn't available"); 
       } 

    // Four 2D Vertices using Angel/Shreiner utility class vac2 
    var vertices = [   
     vec2(-0.5, 0.5), 
     vec2( 0.5, 0.5), 
     vec2( 0.5, -0.5), 
     vec2(-0.5, -0.5) 
    ]; 


    // Configure WebGL 

    gl.viewport(canvas.width/2, 0, canvas.width/2, canvas.height/2); 
    gl.clearColor(0.0, 0.0, 0.0, 1.0); 

    // Load shaders and initialize attribute buffers using A/S utility initShaders 

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

    // Load the data into the GPU using A/S flatten function 

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


    // Associate our shader variables with our data buffer 

    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(
     vPosition, // Specifies the index of the generic vertex attribute to be modified. 
     2,   // Specifies the number of components per generic vertex attribute. 
        // Must be 1, 2, 3, or 4. 
     gl.FLOAT, // Specifies the data type of each component in the array. 
      // GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_FIXED, or GL_FLOAT. 
     false,  // Specifies whether fixed-point data values should be normalized (GL_TRUE) 
      // or converted directly as fixed-point values (GL_FALSE) when they are accessed. 
     0,   // Specifies the byte offset between consecutive generic vertex attributes. 
      // If stride is 0, the generic vertex attributes are understood 
      // to be tightly packed in the array. 
     0   // Specifies a pointer to the first component 
      // of the first generic vertex attribute in the array. 
         ); 
    gl.enableVertexAttribArray(vPosition);  

    render(); 
}; 

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

我覺得它是與調用每次更改後渲染。另外，我不確定爲什麼這個形狀是藍色的。我對WebGL很陌生。有沒有人有任何建議的材料來學習它？

來源

2017-09-11 Michael Drum

您只能在窗口onload中調用一次渲染。你需要再次調用它 –

這樣做的最佳做法是什麼？ –

如果您是WebGL的新手，我建議您閱讀[這些教程]（https://webglfundamentals.org） – gman

在瀏覽器中以編程方式動畫的推薦方式是使用requestAnimationFrame。

實施例：

// animate the background color 
 
function render(timeSincePageLoadedInMilliseconds) { 
 
    const timeInSeconds = timeSincePageLoadedInMilliseconds * 0.001; 
 
    document.body.style.backgroundColor = `rgb(${timeInSeconds % 1 * 256 | 0}, 0, 0)`; 
 
    requestAnimationFrame(render); 
 
} 
 
requestAnimationFrame(render);

，實施例更新基於時間的頁面的所述主體的所述背景顏色。在你自己的程序中，你可以更新自己的變量，這些變量代表位置，方向，比例，顏色，任何想要動畫的東西，然後重新繪製所有東西。

請參閱this

來源

2017-09-12 00:12:07 gman

爲什麼我的形狀不會像這個例子那樣改變顏色？

回答

相關問題