DOCTYPE html html xmlns http www w3 org 1999 xhtml lang en head title WebGL title meta charset utf 8 head body canvas id canvas width 640 height 480 Your browser doesn t appear to support the HTML5 b canvas b element canvas script function createShader str type var shader gl createShader type gl shaderSource shader str gl compileShader shader if gl getShaderParameter shader gl COMPILE_STATUS throw gl getShaderInfoLog shader return shader function createProgram vstr fstr var program gl createProgram var vshader createShader vstr gl VERTEX_SHADER var fshader createShader fstr gl FRAGMENT_SHADER gl attachShader program vshader gl attachShader program fshader gl linkProgram program if gl getProgramParameter program gl LINK_STATUS throw gl getProgramInfoLog program return program function de2ra deg return deg Math PI 180 Helper mult translate var Matrix4 function m this M m new Float32Array 16 this set function x val this M x val this get function x return this M x this mult function b var a this M this M a 0 b M 0 a 1 b M 4 a 2 b M 8 a 3 b M 12 a 0 b M 1 a 1 b M 5 a 2 b M 9 a 3 b M 13 a 0 b M 2 a 1 b M 6 a 2 b M 10 a 3 b M 14 a 0 b M 3 a 1 b M 7 a 2 b M 11 a 3 b M 15 a 4 b M 0 a 5 b M 4 a 6 b M 8 a 7 b M 12 a 4 b M 1 a 5 b M 5 a 6 b M 9 a 7 b M 13 a 4 b M 2 a 5 b M 6 a 6 b M 10 a 7 b M 14 a 4 b M 3 a 5 b M 7 a 6 b M 11 a 7 b M 15 a 8 b M 0 a 9 b M 4 a 10 b M 8 a 11 b M 12 a 8 b M 1 a 9 b M 5 a 10 b M 9 a 11 b M 13 a 8 b M 2 a 9 b M 6 a 10 b M 10 a 11 b M 14 a 8 b M 3 a 9 b M 7 a 10 b M 11 a 11 b M 15 a 12 b M 0 a 13 b M 4 a 14 b M 8 a 15 b M 12 a 12 b M 1 a 13 b M 5 a 14 b M 9 a 15 b M 13 a 12 b M 2 a 13 b M 6 a 14 b M 10 a 15 b M 14 a 12 b M 3 a 13 b M 7 a 14 b M 11 a 15 b M 15 return this Matrix4 identity function this M new Float32Array 16 this M 0 1 this M 5 1 this M 10 1 this M 15 1 Matrix4 translate function x y z this identity this M 12 x this M 13 y this M 14 z return this M Matrix4 scale function x y z this identity this M 0 x this M 5 y this M 10 z return this M Matrix4 rotate function angle x y z this identity if x y z return this M var c Math cos angle var s Math sin angle var t 1 c this M 0 t x x c this M 1 t x y z s this M 2 t x z y s this M 4 t x y z s this M 5 t y y c this M 6 t y z x s this M 8 t x z y s this M 9 t y z x s this M 10 t z z c this M 12 this M 13 this M 14 0 return this M Matrix4 perspective function fov aspect this identity var f 1 Math tan fov 2 aspect 0 5 this M 0 f aspect this M 5 f this M 11 1 return this M Matrix4 perspective2 function fov aspect this identity var f Math tan fov Math PI 360 console log f this M 0 1 f this M 5 aspect f this M 11 1 return this M Matrix4 perspective3 function fovy aspect znear zfar this identity var top znear Math tan fovy Math PI 360 0 var bottom top var left bottom aspect var right top aspect var X 2 znear right left var Y 2 znear top bottom var A right left right left var B top bottom top bottom var C zfar znear zfar znear var D 2 zfar znear zfar znear this M 0 X this M 5 Y this M 8 A this M 9 B this M 10 C this M 11 1 this M 14 D return this M const vssrc attribute vec3 pos attribute vec3 norm varying vec4 vNormal varying vec3 tex uniform mat4 perspective uniform mat4 view uniform mat4 model void main tex pos vNormal view model vec4 norm 0 0 gl_Position perspective view model vec4 pos 1 const fssrc precision mediump float varying vec4 vNormal varying vec3 tex void main vec4 col vec4 1 1 1 1 float diffuse dot vec3 0 0 1 vNormal xyz gl_FragColor vec4 col r diffuse col g diffuse col b diffuse col a debug gl_FragColor vec4 1 1 1 1 0 gl_FragColor vec4 tex rgb 1 0 var canvas document getElementById canvas gl canvas getContext webgl gl clearColor 0 0 0 0 0 0 1 gl enable gl DEPTH_TEST gl clear gl COLOR_BUFFER_BIT var cubeObject indices 0 1 2 2 1 3 4 5 6 6 5 7 8 9 10 10 9 11 12 13 14 14 13 15 16 17 18 18 17 19 20 21 22 22 21 23 vertices 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 normals 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 var program createProgram vssrc fssrc gl useProgram program program pos gl getAttribLocation program pos program norm gl getAttribLocation program norm var vertexPosBuffer gl createBuffer gl bindBuffer gl ARRAY_BUFFER vertexPosBuffer gl bufferData gl ARRAY_BUFFER new Float32Array cubeObject vertices gl STATIC_DRAW var indexBuffer gl createBuffer gl bindBuffer gl ELEMENT_ARRAY_BUFFER indexBuffer gl bufferData gl ELEMENT_ARRAY_BUFFER new Uint16Array cubeObject indices gl STATIC_DRAW var normalBuffer gl createBuffer gl bindBuffer gl ARRAY_BUFFER normalBuffer gl bufferData gl ARRAY_BUFFER new Float32Array cubeObject normals gl STATIC_DRAW perspective gl getUniformLocation program perspective model gl getUniformLocation program model view gl getUniformLocation program view gl uniformMatrix4fv perspective false Matrix4 perspective3 45 window innerWidth window innerHeight 0 1 10000 var temp 0 function update temp 0 003 gl clear gl COLOR_BUFFER_BIT gl DEPTH_BUFFER_BIT gl useProgram program gl enableVertexAttribArray program pos gl bindBuffer gl ARRAY_BUFFER vertexPosBuffer gl bindBuffer gl ELEMENT_ARRAY_BUFFER indexBuffer gl vertexAttribPointer program pos 3 gl FLOAT false 0 0 gl enableVertexAttribArray program norm gl bindBuffer gl ARRAY_BUFFER normalBuffer gl vertexAttribPointer program norm 3 gl FLOAT false 0 0 var rx new Matrix4 Matrix4 rotate temp 0 0 0 var ry new Matrix4 Matrix4 rotate temp 0 1 0 var rz new Matrix4 Matrix4 rotate temp 0 0 1 var obj rx mult ry mult rz gl uniformMatrix4fv model false obj M gl uniformMatrix4fv view false Matrix4 translate 0 0 3 gl drawElements gl TRIANGLES cubeObject indices length gl UNSIGNED_SHORT 0 setInterval update 10 script body html