个人中心
gpt4 book ai didi

javascript - 为什么我的形状动画颜色不会像这个例子那样改变？

转载 作者：行者123 更新时间：2023-12-03 03:29:25 24 4
gpt4 key购买 nike

这是我正在遵循的示例: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 真的很陌生。有人有推荐的学习 Material 吗？

最佳答案

在浏览器中以编程方式设置动画的推荐方法是使用 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

关于javascript - 为什么我的形状动画颜色不会像这个例子那样改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46165483/

24 4 0
文章推荐： javascript - 组件不渲染从渲染函数调用的函数
文章推荐： dart - 简单的Dart Web组件不起作用
文章推荐： javascript - 加载后 jQuery DataTables 按钮触发导致无限循环
文章推荐： javascript - 为什么访问map方法时传入的值未定义？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com