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
ing 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