WebGL Frustum Interactive Demo style body min height 1200px input numeric width 30px div main padding top 60px font size 15px h1 font size 45px font weight 600 h1 head1 margin top 2ex margin bottom 0 5ex h1 head2 margin top 0ex margin bottom 1 7ex h1 subtitle font weight 300 h2 font size 24px margin top 6ex margin bottom 2ex h3 font size 18px margin top 2ex margin bottom 1ex a accordion toggle h3 color black p courseinfo font size 22px margin bottom 0px p staff font size 18px margin top 0ex p coursedesc font size 14px margin top 5ex table sched width 100 border collapse collapse table sched th padding 5ex 5em margin 0 font weight bold text align left table sched td padding 3ex 5em margin 0 vertical align middle text align left border style none solid border color ddd border width 0px 1px table sched tr padding 0 margin 0 table sched th month table sched td month table sched th day table sched td day table sched td sec width 1px table sched th ref table sched td ref table sched th hwdue table sched td projdue text align center width 1px table sched td day text align right table sched td sec text align left table sched th month text align center table sched th month table sched td day table sched td sec padding left 12px table sched td month padding left 0 2em border left width 0 table sched td day padding left 2em padding right 0 2em border right width 0 table sched td day table sched td sec border left width 0 table sched td projdue border right width 0 width 10em table sched tr evn background color fff table sched tr odd background color eee table sched tr now background color ff4 table sched tr exam background color bb9 table sched tr exam td ref color bb9 table sched tr exam td ref a dis color bb9 table sched tr due background color eee table sched tr due td ref color eee table sched tr due td ref a dis color eee table sched tr evn td border color eee table sched tr odd td border color fff table sched td ref color 888 table sched tr dis color 888 table sched tr dis td ref color fff table sched tr dis td ref a dis color fff table sched tr header color white background color 888 border top 6px solid white div homework border 1px solid black border radius 15px padding 20px 30px margin 30px 0px background color ddd div homework h3 font size 20px margin top 0ex margin bottom 0ex div accordion inner margin top 15px padding top 15px div accordion group margin top 20px margin bottom 0px float none h3 subtitle font weight 300 img hwpic float right padding 5px border 1px solid black margin 10px div proj steps padding 0 margin 0 0 0 2em code background none border none table matrix td padding 4px width 5em text align right fieldset legend font size 100 display inline margin 0 padding 0 border none fieldset label margin left 1em margin right 4px style Bootstrap link href https cdnjs cloudflare com ajax libs bootstrap 5 0 2 css bootstrap min css rel stylesheet link href https cdnjs cloudflare com ajax libs jqueryui 1 12 1 jquery ui min css rel stylesheet link href https cdnjs cloudflare com ajax libs jqueryui 1 12 1 jquery ui theme min css rel stylesheet link href https cdnjs cloudflare com ajax libs jqueryui 1 12 1 jquery ui structure min css rel stylesheet div class container h2 Perspective Viewing From Frustum h2 div class center block canvas id objCanvas style border none background color black width 300 height 300 canvas canvas id worldCanvas style border none background color black width 300 height 300 canvas div table class table table bordered tr td colspan 5 align center b Projection transformation b td tr tr td Projection td td left input type text class numeric id left value 1 0 br right input type text class numeric id right value 1 0 td td bot input type text class numeric id bottom value 1 0 br top input type text class numeric id top value 1 0 td td near input type text class numeric id near value 1 0 br far input type text class numeric id far value 3 0 td td table id projMatrix class matrix tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr table td tr tr td colspan 5 align center b Model view transformation b td tr tr td Translation td td X br input type text class numeric id transX value 0 0 td td Y br input type text class numeric id transY value 0 0 td td Z br input type text class numeric id transZ value 2 0 td td table id transMatrix class matrix tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr table td tr tr td Rotation td td X angle br input type text class numeric id rotX value 0 0 td td Y angle br input type text class numeric id rotY value 0 0 td td Z angle br input type text class numeric id rotZ value 0 0 td td table id rotMatrix class matrix tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr table td tr tr td Scale td td X br input type text class numeric id scaleX value 1 0 td td Y br input type text class numeric id scaleY value 1 0 td td Z br input type text class numeric id scaleZ value 1 0 td td table id scaleMatrix class matrix tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr table td tr tr td Compound Transformation td td fieldset legend Composition order legend label for orderTRS TRS label input type radio name comp order id orderTRS checked true label for orderSRT SRT label input type radio name comp order id orderSRT fieldset td td fieldset legend Rotation order legend label for orderXYZ XYZ label input type radio name rot order id orderXYZ checked true label for orderZYX ZYX label input type radio name rot order id orderZYX fieldset td td td td table id compMatrix class matrix tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr tr td td td td td td td td tr table td tr table div jQuery necessary for Bootstrap s JavaScript plugins script src https cdnjs cloudflare com ajax libs jquery 3 6 0 jquery min js script script src https cdnjs cloudflare com ajax libs jqueryui 1 12 1 jquery ui min js script Include all compiled plugins below or include individual files as needed script src https cdnjs cloudflare com ajax libs gl matrix 2 8 1 gl matrix min js script Google Code Prettifier script src https cdn rawgit com google code prettify master loader run prettify js script script id vertexShader type x shader x vertex attribute vec3 position uniform mat4 projection uniform mat4 toWorld void main gl Position projection toWorld vec4 position 1 0 script script id fragmentShader type x shader x fragment precision highp float uniform vec3 color void main gl FragColor vec4 color 1 0 script script var cubeData 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 lineInd 0 1 0 2 0 4 1 3 1 5 2 3 2 6 4 5 4 6 6 7 5 7 3 7 triInd lineColor 0 8 0 8 0 8 fillColor 1 0 0 9 0 7 function initGUI left spinner min 2 max 2 step 0 1 right spinner min 2 max 2 step 0 1 top spinner min 2 max 2 step 0 1 bottom spinner min 2 max 2 step 0 1 near spinner min 0 1 max 2 step 0 1 far spinner min 2 1 max 5 step 0 1 transX spinner min 2 max 2 step 0 1 transY spinner min 2 max 2 step 0 1 transZ spinner min 4 max 4 step 0 1 rotX spinner min 360 max 360 step 5 rotY spinner min 360 max 360 step 5 rotZ spinner min 360 max 360 step 5 scaleX spinner min 2 max 2 step 0 1 scaleY spinner min 2 max 2 step 0 1 scaleZ spinner min 2 max 2 step 0 1 function displayMatrix4 sel M sel find tr each function i elt elt find td each function j elt elt html M i 4 j toFixed 3 var xAxis vec3 fromValues 1 0 0 var yAxis vec3 fromValues 0 1 0 var zAxis vec3 fromValues 0 0 1 function getProjMatrix var l left spinner value r right spinner value var b bottom spinner value t top spinner value var n near spinner value f far spinner value var P mat4 create mat4 frustum P l r b t n f displayMatrix4 projMatrix P return P function getMVMatrix var t vec3 fromValues transX spinner value transY spinner value transZ spinner value var T mat4 create mat4 fromTranslation T t displayMatrix4 transMatrix T var R mat4 create if orderXYZ get 0 checked mat4 rotate R R rotX spinner value Math PI 180 xAxis mat4 rotate R R rotY spinner value Math PI 180 yAxis mat4 rotate R R rotZ spinner value Math PI 180 zAxis else mat4 rotate R R rotZ spinner value Math PI 180 zAxis mat4 rotate R R rotY spinner value Math PI 180 yAxis mat4 rotate R R rotX spinner value Math PI 180 xAxis displayMatrix4 rotMatrix R var s vec3 fromValues scaleX spinner value scaleY spinner value scaleZ spinner value var S mat4 create mat4 fromScaling S s displayMatrix4 scaleMatrix S var M mat4 create if orderTRS get 0 checked mat4 mul M M T mat4 mul M M R mat4 mul M M S else mat4 mul M M S mat4 mul M M R mat4 mul M M T displayMatrix4 compMatrix M return M initGUI function initializeWebGL canvas Getting WebGL context the right way var gl null try gl canvas 0 getContext experimental webgl if gl gl canvas 0 getContext webgl catch error NO OP if gl alert Could not get WebGL context throw new Error Could not get WebGL context return gl function createShader gl shaderScriptId var shaderScript shaderScriptId var shaderSource shaderScript 0 text var shaderType null if shaderScript 0 type x shader x vertex shaderType gl VERTEX SHADER else if shaderScript 0 type x shader x fragment shaderType gl FRAGMENT SHADER else throw new Error Invalid shader type shaderScript 0 type var shader gl createShader shaderType gl shaderSource shader shaderSource gl compileShader shader if gl getShaderParameter shader gl COMPILE STATUS var infoLog gl getShaderInfoLog shader gl deleteShader shader throw new Error An error occurred compiling the shader infoLog else return shader function createGlslProgram gl vertexShaderId fragmentShaderId var program gl createProgram gl attachShader program createShader gl vertexShaderId gl attachShader program createShader gl fragmentShaderId gl linkProgram program gl validateProgram program if gl getProgramParameter program gl LINK STATUS var infoLog gl getProgramInfoLog program gl deleteProgram program throw new Error An error occurred linking the program infoLog else return program function createShape gl data var shape shape vertexBuffer gl createBuffer gl bindBuffer gl ARRAY BUFFER shape vertexBuffer gl bufferData gl ARRAY BUFFER new Float32Array data vertices gl STATIC DRAW gl bindBuffer gl ARRAY BUFFER null shape lineIndexBuffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER shape lineIndexBuffer gl bufferData gl ELEMENT ARRAY BUFFER new Uint16Array data lineInd gl STATIC DRAW gl bindBuffer gl ELEMENT ARRAY BUFFER null shape triIndexBuffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER shape triIndexBuffer gl bufferData gl ELEMENT ARRAY BUFFER new Uint16Array data triInd gl STATIC DRAW gl bindBuffer gl ELEMENT ARRAY BUFFER null shape lineLen data lineInd length shape triLen data triInd length shape lineColor data lineColor shape fillColor data fillColor return shape function drawShape gl shape program xf proj gl useProgram program gl bindBuffer gl ARRAY BUFFER shape vertexBuffer var positionLocation gl getAttribLocation program position gl enableVertexAttribArray positionLocation gl vertexAttribPointer positionLocation 3 gl FLOAT false 4 3 0 gl bindBuffer gl ARRAY BUFFER null gl uniformMatrix4fv gl getUniformLocation program toWorld false xf gl uniformMatrix4fv gl getUniformLocation program projection false proj gl uniform3fv gl getUniformLocation program color shape fillColor gl bindBuffer gl ELEMENT ARRAY BUFFER shape triIndexBuffer gl drawElements gl TRIANGLES shape triLen gl UNSIGNED SHORT 0 gl bindBuffer gl ELEMENT ARRAY BUFFER null gl uniform3fv gl getUniformLocation program color shape lineColor gl bindBuffer gl ELEMENT ARRAY BUFFER shape lineIndexBuffer gl drawElements gl LINES shape lineLen gl UNSIGNED SHORT 0 gl bindBuffer gl ELEMENT ARRAY BUFFER null gl useProgram null function glEnv canvas var gl initializeWebGL canvas var program createGlslProgram gl vertexShader fragmentShader var cat createShape gl cubeData var xf mat4 create function setXf newXf mat4 copy xf newXf var proj mat4 create function setProj newProj mat4 copy proj newProj function drawFrame gl clearColor 0 15 0 2 0 5 1 0 gl clear gl COLOR BUFFER BIT drawShape gl cat program xf proj return setXf setXf setProj setProj drawFrame drawFrame var objSpaceEnv glEnv objCanvas var worldSpaceEnv glEnv worldCanvas function updateWebGL time worldSpaceEnv setXf getMVMatrix worldSpaceEnv setProj getProjMatrix objSpaceEnv drawFrame worldSpaceEnv drawFrame Reschedule the next frame window requestAnimationFrame updateWebGL window requestAnimationFrame updateWebGL var objCanvas objCanvas objCanvas click function event objCanvas mousemove function event console log ready script
er script src https cdn rawgit com google code prettify master loader run prettify js script script id vertexShader type x shader x vertex attribute vec3 position uniform mat4 projection uniform mat4 toWorld void main gl Position projection toWorld vec4 position 1 0 script script id fragmentShader type x shader x fragment precision highp float uniform vec3 color void main gl FragColor vec4 color 1 0 script script var cubeData 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 lineInd 0 1 0 2 0 4 1 3 1 5 2 3 2 6 4 5 4 6 6 7 5 7 3 7 triInd lineColor 0 8 0 8 0 8 fillColor 1 0 0 9 0 7 function initGUI left spinner min 2 max 2 step 0 1 right spinner min 2 max 2 step 0 1 top spinner min 2 max 2 step 0 1 bottom spinner min 2 max 2 step 0 1 near spinner min 0 1 max 2 step 0 1 far spinner min 2 1 max 5 step 0 1 transX spinner min 2 max 2 step 0 1 transY spinner min 2 max 2 step 0 1 transZ spinner min 4 max 4 step 0 1 rotX spinner min 360 max 360 step 5 rotY spinner min 360 max 360 step 5 rotZ spinner min 360 max 360 step 5 scaleX spinner min 2 max 2 step 0 1 scaleY spinner min 2 max 2 step 0 1 scaleZ spinner min 2 max 2 step 0 1 function displayMatrix4 sel M sel find tr each function i elt elt find td each function j elt elt html M i 4 j toFixed 3 var xAxis vec3 fromValues 1 0 0 var yAxis vec3 fromValues 0 1 0 var zAxis vec3 fromValues 0 0 1 function getProjMatrix var l left spinner value r right spinner value var b bottom spinner value t top spinner value var n near spinner value f far spinner value var P mat4 create mat4 frustum P l r b t n f displayMatrix4 projMatrix P return P function getMVMatrix var t vec3 fromValues transX spinner value transY spinner value transZ spinner value var T mat4 create mat4 fromTranslation T t displayMatrix4 transMatrix T var R mat4 create if orderXYZ get 0 checked mat4 rotate R R rotX spinner value Math PI 180 xAxis mat4 rotate R R rotY spinner value Math PI 180 yAxis mat4 rotate R R rotZ spinner value Math PI 180 zAxis else mat4 rotate R R rotZ spinner value Math PI 180 zAxis mat4 rotate R R rotY spinner value Math PI 180 yAxis mat4 rotate R R rotX spinner value Math PI 180 xAxis displayMatrix4 rotMatrix R var s vec3 fromValues scaleX spinner value scaleY spinner value scaleZ spinner value var S mat4 create mat4 fromScaling S s displayMatrix4 scaleMatrix S var M mat4 create if orderTRS get 0 checked mat4 mul M M T mat4 mul M M R mat4 mul M M S else mat4 mul M M S mat4 mul M M R mat4 mul M M T displayMatrix4 compMatrix M return M initGUI function initializeWebGL canvas Getting WebGL context the right way var gl null try gl canvas 0 getContext experimental webgl if gl gl canvas 0 getContext webgl catch error NO OP if gl alert Could not get WebGL context throw new Error Could not get WebGL context return gl function createShader gl shaderScriptId var shaderScript shaderScriptId var shaderSource shaderScript 0 text var shaderType null if shaderScript 0 type x shader x vertex shaderType gl VERTEX SHADER else if shaderScript 0 type x shader x fragment shaderType gl FRAGMENT SHADER else throw new Error Invalid shader type shaderScript 0 type var shader gl createShader shaderType gl shaderSource shader shaderSource gl compileShader shader if gl getShaderParameter shader gl COMPILE STATUS var infoLog gl getShaderInfoLog shader gl deleteShader shader throw new Error An error occurred compiling the shader infoLog else return shader function createGlslProgram gl vertexShaderId fragmentShaderId var program gl createProgram gl attachShader program createShader gl vertexShaderId gl attachShader program createShader gl fragmentShaderId gl linkProgram program gl validateProgram program if gl getProgramParameter program gl LINK STATUS var infoLog gl getProgramInfoLog program gl deleteProgram program throw new Error An error occurred linking the program infoLog else return program function createShape gl data var shape shape vertexBuffer gl createBuffer gl bindBuffer gl ARRAY BUFFER shape vertexBuffer gl bufferData gl ARRAY BUFFER new Float32Array data vertices gl STATIC DRAW gl bindBuffer gl ARRAY BUFFER null shape lineIndexBuffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER shape lineIndexBuffer gl bufferData gl ELEMENT ARRAY BUFFER new Uint16Array data lineInd gl STATIC DRAW gl bindBuffer gl ELEMENT ARRAY BUFFER null shape triIndexBuffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER shape triIndexBuffer gl bufferData gl ELEMENT ARRAY BUFFER new Uint16Array data triInd gl STATIC DRAW gl bindBuffer gl ELEMENT ARRAY BUFFER null shape lineLen data lineInd length shape triLen data triInd length shape lineColor data lineColor shape fillColor data fillColor return shape function drawShape gl shape program xf proj gl useProgram program gl bindBuffer gl ARRAY BUFFER shape vertexBuffer var positionLocation gl getAttribLocation program position gl enableVertexAttribArray positionLocation gl vertexAttribPointer positionLocation 3 gl FLOAT false 4 3 0 gl bindBuffer gl ARRAY BUFFER null gl uniformMatrix4fv gl getUniformLocation program toWorld false xf gl uniformMatrix4fv gl getUniformLocation program projection false proj gl uniform3fv gl getUniformLocation program color shape fillColor gl bindBuffer gl ELEMENT ARRAY BUFFER shape triIndexBuffer gl drawElements gl TRIANGLES shape triLen gl UNSIGNED SHORT 0 gl bindBuffer gl ELEMENT ARRAY BUFFER null gl uniform3fv gl getUniformLocation program color shape lineColor gl bindBuffer gl ELEMENT ARRAY BUFFER shape lineIndexBuffer gl drawElements gl LINES shape lineLen gl UNSIGNED SHORT 0 gl bindBuffer gl ELEMENT ARRAY BUFFER null gl useProgram null function glEnv canvas var gl initializeWebGL canvas var program createGlslProgram gl vertexShader fragmentShader var cat createShape gl cubeData var xf mat4 create function setXf newXf mat4 copy xf newXf var proj mat4 create function setProj newProj mat4 copy proj newProj function drawFrame gl clearColor 0 15 0 2 0 5 1 0 gl clear gl COLOR BUFFER BIT drawShape gl cat program xf proj return setXf setXf setProj setProj drawFrame drawFrame var objSpaceEnv glEnv objCanvas var worldSpaceEnv glEnv worldCanvas function updateWebGL time worldSpaceEnv setXf getMVMatrix worldSpaceEnv setProj getProjMatrix objSpaceEnv drawFrame worldSpaceEnv drawFrame Reschedule the next frame window requestAnimationFrame updateWebGL window requestAnimationFrame updateWebGL var objCanvas objCanvas objCanvas click function event objCanvas mousemove function event console log ready script