javascript - Why won't my shape animate color change like this example? -
this example following: https://thebookofshaders.com/03/
here 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 ... browser doesn't support html5 canvas element </canvas> </body> </html> here javascript:
// square.js -- 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") ); // debugging if ( !gl ) { alert( "webgl isn't available" ); } // 4 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 , initialize attribute buffers using a/s utility initshaders var program = initshaders( gl, "vertex-shader", "fragment-shader" ); gl.useprogram( program ); // load data 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 our data buffer var vposition = gl.getattriblocation( program, "vposition" ); gl.vertexattribpointer( vposition, // specifies index of generic vertex attribute modified. 2, // specifies number of components per generic vertex attribute. // must 1, 2, 3, or 4. gl.float, // specifies data type of each component in array. // gl_byte, gl_unsigned_byte, gl_short, gl_unsigned_short, gl_fixed, or gl_float. false, // specifies whether fixed-point data values should normalized (gl_true) // or converted directly fixed-point values (gl_false) when accessed. 0, // specifies byte offset between consecutive generic vertex attributes. // if stride 0, generic vertex attributes understood // tightly packed in array. 0 // specifies pointer first component // of first generic vertex attribute in array. ); gl.enablevertexattribarray( vposition ); render(); }; function render() { gl.clear( gl.color_buffer_bit ); gl.drawarrays( gl.triangle_strip, 0, 4 ); } i feel has calling render after every change. also, i'm not sure why shape blue. i'm new webgl. have suggested materials learning it?
the recommended way animate things programmatically in browser use requestanimationframe.
example:
// animate 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);that examples updates background color of body of page based on time. in own program you'd update own variables represent positions, orientations, scales, colors, whatever want animate , re-draw everything.
see this
Comments
Post a Comment