| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL | [Back] [Original] |
Get to know MDN better
: "webgl-demo.js"
let squareRotation = 0.0;
let deltaTime = 0;
drawScene()
:
"draw-scene.js" drawScene()
function drawScene(gl, programInfo, buffers, squareRotation) {
:
drawScene() mat4.translate()
mat4.rotate(
modelViewMatrix, //
modelViewMatrix, //
squareRotation, //
[0, 0, 1],
); //
modelViewMatrix squareRotation Z
squareRotation
:
main() drawScene()
let then = 0;
//
function render(now) {
now *= 0.001; //
deltaTime = now - then;
then = now;
drawScene(gl, programInfo, buffers, squareRotation);
squareRotation += deltaTime;
requestAnimationFrame(render);
}
requestAnimationFrame(render);
requestAnimationFrame "render" requestAnimationFrame deltaTime
squareRotation
WebGLRenderingContextWebGLBufferWebGLFramebufferWebGLRenderbufferWebGLObjectWebGLProgramWebGLShaderWebGLTextureWebGLUniformLocationWebGLActiveInfoWebGLShaderPrecisionFormatWebGLContextEventWebGLQueryWebGLSamplerWebGLSyncWebGLTransformFeedbackWebGLVertexArrayObjectWebGL2RenderingContextWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureOES_element_index_uintEXT_frag_depthWEBGL_lose_contextEXT_texture_filter_anisotropicEXT_sRGBOES_standard_derivativesOES_texture_floatWEBGL_draw_buffersOES_texture_float_linearEXT_shader_texture_lodOES_texture_half_floatOES_texture_half_float_linearWEBGL_color_buffer_floatEXT_color_buffer_half_floatOES_vertex_array_objectANGLE_instanced_arraysEXT_blend_minmaxEXT_disjoint_timer_queryOES_draw_buffers_indexed| Web Proxy Viewer | New URL | Original Page |