├── LICENSE
├── README.md
├── Week10
└── Demo0
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Week11
├── Demo0
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
└── Demo1
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Week2
├── Demo0
│ ├── demo.html
│ └── demo.js
├── Demo1
│ ├── demo.html
│ └── demo.js
├── Demo2
│ ├── demo.html
│ └── demo.js
└── Demo3
│ ├── demo.html
│ └── demo.js
├── Week3
├── Demo0
│ ├── demo.html
│ └── demo.js
├── Demo1
│ ├── demo.html
│ └── demo.js
└── Demo2
│ ├── demo.html
│ └── demo.js
├── Week4
├── Demo0
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Demo0a
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Demo0b
│ ├── demo.html
│ ├── demo.js
│ └── twgl-full.min.js
└── Demo1
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Week5
├── Demo0
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Demo1
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
└── Demo2
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Week6
├── Demo0
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
├── Demo1
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
└── Demo2
│ ├── demo.html
│ ├── demo.js
│ └── gl-matrix-min.js
└── Week7
├── Demo0
├── demo.html
├── demo.js
└── gl-matrix-min.js
├── Demo1
├── demo.html
├── demo.js
└── gl-matrix-min.js
├── Demo2
├── demo.html
├── demo.js
└── gl-matrix-min.js
├── Demo3
├── demo.html
├── demo.js
└── gl-matrix-min.js
└── Demo4
├── demo.html
├── demo.js
└── gl-matrix-min.js
/LICENSE:
--------------------------------------------------------------------------------
1 | BSD 2-Clause License
2 |
3 | Copyright (c) 2020-21, Eftychios Sifakis
4 | All rights reserved.
5 |
6 | Redistribution and use in source and binary forms, with or without
7 | modification, are permitted provided that the following conditions are met:
8 |
9 | 1. Redistributions of source code must retain the above copyright notice, this
10 | list of conditions and the following disclaimer.
11 |
12 | 2. Redistributions in binary form must reproduce the above copyright notice,
13 | this list of conditions and the following disclaimer in the documentation
14 | and/or other materials provided with the distribution.
15 |
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CS559F21_Demos
2 | Software artifacts and Demos for CS559 (Fall 2021) "Computer Graphics"
3 |
--------------------------------------------------------------------------------
/Week10/Demo0/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | WebGL cube drawn with indexed vertex list
5 |
6 |
7 |
8 |
19 |
20 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Week10/Demo0/demo.js:
--------------------------------------------------------------------------------
1 | function start() {
2 |
3 | // Get canvas, WebGL context
4 | var canvas = document.getElementById("mycanvas");
5 | var gl = canvas.getContext("webgl");
6 |
7 | // Sliders at center
8 | var slider1 = document.getElementById('slider1');
9 | slider1.value = 0;
10 | var slider2 = document.getElementById('slider2');
11 | slider2.value = 0;
12 |
13 | // Read shader source
14 | var vertexSource = document.getElementById("vertexShader").text;
15 | var fragmentSource = document.getElementById("fragmentShader").text;
16 |
17 | // Compile vertex shader
18 | var vertexShader = gl.createShader(gl.VERTEX_SHADER);
19 | gl.shaderSource(vertexShader,vertexSource);
20 | gl.compileShader(vertexShader);
21 | if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
22 | alert(gl.getShaderInfoLog(vertexShader)); return null; }
23 |
24 | // Compile fragment shader
25 | var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
26 | gl.shaderSource(fragmentShader,fragmentSource);
27 | gl.compileShader(fragmentShader);
28 | if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
29 | alert(gl.getShaderInfoLog(fragmentShader)); return null; }
30 |
31 | // Attach the shaders and link
32 | var shaderProgram = gl.createProgram();
33 | gl.attachShader(shaderProgram, vertexShader);
34 | gl.attachShader(shaderProgram, fragmentShader);
35 | gl.linkProgram(shaderProgram);
36 | if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
37 | alert("Could not initialize shaders"); }
38 | gl.useProgram(shaderProgram);
39 |
40 | // with the vertex shader, we need to pass it positions
41 | // as an attribute - so set up that communication
42 | shaderProgram.PositionAttribute = gl.getAttribLocation(shaderProgram, "vPosition");
43 | gl.enableVertexAttribArray(shaderProgram.PositionAttribute);
44 |
45 | shaderProgram.ColorAttribute = gl.getAttribLocation(shaderProgram, "vColor");
46 | gl.enableVertexAttribArray(shaderProgram.ColorAttribute);
47 |
48 | // this gives us access to the matrix uniform
49 | shaderProgram.MVPmatrix = gl.getUniformLocation(shaderProgram,"uMVP");
50 |
51 | // Data ...
52 |
53 | // vertex positions
54 | var vertexPos = new Float32Array(
55 | [ 1, 1, 1, -1, 1, 1, -1,-1, 1, 1,-1, 1,
56 | 1, 1, 1, 1,-1, 1, 1,-1,-1, 1, 1,-1,
57 | 1, 1, 1, 1, 1,-1, -1, 1,-1, -1, 1, 1,
58 | -1, 1, 1, -1, 1,-1, -1,-1,-1, -1,-1, 1,
59 | -1,-1,-1, 1,-1,-1, 1,-1, 1, -1,-1, 1,
60 | 1,-1,-1, -1,-1,-1, -1, 1,-1, 1, 1,-1 ]);
61 |
62 | // vertex colors
63 | var vertexColors = new Float32Array(
64 | [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
65 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
66 | 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
67 | 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0,
68 | 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1,
69 | 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1 ]);
70 |
71 | // element index array
72 | var triangleIndices = new Uint8Array(
73 | [ 0, 1, 2, 0, 2, 3, // front
74 | 4, 5, 6, 4, 6, 7, // right
75 | 8, 9,10, 8,10,11, // top
76 | 12,13,14, 12,14,15, // left
77 | 16,17,18, 16,18,19, // bottom
78 | 20,21,22, 20,22,23 ]); // back
79 |
80 | // we need to put the vertices into a buffer so we can
81 | // block transfer them to the graphics hardware
82 | var trianglePosBuffer = gl.createBuffer();
83 | gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
84 | gl.bufferData(gl.ARRAY_BUFFER, vertexPos, gl.STATIC_DRAW);
85 | trianglePosBuffer.itemSize = 3;
86 | trianglePosBuffer.numItems = 24;
87 |
88 | // a buffer for colors
89 | var colorBuffer = gl.createBuffer();
90 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
91 | gl.bufferData(gl.ARRAY_BUFFER, vertexColors, gl.STATIC_DRAW);
92 | colorBuffer.itemSize = 3;
93 | colorBuffer.numItems = 24;
94 |
95 | // a buffer for indices
96 | var indexBuffer = gl.createBuffer();
97 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
98 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleIndices, gl.STATIC_DRAW);
99 |
100 | // Scene (re-)draw routine
101 | function draw() {
102 |
103 | // Translate slider values to angles in the [-pi,pi] interval
104 | var angle1 = slider1.value*0.01*Math.PI;
105 | var angle2 = slider2.value*0.01*Math.PI;
106 |
107 | // Circle around the y-axis
108 | var eye = [400*Math.sin(angle1),150.0,400.0*Math.cos(angle1)];
109 | var target = [0,0,0];
110 | var up = [0,1,0];
111 |
112 | var tModel = mat4.create();
113 | mat4.fromScaling(tModel,[100,100,100]);
114 | mat4.rotate(tModel,tModel,angle2,[1,1,1]);
115 |
116 | var tCamera = mat4.create();
117 | mat4.lookAt(tCamera, eye, target, up);
118 |
119 | var tProjection = mat4.create();
120 | mat4.perspective(tProjection,Math.PI/4,1,10,1000);
121 |
122 | var tMVP = mat4.create();
123 | mat4.multiply(tMVP,tCamera,tModel); // "modelView" matrix
124 | mat4.multiply(tMVP,tProjection,tMVP);
125 |
126 | // Clear screen, prepare for rendering
127 | gl.clearColor(0.0, 0.0, 0.0, 1.0);
128 | gl.enable(gl.DEPTH_TEST);
129 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
130 |
131 | // Set up uniforms & attributes
132 | gl.uniformMatrix4fv(shaderProgram.MVPmatrix,false,tMVP);
133 |
134 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
135 | gl.vertexAttribPointer(shaderProgram.ColorAttribute, colorBuffer.itemSize,
136 | gl.FLOAT,false, 0, 0);
137 | gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
138 | gl.vertexAttribPointer(shaderProgram.PositionAttribute, trianglePosBuffer.itemSize,
139 | gl.FLOAT, false, 0, 0);
140 |
141 | // Do the drawing
142 | gl.drawElements(gl.TRIANGLES, triangleIndices.length, gl.UNSIGNED_BYTE, 0);
143 |
144 | }
145 |
146 | slider1.addEventListener("input",draw);
147 | slider2.addEventListener("input",draw);
148 | draw();
149 | }
150 |
151 | window.onload=start;
152 |
153 |
154 |
155 |
--------------------------------------------------------------------------------
/Week10/Demo0/gl-matrix-min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @fileoverview gl-matrix - High performance matrix and vector operations
3 | * @author Brandon Jones
4 | * @author Colin MacKenzie IV
5 | * @version 2.3.2
6 | */
7 |
8 | /* Copyright (c) 2015, Brandon Jones, Colin MacKenzie IV.
9 |
10 | Permission is hereby granted, free of charge, to any person obtaining a copy
11 | of this software and associated documentation files (the "Software"), to deal
12 | in the Software without restriction, including without limitation the rights
13 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
14 | copies of the Software, and to permit persons to whom the Software is
15 | furnished to do so, subject to the following conditions:
16 |
17 | The above copyright notice and this permission notice shall be included in
18 | all copies or substantial portions of the Software.
19 |
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26 | THE SOFTWARE. */
27 |
28 | !function(t,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var n=a();for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(this,function(){return function(t){function a(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,a),o.loaded=!0,o.exports}var n={};return a.m=t,a.c=n,a.p="",a(0)}([function(t,a,n){a.glMatrix=n(1),a.mat2=n(2),a.mat2d=n(3),a.mat3=n(4),a.mat4=n(5),a.quat=n(6),a.vec2=n(9),a.vec3=n(7),a.vec4=n(8)},function(t,a){var n={};n.EPSILON=1e-6,n.ARRAY_TYPE="undefined"!=typeof Float32Array?Float32Array:Array,n.RANDOM=Math.random,n.ENABLE_SIMD=!1,n.SIMD_AVAILABLE=n.ARRAY_TYPE===Float32Array&&"SIMD"in this,n.USE_SIMD=n.ENABLE_SIMD&&n.SIMD_AVAILABLE,n.setMatrixArrayType=function(t){n.ARRAY_TYPE=t};var r=Math.PI/180;n.toRadian=function(t){return t*r},n.equals=function(t,a){return Math.abs(t-a)<=n.EPSILON*Math.max(1,Math.abs(t),Math.abs(a))},t.exports=n},function(t,a,n){var r=n(1),o={};o.create=function(){var t=new r.ARRAY_TYPE(4);return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t},o.clone=function(t){var a=new r.ARRAY_TYPE(4);return a[0]=t[0],a[1]=t[1],a[2]=t[2],a[3]=t[3],a},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[3],t},o.identity=function(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t},o.fromValues=function(t,a,n,o){var u=new r.ARRAY_TYPE(4);return u[0]=t,u[1]=a,u[2]=n,u[3]=o,u},o.set=function(t,a,n,r,o){return t[0]=a,t[1]=n,t[2]=r,t[3]=o,t},o.transpose=function(t,a){if(t===a){var n=a[1];t[1]=a[2],t[2]=n}else t[0]=a[0],t[1]=a[2],t[2]=a[1],t[3]=a[3];return t},o.invert=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=n*u-o*r;return l?(l=1/l,t[0]=u*l,t[1]=-r*l,t[2]=-o*l,t[3]=n*l,t):null},o.adjoint=function(t,a){var n=a[0];return t[0]=a[3],t[1]=-a[1],t[2]=-a[2],t[3]=n,t},o.determinant=function(t){return t[0]*t[3]-t[2]*t[1]},o.multiply=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=n[0],M=n[1],s=n[2],i=n[3];return t[0]=r*e+u*M,t[1]=o*e+l*M,t[2]=r*s+u*i,t[3]=o*s+l*i,t},o.mul=o.multiply,o.rotate=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=Math.sin(n),M=Math.cos(n);return t[0]=r*M+u*e,t[1]=o*M+l*e,t[2]=r*-e+u*M,t[3]=o*-e+l*M,t},o.scale=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=n[0],M=n[1];return t[0]=r*e,t[1]=o*e,t[2]=u*M,t[3]=l*M,t},o.fromRotation=function(t,a){var n=Math.sin(a),r=Math.cos(a);return t[0]=r,t[1]=n,t[2]=-n,t[3]=r,t},o.fromScaling=function(t,a){return t[0]=a[0],t[1]=0,t[2]=0,t[3]=a[1],t},o.str=function(t){return"mat2("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"},o.frob=function(t){return Math.sqrt(Math.pow(t[0],2)+Math.pow(t[1],2)+Math.pow(t[2],2)+Math.pow(t[3],2))},o.LDU=function(t,a,n,r){return t[2]=r[2]/r[0],n[0]=r[0],n[1]=r[1],n[3]=r[3]-t[2]*n[1],[t,a,n]},o.add=function(t,a,n){return t[0]=a[0]+n[0],t[1]=a[1]+n[1],t[2]=a[2]+n[2],t[3]=a[3]+n[3],t},o.subtract=function(t,a,n){return t[0]=a[0]-n[0],t[1]=a[1]-n[1],t[2]=a[2]-n[2],t[3]=a[3]-n[3],t},o.sub=o.subtract,o.exactEquals=function(t,a){return t[0]===a[0]&&t[1]===a[1]&&t[2]===a[2]&&t[3]===a[3]},o.equals=function(t,a){var n=t[0],o=t[1],u=t[2],l=t[3],e=a[0],M=a[1],s=a[2],i=a[3];return Math.abs(n-e)<=r.EPSILON*Math.max(1,Math.abs(n),Math.abs(e))&&Math.abs(o-M)<=r.EPSILON*Math.max(1,Math.abs(o),Math.abs(M))&&Math.abs(u-s)<=r.EPSILON*Math.max(1,Math.abs(u),Math.abs(s))&&Math.abs(l-i)<=r.EPSILON*Math.max(1,Math.abs(l),Math.abs(i))},o.multiplyScalar=function(t,a,n){return t[0]=a[0]*n,t[1]=a[1]*n,t[2]=a[2]*n,t[3]=a[3]*n,t},o.multiplyScalarAndAdd=function(t,a,n,r){return t[0]=a[0]+n[0]*r,t[1]=a[1]+n[1]*r,t[2]=a[2]+n[2]*r,t[3]=a[3]+n[3]*r,t},t.exports=o},function(t,a,n){var r=n(1),o={};o.create=function(){var t=new r.ARRAY_TYPE(6);return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t[4]=0,t[5]=0,t},o.clone=function(t){var a=new r.ARRAY_TYPE(6);return a[0]=t[0],a[1]=t[1],a[2]=t[2],a[3]=t[3],a[4]=t[4],a[5]=t[5],a},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[3],t[4]=a[4],t[5]=a[5],t},o.identity=function(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t[4]=0,t[5]=0,t},o.fromValues=function(t,a,n,o,u,l){var e=new r.ARRAY_TYPE(6);return e[0]=t,e[1]=a,e[2]=n,e[3]=o,e[4]=u,e[5]=l,e},o.set=function(t,a,n,r,o,u,l){return t[0]=a,t[1]=n,t[2]=r,t[3]=o,t[4]=u,t[5]=l,t},o.invert=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=a[4],e=a[5],M=n*u-r*o;return M?(M=1/M,t[0]=u*M,t[1]=-r*M,t[2]=-o*M,t[3]=n*M,t[4]=(o*e-u*l)*M,t[5]=(r*l-n*e)*M,t):null},o.determinant=function(t){return t[0]*t[3]-t[1]*t[2]},o.multiply=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=n[0],i=n[1],c=n[2],h=n[3],S=n[4],I=n[5];return t[0]=r*s+u*i,t[1]=o*s+l*i,t[2]=r*c+u*h,t[3]=o*c+l*h,t[4]=r*S+u*I+e,t[5]=o*S+l*I+M,t},o.mul=o.multiply,o.rotate=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=Math.sin(n),i=Math.cos(n);return t[0]=r*i+u*s,t[1]=o*i+l*s,t[2]=r*-s+u*i,t[3]=o*-s+l*i,t[4]=e,t[5]=M,t},o.scale=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=n[0],i=n[1];return t[0]=r*s,t[1]=o*s,t[2]=u*i,t[3]=l*i,t[4]=e,t[5]=M,t},o.translate=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=n[0],i=n[1];return t[0]=r,t[1]=o,t[2]=u,t[3]=l,t[4]=r*s+u*i+e,t[5]=o*s+l*i+M,t},o.fromRotation=function(t,a){var n=Math.sin(a),r=Math.cos(a);return t[0]=r,t[1]=n,t[2]=-n,t[3]=r,t[4]=0,t[5]=0,t},o.fromScaling=function(t,a){return t[0]=a[0],t[1]=0,t[2]=0,t[3]=a[1],t[4]=0,t[5]=0,t},o.fromTranslation=function(t,a){return t[0]=1,t[1]=0,t[2]=0,t[3]=1,t[4]=a[0],t[5]=a[1],t},o.str=function(t){return"mat2d("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+", "+t[4]+", "+t[5]+")"},o.frob=function(t){return Math.sqrt(Math.pow(t[0],2)+Math.pow(t[1],2)+Math.pow(t[2],2)+Math.pow(t[3],2)+Math.pow(t[4],2)+Math.pow(t[5],2)+1)},o.add=function(t,a,n){return t[0]=a[0]+n[0],t[1]=a[1]+n[1],t[2]=a[2]+n[2],t[3]=a[3]+n[3],t[4]=a[4]+n[4],t[5]=a[5]+n[5],t},o.subtract=function(t,a,n){return t[0]=a[0]-n[0],t[1]=a[1]-n[1],t[2]=a[2]-n[2],t[3]=a[3]-n[3],t[4]=a[4]-n[4],t[5]=a[5]-n[5],t},o.sub=o.subtract,o.multiplyScalar=function(t,a,n){return t[0]=a[0]*n,t[1]=a[1]*n,t[2]=a[2]*n,t[3]=a[3]*n,t[4]=a[4]*n,t[5]=a[5]*n,t},o.multiplyScalarAndAdd=function(t,a,n,r){return t[0]=a[0]+n[0]*r,t[1]=a[1]+n[1]*r,t[2]=a[2]+n[2]*r,t[3]=a[3]+n[3]*r,t[4]=a[4]+n[4]*r,t[5]=a[5]+n[5]*r,t},o.exactEquals=function(t,a){return t[0]===a[0]&&t[1]===a[1]&&t[2]===a[2]&&t[3]===a[3]&&t[4]===a[4]&&t[5]===a[5]},o.equals=function(t,a){var n=t[0],o=t[1],u=t[2],l=t[3],e=t[4],M=t[5],s=a[0],i=a[1],c=a[2],h=a[3],S=a[4],I=a[5];return Math.abs(n-s)<=r.EPSILON*Math.max(1,Math.abs(n),Math.abs(s))&&Math.abs(o-i)<=r.EPSILON*Math.max(1,Math.abs(o),Math.abs(i))&&Math.abs(u-c)<=r.EPSILON*Math.max(1,Math.abs(u),Math.abs(c))&&Math.abs(l-h)<=r.EPSILON*Math.max(1,Math.abs(l),Math.abs(h))&&Math.abs(e-S)<=r.EPSILON*Math.max(1,Math.abs(e),Math.abs(S))&&Math.abs(M-I)<=r.EPSILON*Math.max(1,Math.abs(M),Math.abs(I))},t.exports=o},function(t,a,n){var r=n(1),o={};o.create=function(){var t=new r.ARRAY_TYPE(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},o.fromMat4=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[4],t[4]=a[5],t[5]=a[6],t[6]=a[8],t[7]=a[9],t[8]=a[10],t},o.clone=function(t){var a=new r.ARRAY_TYPE(9);return a[0]=t[0],a[1]=t[1],a[2]=t[2],a[3]=t[3],a[4]=t[4],a[5]=t[5],a[6]=t[6],a[7]=t[7],a[8]=t[8],a},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[3],t[4]=a[4],t[5]=a[5],t[6]=a[6],t[7]=a[7],t[8]=a[8],t},o.fromValues=function(t,a,n,o,u,l,e,M,s){var i=new r.ARRAY_TYPE(9);return i[0]=t,i[1]=a,i[2]=n,i[3]=o,i[4]=u,i[5]=l,i[6]=e,i[7]=M,i[8]=s,i},o.set=function(t,a,n,r,o,u,l,e,M,s){return t[0]=a,t[1]=n,t[2]=r,t[3]=o,t[4]=u,t[5]=l,t[6]=e,t[7]=M,t[8]=s,t},o.identity=function(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},o.transpose=function(t,a){if(t===a){var n=a[1],r=a[2],o=a[5];t[1]=a[3],t[2]=a[6],t[3]=n,t[5]=a[7],t[6]=r,t[7]=o}else t[0]=a[0],t[1]=a[3],t[2]=a[6],t[3]=a[1],t[4]=a[4],t[5]=a[7],t[6]=a[2],t[7]=a[5],t[8]=a[8];return t},o.invert=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=a[4],e=a[5],M=a[6],s=a[7],i=a[8],c=i*l-e*s,h=-i*u+e*M,S=s*u-l*M,I=n*c+r*h+o*S;return I?(I=1/I,t[0]=c*I,t[1]=(-i*r+o*s)*I,t[2]=(e*r-o*l)*I,t[3]=h*I,t[4]=(i*n-o*M)*I,t[5]=(-e*n+o*u)*I,t[6]=S*I,t[7]=(-s*n+r*M)*I,t[8]=(l*n-r*u)*I,t):null},o.adjoint=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=a[4],e=a[5],M=a[6],s=a[7],i=a[8];return t[0]=l*i-e*s,t[1]=o*s-r*i,t[2]=r*e-o*l,t[3]=e*M-u*i,t[4]=n*i-o*M,t[5]=o*u-n*e,t[6]=u*s-l*M,t[7]=r*M-n*s,t[8]=n*l-r*u,t},o.determinant=function(t){var a=t[0],n=t[1],r=t[2],o=t[3],u=t[4],l=t[5],e=t[6],M=t[7],s=t[8];return a*(s*u-l*M)+n*(-s*o+l*e)+r*(M*o-u*e)},o.multiply=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=a[6],i=a[7],c=a[8],h=n[0],S=n[1],I=n[2],f=n[3],x=n[4],D=n[5],F=n[6],m=n[7],d=n[8];return t[0]=h*r+S*l+I*s,t[1]=h*o+S*e+I*i,t[2]=h*u+S*M+I*c,t[3]=f*r+x*l+D*s,t[4]=f*o+x*e+D*i,t[5]=f*u+x*M+D*c,t[6]=F*r+m*l+d*s,t[7]=F*o+m*e+d*i,t[8]=F*u+m*M+d*c,t},o.mul=o.multiply,o.translate=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=a[6],i=a[7],c=a[8],h=n[0],S=n[1];return t[0]=r,t[1]=o,t[2]=u,t[3]=l,t[4]=e,t[5]=M,t[6]=h*r+S*l+s,t[7]=h*o+S*e+i,t[8]=h*u+S*M+c,t},o.rotate=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=a[6],i=a[7],c=a[8],h=Math.sin(n),S=Math.cos(n);return t[0]=S*r+h*l,t[1]=S*o+h*e,t[2]=S*u+h*M,t[3]=S*l-h*r,t[4]=S*e-h*o,t[5]=S*M-h*u,t[6]=s,t[7]=i,t[8]=c,t},o.scale=function(t,a,n){var r=n[0],o=n[1];return t[0]=r*a[0],t[1]=r*a[1],t[2]=r*a[2],t[3]=o*a[3],t[4]=o*a[4],t[5]=o*a[5],t[6]=a[6],t[7]=a[7],t[8]=a[8],t},o.fromTranslation=function(t,a){return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=a[0],t[7]=a[1],t[8]=1,t},o.fromRotation=function(t,a){var n=Math.sin(a),r=Math.cos(a);return t[0]=r,t[1]=n,t[2]=0,t[3]=-n,t[4]=r,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},o.fromScaling=function(t,a){return t[0]=a[0],t[1]=0,t[2]=0,t[3]=0,t[4]=a[1],t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},o.fromMat2d=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=0,t[3]=a[2],t[4]=a[3],t[5]=0,t[6]=a[4],t[7]=a[5],t[8]=1,t},o.fromQuat=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=n+n,e=r+r,M=o+o,s=n*l,i=r*l,c=r*e,h=o*l,S=o*e,I=o*M,f=u*l,x=u*e,D=u*M;return t[0]=1-c-I,t[3]=i-D,t[6]=h+x,t[1]=i+D,t[4]=1-s-I,t[7]=S-f,t[2]=h-x,t[5]=S+f,t[8]=1-s-c,t},o.normalFromMat4=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=a[4],e=a[5],M=a[6],s=a[7],i=a[8],c=a[9],h=a[10],S=a[11],I=a[12],f=a[13],x=a[14],D=a[15],F=n*e-r*l,m=n*M-o*l,d=n*s-u*l,b=r*M-o*e,v=r*s-u*e,z=o*s-u*M,p=i*f-c*I,w=i*x-h*I,E=i*D-S*I,A=c*x-h*f,P=c*D-S*f,L=h*D-S*x,q=F*L-m*P+d*A+b*E-v*w+z*p;return q?(q=1/q,t[0]=(e*L-M*P+s*A)*q,t[1]=(M*E-l*L-s*w)*q,t[2]=(l*P-e*E+s*p)*q,t[3]=(o*P-r*L-u*A)*q,t[4]=(n*L-o*E+u*w)*q,t[5]=(r*E-n*P-u*p)*q,t[6]=(f*z-x*v+D*b)*q,t[7]=(x*d-I*z-D*m)*q,t[8]=(I*v-f*d+D*F)*q,t):null},o.str=function(t){return"mat3("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+", "+t[4]+", "+t[5]+", "+t[6]+", "+t[7]+", "+t[8]+")"},o.frob=function(t){return Math.sqrt(Math.pow(t[0],2)+Math.pow(t[1],2)+Math.pow(t[2],2)+Math.pow(t[3],2)+Math.pow(t[4],2)+Math.pow(t[5],2)+Math.pow(t[6],2)+Math.pow(t[7],2)+Math.pow(t[8],2))},o.add=function(t,a,n){return t[0]=a[0]+n[0],t[1]=a[1]+n[1],t[2]=a[2]+n[2],t[3]=a[3]+n[3],t[4]=a[4]+n[4],t[5]=a[5]+n[5],t[6]=a[6]+n[6],t[7]=a[7]+n[7],t[8]=a[8]+n[8],t},o.subtract=function(t,a,n){return t[0]=a[0]-n[0],t[1]=a[1]-n[1],t[2]=a[2]-n[2],t[3]=a[3]-n[3],t[4]=a[4]-n[4],t[5]=a[5]-n[5],t[6]=a[6]-n[6],t[7]=a[7]-n[7],t[8]=a[8]-n[8],t},o.sub=o.subtract,o.multiplyScalar=function(t,a,n){return t[0]=a[0]*n,t[1]=a[1]*n,t[2]=a[2]*n,t[3]=a[3]*n,t[4]=a[4]*n,t[5]=a[5]*n,t[6]=a[6]*n,t[7]=a[7]*n,t[8]=a[8]*n,t},o.multiplyScalarAndAdd=function(t,a,n,r){return t[0]=a[0]+n[0]*r,t[1]=a[1]+n[1]*r,t[2]=a[2]+n[2]*r,t[3]=a[3]+n[3]*r,t[4]=a[4]+n[4]*r,t[5]=a[5]+n[5]*r,t[6]=a[6]+n[6]*r,t[7]=a[7]+n[7]*r,t[8]=a[8]+n[8]*r,t},o.exactEquals=function(t,a){return t[0]===a[0]&&t[1]===a[1]&&t[2]===a[2]&&t[3]===a[3]&&t[4]===a[4]&&t[5]===a[5]&&t[6]===a[6]&&t[7]===a[7]&&t[8]===a[8]},o.equals=function(t,a){var n=t[0],o=t[1],u=t[2],l=t[3],e=t[4],M=t[5],s=t[6],i=t[7],c=t[8],h=a[0],S=a[1],I=a[2],f=a[3],x=a[4],D=a[5],F=t[6],m=a[7],d=a[8];return Math.abs(n-h)<=r.EPSILON*Math.max(1,Math.abs(n),Math.abs(h))&&Math.abs(o-S)<=r.EPSILON*Math.max(1,Math.abs(o),Math.abs(S))&&Math.abs(u-I)<=r.EPSILON*Math.max(1,Math.abs(u),Math.abs(I))&&Math.abs(l-f)<=r.EPSILON*Math.max(1,Math.abs(l),Math.abs(f))&&Math.abs(e-x)<=r.EPSILON*Math.max(1,Math.abs(e),Math.abs(x))&&Math.abs(M-D)<=r.EPSILON*Math.max(1,Math.abs(M),Math.abs(D))&&Math.abs(s-F)<=r.EPSILON*Math.max(1,Math.abs(s),Math.abs(F))&&Math.abs(i-m)<=r.EPSILON*Math.max(1,Math.abs(i),Math.abs(m))&&Math.abs(c-d)<=r.EPSILON*Math.max(1,Math.abs(c),Math.abs(d))},t.exports=o},function(t,a,n){var r=n(1),o={scalar:{},SIMD:{}};o.create=function(){var t=new r.ARRAY_TYPE(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},o.clone=function(t){var a=new r.ARRAY_TYPE(16);return a[0]=t[0],a[1]=t[1],a[2]=t[2],a[3]=t[3],a[4]=t[4],a[5]=t[5],a[6]=t[6],a[7]=t[7],a[8]=t[8],a[9]=t[9],a[10]=t[10],a[11]=t[11],a[12]=t[12],a[13]=t[13],a[14]=t[14],a[15]=t[15],a},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[3],t[4]=a[4],t[5]=a[5],t[6]=a[6],t[7]=a[7],t[8]=a[8],t[9]=a[9],t[10]=a[10],t[11]=a[11],t[12]=a[12],t[13]=a[13],t[14]=a[14],t[15]=a[15],t},o.fromValues=function(t,a,n,o,u,l,e,M,s,i,c,h,S,I,f,x){var D=new r.ARRAY_TYPE(16);return D[0]=t,D[1]=a,D[2]=n,D[3]=o,D[4]=u,D[5]=l,D[6]=e,D[7]=M,D[8]=s,D[9]=i,D[10]=c,D[11]=h,D[12]=S,D[13]=I,D[14]=f,D[15]=x,D},o.set=function(t,a,n,r,o,u,l,e,M,s,i,c,h,S,I,f,x){return t[0]=a,t[1]=n,t[2]=r,t[3]=o,t[4]=u,t[5]=l,t[6]=e,t[7]=M,t[8]=s,t[9]=i,t[10]=c,t[11]=h,t[12]=S,t[13]=I,t[14]=f,t[15]=x,t},o.identity=function(t){return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},o.scalar.transpose=function(t,a){if(t===a){var n=a[1],r=a[2],o=a[3],u=a[6],l=a[7],e=a[11];t[1]=a[4],t[2]=a[8],t[3]=a[12],t[4]=n,t[6]=a[9],t[7]=a[13],t[8]=r,t[9]=u,t[11]=a[14],t[12]=o,t[13]=l,t[14]=e}else t[0]=a[0],t[1]=a[4],t[2]=a[8],t[3]=a[12],t[4]=a[1],t[5]=a[5],t[6]=a[9],t[7]=a[13],t[8]=a[2],t[9]=a[6],t[10]=a[10],t[11]=a[14],t[12]=a[3],t[13]=a[7],t[14]=a[11],t[15]=a[15];return t},o.SIMD.transpose=function(t,a){var n,r,o,u,l,e,M,s,i,c;return n=SIMD.Float32x4.load(a,0),r=SIMD.Float32x4.load(a,4),o=SIMD.Float32x4.load(a,8),u=SIMD.Float32x4.load(a,12),l=SIMD.Float32x4.shuffle(n,r,0,1,4,5),e=SIMD.Float32x4.shuffle(o,u,0,1,4,5),M=SIMD.Float32x4.shuffle(l,e,0,2,4,6),s=SIMD.Float32x4.shuffle(l,e,1,3,5,7),SIMD.Float32x4.store(t,0,M),SIMD.Float32x4.store(t,4,s),l=SIMD.Float32x4.shuffle(n,r,2,3,6,7),e=SIMD.Float32x4.shuffle(o,u,2,3,6,7),i=SIMD.Float32x4.shuffle(l,e,0,2,4,6),c=SIMD.Float32x4.shuffle(l,e,1,3,5,7),SIMD.Float32x4.store(t,8,i),SIMD.Float32x4.store(t,12,c),t},o.transpose=r.USE_SIMD?o.SIMD.transpose:o.scalar.transpose,o.scalar.invert=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=a[4],e=a[5],M=a[6],s=a[7],i=a[8],c=a[9],h=a[10],S=a[11],I=a[12],f=a[13],x=a[14],D=a[15],F=n*e-r*l,m=n*M-o*l,d=n*s-u*l,b=r*M-o*e,v=r*s-u*e,z=o*s-u*M,p=i*f-c*I,w=i*x-h*I,E=i*D-S*I,A=c*x-h*f,P=c*D-S*f,L=h*D-S*x,q=F*L-m*P+d*A+b*E-v*w+z*p;return q?(q=1/q,t[0]=(e*L-M*P+s*A)*q,t[1]=(o*P-r*L-u*A)*q,t[2]=(f*z-x*v+D*b)*q,t[3]=(h*v-c*z-S*b)*q,t[4]=(M*E-l*L-s*w)*q,t[5]=(n*L-o*E+u*w)*q,t[6]=(x*d-I*z-D*m)*q,t[7]=(i*z-h*d+S*m)*q,t[8]=(l*P-e*E+s*p)*q,t[9]=(r*E-n*P-u*p)*q,t[10]=(I*v-f*d+D*F)*q,t[11]=(c*d-i*v-S*F)*q,t[12]=(e*w-l*A-M*p)*q,t[13]=(n*A-r*w+o*p)*q,t[14]=(f*m-I*b-x*F)*q,t[15]=(i*b-c*m+h*F)*q,t):null},o.SIMD.invert=function(t,a){var n,r,o,u,l,e,M,s,i,c,h=SIMD.Float32x4.load(a,0),S=SIMD.Float32x4.load(a,4),I=SIMD.Float32x4.load(a,8),f=SIMD.Float32x4.load(a,12);return l=SIMD.Float32x4.shuffle(h,S,0,1,4,5),r=SIMD.Float32x4.shuffle(I,f,0,1,4,5),n=SIMD.Float32x4.shuffle(l,r,0,2,4,6),r=SIMD.Float32x4.shuffle(r,l,1,3,5,7),l=SIMD.Float32x4.shuffle(h,S,2,3,6,7),u=SIMD.Float32x4.shuffle(I,f,2,3,6,7),o=SIMD.Float32x4.shuffle(l,u,0,2,4,6),u=SIMD.Float32x4.shuffle(u,l,1,3,5,7),l=SIMD.Float32x4.mul(o,u),l=SIMD.Float32x4.swizzle(l,1,0,3,2),e=SIMD.Float32x4.mul(r,l),M=SIMD.Float32x4.mul(n,l),l=SIMD.Float32x4.swizzle(l,2,3,0,1),e=SIMD.Float32x4.sub(SIMD.Float32x4.mul(r,l),e),M=SIMD.Float32x4.sub(SIMD.Float32x4.mul(n,l),M),M=SIMD.Float32x4.swizzle(M,2,3,0,1),l=SIMD.Float32x4.mul(r,o),l=SIMD.Float32x4.swizzle(l,1,0,3,2),e=SIMD.Float32x4.add(SIMD.Float32x4.mul(u,l),e),i=SIMD.Float32x4.mul(n,l),l=SIMD.Float32x4.swizzle(l,2,3,0,1),e=SIMD.Float32x4.sub(e,SIMD.Float32x4.mul(u,l)),i=SIMD.Float32x4.sub(SIMD.Float32x4.mul(n,l),i),i=SIMD.Float32x4.swizzle(i,2,3,0,1),l=SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(r,2,3,0,1),u),l=SIMD.Float32x4.swizzle(l,1,0,3,2),o=SIMD.Float32x4.swizzle(o,2,3,0,1),e=SIMD.Float32x4.add(SIMD.Float32x4.mul(o,l),e),s=SIMD.Float32x4.mul(n,l),l=SIMD.Float32x4.swizzle(l,2,3,0,1),e=SIMD.Float32x4.sub(e,SIMD.Float32x4.mul(o,l)),s=SIMD.Float32x4.sub(SIMD.Float32x4.mul(n,l),s),s=SIMD.Float32x4.swizzle(s,2,3,0,1),l=SIMD.Float32x4.mul(n,r),l=SIMD.Float32x4.swizzle(l,1,0,3,2),s=SIMD.Float32x4.add(SIMD.Float32x4.mul(u,l),s),i=SIMD.Float32x4.sub(SIMD.Float32x4.mul(o,l),i),l=SIMD.Float32x4.swizzle(l,2,3,0,1),s=SIMD.Float32x4.sub(SIMD.Float32x4.mul(u,l),s),i=SIMD.Float32x4.sub(i,SIMD.Float32x4.mul(o,l)),l=SIMD.Float32x4.mul(n,u),l=SIMD.Float32x4.swizzle(l,1,0,3,2),M=SIMD.Float32x4.sub(M,SIMD.Float32x4.mul(o,l)),s=SIMD.Float32x4.add(SIMD.Float32x4.mul(r,l),s),l=SIMD.Float32x4.swizzle(l,2,3,0,1),M=SIMD.Float32x4.add(SIMD.Float32x4.mul(o,l),M),s=SIMD.Float32x4.sub(s,SIMD.Float32x4.mul(r,l)),l=SIMD.Float32x4.mul(n,o),l=SIMD.Float32x4.swizzle(l,1,0,3,2),M=SIMD.Float32x4.add(SIMD.Float32x4.mul(u,l),M),i=SIMD.Float32x4.sub(i,SIMD.Float32x4.mul(r,l)),l=SIMD.Float32x4.swizzle(l,2,3,0,1),M=SIMD.Float32x4.sub(M,SIMD.Float32x4.mul(u,l)),i=SIMD.Float32x4.add(SIMD.Float32x4.mul(r,l),i),c=SIMD.Float32x4.mul(n,e),c=SIMD.Float32x4.add(SIMD.Float32x4.swizzle(c,2,3,0,1),c),c=SIMD.Float32x4.add(SIMD.Float32x4.swizzle(c,1,0,3,2),c),l=SIMD.Float32x4.reciprocalApproximation(c),c=SIMD.Float32x4.sub(SIMD.Float32x4.add(l,l),SIMD.Float32x4.mul(c,SIMD.Float32x4.mul(l,l))),(c=SIMD.Float32x4.swizzle(c,0,0,0,0))?(SIMD.Float32x4.store(t,0,SIMD.Float32x4.mul(c,e)),SIMD.Float32x4.store(t,4,SIMD.Float32x4.mul(c,M)),SIMD.Float32x4.store(t,8,SIMD.Float32x4.mul(c,s)),SIMD.Float32x4.store(t,12,SIMD.Float32x4.mul(c,i)),t):null},o.invert=r.USE_SIMD?o.SIMD.invert:o.scalar.invert,o.scalar.adjoint=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=a[4],e=a[5],M=a[6],s=a[7],i=a[8],c=a[9],h=a[10],S=a[11],I=a[12],f=a[13],x=a[14],D=a[15];return t[0]=e*(h*D-S*x)-c*(M*D-s*x)+f*(M*S-s*h),t[1]=-(r*(h*D-S*x)-c*(o*D-u*x)+f*(o*S-u*h)),t[2]=r*(M*D-s*x)-e*(o*D-u*x)+f*(o*s-u*M),t[3]=-(r*(M*S-s*h)-e*(o*S-u*h)+c*(o*s-u*M)),t[4]=-(l*(h*D-S*x)-i*(M*D-s*x)+I*(M*S-s*h)),t[5]=n*(h*D-S*x)-i*(o*D-u*x)+I*(o*S-u*h),t[6]=-(n*(M*D-s*x)-l*(o*D-u*x)+I*(o*s-u*M)),t[7]=n*(M*S-s*h)-l*(o*S-u*h)+i*(o*s-u*M),t[8]=l*(c*D-S*f)-i*(e*D-s*f)+I*(e*S-s*c),t[9]=-(n*(c*D-S*f)-i*(r*D-u*f)+I*(r*S-u*c)),t[10]=n*(e*D-s*f)-l*(r*D-u*f)+I*(r*s-u*e),t[11]=-(n*(e*S-s*c)-l*(r*S-u*c)+i*(r*s-u*e)),t[12]=-(l*(c*x-h*f)-i*(e*x-M*f)+I*(e*h-M*c)),t[13]=n*(c*x-h*f)-i*(r*x-o*f)+I*(r*h-o*c),t[14]=-(n*(e*x-M*f)-l*(r*x-o*f)+I*(r*M-o*e)),t[15]=n*(e*h-M*c)-l*(r*h-o*c)+i*(r*M-o*e),t},o.SIMD.adjoint=function(t,a){var n,r,o,u,l,e,M,s,i,c,h,S,I,n=SIMD.Float32x4.load(a,0),r=SIMD.Float32x4.load(a,4),o=SIMD.Float32x4.load(a,8),u=SIMD.Float32x4.load(a,12);return i=SIMD.Float32x4.shuffle(n,r,0,1,4,5),e=SIMD.Float32x4.shuffle(o,u,0,1,4,5),l=SIMD.Float32x4.shuffle(i,e,0,2,4,6),e=SIMD.Float32x4.shuffle(e,i,1,3,5,7),i=SIMD.Float32x4.shuffle(n,r,2,3,6,7),s=SIMD.Float32x4.shuffle(o,u,2,3,6,7),M=SIMD.Float32x4.shuffle(i,s,0,2,4,6),s=SIMD.Float32x4.shuffle(s,i,1,3,5,7),i=SIMD.Float32x4.mul(M,s),i=SIMD.Float32x4.swizzle(i,1,0,3,2),c=SIMD.Float32x4.mul(e,i),h=SIMD.Float32x4.mul(l,i),i=SIMD.Float32x4.swizzle(i,2,3,0,1),c=SIMD.Float32x4.sub(SIMD.Float32x4.mul(e,i),c),h=SIMD.Float32x4.sub(SIMD.Float32x4.mul(l,i),h),h=SIMD.Float32x4.swizzle(h,2,3,0,1),i=SIMD.Float32x4.mul(e,M),i=SIMD.Float32x4.swizzle(i,1,0,3,2),c=SIMD.Float32x4.add(SIMD.Float32x4.mul(s,i),c),I=SIMD.Float32x4.mul(l,i),i=SIMD.Float32x4.swizzle(i,2,3,0,1),c=SIMD.Float32x4.sub(c,SIMD.Float32x4.mul(s,i)),I=SIMD.Float32x4.sub(SIMD.Float32x4.mul(l,i),I),I=SIMD.Float32x4.swizzle(I,2,3,0,1),i=SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(e,2,3,0,1),s),i=SIMD.Float32x4.swizzle(i,1,0,3,2),M=SIMD.Float32x4.swizzle(M,2,3,0,1),c=SIMD.Float32x4.add(SIMD.Float32x4.mul(M,i),c),S=SIMD.Float32x4.mul(l,i),i=SIMD.Float32x4.swizzle(i,2,3,0,1),c=SIMD.Float32x4.sub(c,SIMD.Float32x4.mul(M,i)),S=SIMD.Float32x4.sub(SIMD.Float32x4.mul(l,i),S),S=SIMD.Float32x4.swizzle(S,2,3,0,1),i=SIMD.Float32x4.mul(l,e),i=SIMD.Float32x4.swizzle(i,1,0,3,2),S=SIMD.Float32x4.add(SIMD.Float32x4.mul(s,i),S),I=SIMD.Float32x4.sub(SIMD.Float32x4.mul(M,i),I),i=SIMD.Float32x4.swizzle(i,2,3,0,1),S=SIMD.Float32x4.sub(SIMD.Float32x4.mul(s,i),S),I=SIMD.Float32x4.sub(I,SIMD.Float32x4.mul(M,i)),i=SIMD.Float32x4.mul(l,s),i=SIMD.Float32x4.swizzle(i,1,0,3,2),h=SIMD.Float32x4.sub(h,SIMD.Float32x4.mul(M,i)),S=SIMD.Float32x4.add(SIMD.Float32x4.mul(e,i),S),i=SIMD.Float32x4.swizzle(i,2,3,0,1),h=SIMD.Float32x4.add(SIMD.Float32x4.mul(M,i),h),S=SIMD.Float32x4.sub(S,SIMD.Float32x4.mul(e,i)),i=SIMD.Float32x4.mul(l,M),i=SIMD.Float32x4.swizzle(i,1,0,3,2),h=SIMD.Float32x4.add(SIMD.Float32x4.mul(s,i),h),I=SIMD.Float32x4.sub(I,SIMD.Float32x4.mul(e,i)),i=SIMD.Float32x4.swizzle(i,2,3,0,1),h=SIMD.Float32x4.sub(h,SIMD.Float32x4.mul(s,i)),I=SIMD.Float32x4.add(SIMD.Float32x4.mul(e,i),I),SIMD.Float32x4.store(t,0,c),SIMD.Float32x4.store(t,4,h),SIMD.Float32x4.store(t,8,S),SIMD.Float32x4.store(t,12,I),t},o.adjoint=r.USE_SIMD?o.SIMD.adjoint:o.scalar.adjoint,o.determinant=function(t){var a=t[0],n=t[1],r=t[2],o=t[3],u=t[4],l=t[5],e=t[6],M=t[7],s=t[8],i=t[9],c=t[10],h=t[11],S=t[12],I=t[13],f=t[14],x=t[15],D=a*l-n*u,F=a*e-r*u,m=a*M-o*u,d=n*e-r*l,b=n*M-o*l,v=r*M-o*e,z=s*I-i*S,p=s*f-c*S,w=s*x-h*S,E=i*f-c*I,A=i*x-h*I,P=c*x-h*f;return D*P-F*A+m*E+d*w-b*p+v*z},o.SIMD.multiply=function(t,a,n){var r=SIMD.Float32x4.load(a,0),o=SIMD.Float32x4.load(a,4),u=SIMD.Float32x4.load(a,8),l=SIMD.Float32x4.load(a,12),e=SIMD.Float32x4.load(n,0),M=SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(e,0,0,0,0),r),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(e,1,1,1,1),o),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(e,2,2,2,2),u),SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(e,3,3,3,3),l))));SIMD.Float32x4.store(t,0,M);var s=SIMD.Float32x4.load(n,4),i=SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(s,0,0,0,0),r),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(s,1,1,1,1),o),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(s,2,2,2,2),u),SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(s,3,3,3,3),l))));SIMD.Float32x4.store(t,4,i);var c=SIMD.Float32x4.load(n,8),h=SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(c,0,0,0,0),r),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(c,1,1,1,1),o),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(c,2,2,2,2),u),SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(c,3,3,3,3),l))));SIMD.Float32x4.store(t,8,h);var S=SIMD.Float32x4.load(n,12),I=SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(S,0,0,0,0),r),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(S,1,1,1,1),o),SIMD.Float32x4.add(SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(S,2,2,2,2),u),SIMD.Float32x4.mul(SIMD.Float32x4.swizzle(S,3,3,3,3),l))));return SIMD.Float32x4.store(t,12,I),t},o.scalar.multiply=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=a[6],i=a[7],c=a[8],h=a[9],S=a[10],I=a[11],f=a[12],x=a[13],D=a[14],F=a[15],m=n[0],d=n[1],b=n[2],v=n[3];return t[0]=m*r+d*e+b*c+v*f,t[1]=m*o+d*M+b*h+v*x,t[2]=m*u+d*s+b*S+v*D,t[3]=m*l+d*i+b*I+v*F,m=n[4],d=n[5],b=n[6],v=n[7],t[4]=m*r+d*e+b*c+v*f,t[5]=m*o+d*M+b*h+v*x,t[6]=m*u+d*s+b*S+v*D,t[7]=m*l+d*i+b*I+v*F,m=n[8],d=n[9],b=n[10],v=n[11],t[8]=m*r+d*e+b*c+v*f,t[9]=m*o+d*M+b*h+v*x,t[10]=m*u+d*s+b*S+v*D,t[11]=m*l+d*i+b*I+v*F,m=n[12],d=n[13],b=n[14],v=n[15],t[12]=m*r+d*e+b*c+v*f,t[13]=m*o+d*M+b*h+v*x,t[14]=m*u+d*s+b*S+v*D,t[15]=m*l+d*i+b*I+v*F,t},o.multiply=r.USE_SIMD?o.SIMD.multiply:o.scalar.multiply,o.mul=o.multiply,o.scalar.translate=function(t,a,n){var r,o,u,l,e,M,s,i,c,h,S,I,f=n[0],x=n[1],D=n[2];return a===t?(t[12]=a[0]*f+a[4]*x+a[8]*D+a[12],t[13]=a[1]*f+a[5]*x+a[9]*D+a[13],t[14]=a[2]*f+a[6]*x+a[10]*D+a[14],t[15]=a[3]*f+a[7]*x+a[11]*D+a[15]):(r=a[0],o=a[1],u=a[2],l=a[3],e=a[4],M=a[5],s=a[6],i=a[7],c=a[8],h=a[9],S=a[10],I=a[11],t[0]=r,t[1]=o,t[2]=u,t[3]=l,t[4]=e,t[5]=M,t[6]=s,t[7]=i,t[8]=c,t[9]=h,t[10]=S,t[11]=I,t[12]=r*f+e*x+c*D+a[12],t[13]=o*f+M*x+h*D+a[13],t[14]=u*f+s*x+S*D+a[14],t[15]=l*f+i*x+I*D+a[15]),t},o.SIMD.translate=function(t,a,n){var r=SIMD.Float32x4.load(a,0),o=SIMD.Float32x4.load(a,4),u=SIMD.Float32x4.load(a,8),l=SIMD.Float32x4.load(a,12),e=SIMD.Float32x4(n[0],n[1],n[2],0);a!==t&&(t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[3],t[4]=a[4],t[5]=a[5],t[6]=a[6],t[7]=a[7],t[8]=a[8],t[9]=a[9],t[10]=a[10],t[11]=a[11]),r=SIMD.Float32x4.mul(r,SIMD.Float32x4.swizzle(e,0,0,0,0)),o=SIMD.Float32x4.mul(o,SIMD.Float32x4.swizzle(e,1,1,1,1)),u=SIMD.Float32x4.mul(u,SIMD.Float32x4.swizzle(e,2,2,2,2));var M=SIMD.Float32x4.add(r,SIMD.Float32x4.add(o,SIMD.Float32x4.add(u,l)));return SIMD.Float32x4.store(t,12,M),t},o.translate=r.USE_SIMD?o.SIMD.translate:o.scalar.translate,o.scalar.scale=function(t,a,n){var r=n[0],o=n[1],u=n[2];return t[0]=a[0]*r,t[1]=a[1]*r,t[2]=a[2]*r,t[3]=a[3]*r,t[4]=a[4]*o,t[5]=a[5]*o,t[6]=a[6]*o,t[7]=a[7]*o,t[8]=a[8]*u,t[9]=a[9]*u,t[10]=a[10]*u,t[11]=a[11]*u,t[12]=a[12],t[13]=a[13],t[14]=a[14],t[15]=a[15],t},o.SIMD.scale=function(t,a,n){var r,o,u,l=SIMD.Float32x4(n[0],n[1],n[2],0);return r=SIMD.Float32x4.load(a,0),SIMD.Float32x4.store(t,0,SIMD.Float32x4.mul(r,SIMD.Float32x4.swizzle(l,0,0,0,0))),o=SIMD.Float32x4.load(a,4),SIMD.Float32x4.store(t,4,SIMD.Float32x4.mul(o,SIMD.Float32x4.swizzle(l,1,1,1,1))),u=SIMD.Float32x4.load(a,8),SIMD.Float32x4.store(t,8,SIMD.Float32x4.mul(u,SIMD.Float32x4.swizzle(l,2,2,2,2))),t[12]=a[12],t[13]=a[13],t[14]=a[14],t[15]=a[15],t},o.scale=r.USE_SIMD?o.SIMD.scale:o.scalar.scale,o.rotate=function(t,a,n,o){var u,l,e,M,s,i,c,h,S,I,f,x,D,F,m,d,b,v,z,p,w,E,A,P,L=o[0],q=o[1],R=o[2],N=Math.sqrt(L*L+q*q+R*R);return Math.abs(N)0?(r=2*Math.sqrt(n+1),t[3]=.25*r,t[0]=(a[6]-a[9])/r,t[1]=(a[8]-a[2])/r,t[2]=(a[1]-a[4])/r):a[0]>a[5]&a[0]>a[10]?(r=2*Math.sqrt(1+a[0]-a[5]-a[10]),t[3]=(a[6]-a[9])/r,t[0]=.25*r,t[1]=(a[1]+a[4])/r,t[2]=(a[8]+a[2])/r):a[5]>a[10]?(r=2*Math.sqrt(1+a[5]-a[0]-a[10]),t[3]=(a[8]-a[2])/r,t[0]=(a[1]+a[4])/r,t[1]=.25*r,t[2]=(a[6]+a[9])/r):(r=2*Math.sqrt(1+a[10]-a[0]-a[5]),t[3]=(a[1]-a[4])/r,t[0]=(a[8]+a[2])/r,t[1]=(a[6]+a[9])/r,t[2]=.25*r),t},o.fromRotationTranslationScale=function(t,a,n,r){var o=a[0],u=a[1],l=a[2],e=a[3],M=o+o,s=u+u,i=l+l,c=o*M,h=o*s,S=o*i,I=u*s,f=u*i,x=l*i,D=e*M,F=e*s,m=e*i,d=r[0],b=r[1],v=r[2];return t[0]=(1-(I+x))*d,t[1]=(h+m)*d,t[2]=(S-F)*d,t[3]=0,t[4]=(h-m)*b,t[5]=(1-(c+x))*b,t[6]=(f+D)*b,t[7]=0,t[8]=(S+F)*v,t[9]=(f-D)*v,t[10]=(1-(c+I))*v,t[11]=0,t[12]=n[0],t[13]=n[1],t[14]=n[2],t[15]=1,t},o.fromRotationTranslationScaleOrigin=function(t,a,n,r,o){
29 | var u=a[0],l=a[1],e=a[2],M=a[3],s=u+u,i=l+l,c=e+e,h=u*s,S=u*i,I=u*c,f=l*i,x=l*c,D=e*c,F=M*s,m=M*i,d=M*c,b=r[0],v=r[1],z=r[2],p=o[0],w=o[1],E=o[2];return t[0]=(1-(f+D))*b,t[1]=(S+d)*b,t[2]=(I-m)*b,t[3]=0,t[4]=(S-d)*v,t[5]=(1-(h+D))*v,t[6]=(x+F)*v,t[7]=0,t[8]=(I+m)*z,t[9]=(x-F)*z,t[10]=(1-(h+f))*z,t[11]=0,t[12]=n[0]+p-(t[0]*p+t[4]*w+t[8]*E),t[13]=n[1]+w-(t[1]*p+t[5]*w+t[9]*E),t[14]=n[2]+E-(t[2]*p+t[6]*w+t[10]*E),t[15]=1,t},o.fromQuat=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=n+n,e=r+r,M=o+o,s=n*l,i=r*l,c=r*e,h=o*l,S=o*e,I=o*M,f=u*l,x=u*e,D=u*M;return t[0]=1-c-I,t[1]=i+D,t[2]=h-x,t[3]=0,t[4]=i-D,t[5]=1-s-I,t[6]=S+f,t[7]=0,t[8]=h+x,t[9]=S-f,t[10]=1-s-c,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},o.frustum=function(t,a,n,r,o,u,l){var e=1/(n-a),M=1/(o-r),s=1/(u-l);return t[0]=2*u*e,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=2*u*M,t[6]=0,t[7]=0,t[8]=(n+a)*e,t[9]=(o+r)*M,t[10]=(l+u)*s,t[11]=-1,t[12]=0,t[13]=0,t[14]=l*u*2*s,t[15]=0,t},o.perspective=function(t,a,n,r,o){var u=1/Math.tan(a/2),l=1/(r-o);return t[0]=u/n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=u,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=(o+r)*l,t[11]=-1,t[12]=0,t[13]=0,t[14]=2*o*r*l,t[15]=0,t},o.perspectiveFromFieldOfView=function(t,a,n,r){var o=Math.tan(a.upDegrees*Math.PI/180),u=Math.tan(a.downDegrees*Math.PI/180),l=Math.tan(a.leftDegrees*Math.PI/180),e=Math.tan(a.rightDegrees*Math.PI/180),M=2/(l+e),s=2/(o+u);return t[0]=M,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=s,t[6]=0,t[7]=0,t[8]=-((l-e)*M*.5),t[9]=(o-u)*s*.5,t[10]=r/(n-r),t[11]=-1,t[12]=0,t[13]=0,t[14]=r*n/(n-r),t[15]=0,t},o.ortho=function(t,a,n,r,o,u,l){var e=1/(a-n),M=1/(r-o),s=1/(u-l);return t[0]=-2*e,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=-2*M,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=2*s,t[11]=0,t[12]=(a+n)*e,t[13]=(o+r)*M,t[14]=(l+u)*s,t[15]=1,t},o.lookAt=function(t,a,n,u){var l,e,M,s,i,c,h,S,I,f,x=a[0],D=a[1],F=a[2],m=u[0],d=u[1],b=u[2],v=n[0],z=n[1],p=n[2];return Math.abs(x-v)M?(u.cross(t,a,o),u.length(t)<1e-6&&u.cross(t,n,o),u.normalize(t,t),e.setAxisAngle(r,t,Math.PI),r):M>.999999?(r[0]=0,r[1]=0,r[2]=0,r[3]=1,r):(u.cross(t,o,l),r[0]=t[0],r[1]=t[1],r[2]=t[2],r[3]=1+M,e.normalize(r,r))}}(),e.setAxes=function(){var t=o.create();return function(a,n,r,o){return t[0]=r[0],t[3]=r[1],t[6]=r[2],t[1]=o[0],t[4]=o[1],t[7]=o[2],t[2]=-n[0],t[5]=-n[1],t[8]=-n[2],e.normalize(a,e.fromMat3(a,t))}}(),e.clone=l.clone,e.fromValues=l.fromValues,e.copy=l.copy,e.set=l.set,e.identity=function(t){return t[0]=0,t[1]=0,t[2]=0,t[3]=1,t},e.setAxisAngle=function(t,a,n){n=.5*n;var r=Math.sin(n);return t[0]=r*a[0],t[1]=r*a[1],t[2]=r*a[2],t[3]=Math.cos(n),t},e.getAxisAngle=function(t,a){var n=2*Math.acos(a[3]),r=Math.sin(n/2);return 0!=r?(t[0]=a[0]/r,t[1]=a[1]/r,t[2]=a[2]/r):(t[0]=1,t[1]=0,t[2]=0),n},e.add=l.add,e.multiply=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3],e=n[0],M=n[1],s=n[2],i=n[3];return t[0]=r*i+l*e+o*s-u*M,t[1]=o*i+l*M+u*e-r*s,t[2]=u*i+l*s+r*M-o*e,t[3]=l*i-r*e-o*M-u*s,t},e.mul=e.multiply,e.scale=l.scale,e.rotateX=function(t,a,n){n*=.5;var r=a[0],o=a[1],u=a[2],l=a[3],e=Math.sin(n),M=Math.cos(n);return t[0]=r*M+l*e,t[1]=o*M+u*e,t[2]=u*M-o*e,t[3]=l*M-r*e,t},e.rotateY=function(t,a,n){n*=.5;var r=a[0],o=a[1],u=a[2],l=a[3],e=Math.sin(n),M=Math.cos(n);return t[0]=r*M-u*e,t[1]=o*M+l*e,t[2]=u*M+r*e,t[3]=l*M-o*e,t},e.rotateZ=function(t,a,n){n*=.5;var r=a[0],o=a[1],u=a[2],l=a[3],e=Math.sin(n),M=Math.cos(n);return t[0]=r*M+o*e,t[1]=o*M-r*e,t[2]=u*M+l*e,t[3]=l*M-u*e,t},e.calculateW=function(t,a){var n=a[0],r=a[1],o=a[2];return t[0]=n,t[1]=r,t[2]=o,t[3]=Math.sqrt(Math.abs(1-n*n-r*r-o*o)),t},e.dot=l.dot,e.lerp=l.lerp,e.slerp=function(t,a,n,r){var o,u,l,e,M,s=a[0],i=a[1],c=a[2],h=a[3],S=n[0],I=n[1],f=n[2],x=n[3];return u=s*S+i*I+c*f+h*x,0>u&&(u=-u,S=-S,I=-I,f=-f,x=-x),1-u>1e-6?(o=Math.acos(u),l=Math.sin(o),e=Math.sin((1-r)*o)/l,M=Math.sin(r*o)/l):(e=1-r,M=r),t[0]=e*s+M*S,t[1]=e*i+M*I,t[2]=e*c+M*f,t[3]=e*h+M*x,t},e.sqlerp=function(){var t=e.create(),a=e.create();return function(n,r,o,u,l,M){return e.slerp(t,r,l,M),e.slerp(a,o,u,M),e.slerp(n,t,a,2*M*(1-M)),n}}(),e.invert=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=n*n+r*r+o*o+u*u,e=l?1/l:0;return t[0]=-n*e,t[1]=-r*e,t[2]=-o*e,t[3]=u*e,t},e.conjugate=function(t,a){return t[0]=-a[0],t[1]=-a[1],t[2]=-a[2],t[3]=a[3],t},e.length=l.length,e.len=e.length,e.squaredLength=l.squaredLength,e.sqrLen=e.squaredLength,e.normalize=l.normalize,e.fromMat3=function(t,a){var n,r=a[0]+a[4]+a[8];if(r>0)n=Math.sqrt(r+1),t[3]=.5*n,n=.5/n,t[0]=(a[5]-a[7])*n,t[1]=(a[6]-a[2])*n,t[2]=(a[1]-a[3])*n;else{var o=0;a[4]>a[0]&&(o=1),a[8]>a[3*o+o]&&(o=2);var u=(o+1)%3,l=(o+2)%3;n=Math.sqrt(a[3*o+o]-a[3*u+u]-a[3*l+l]+1),t[o]=.5*n,n=.5/n,t[3]=(a[3*u+l]-a[3*l+u])*n,t[u]=(a[3*u+o]+a[3*o+u])*n,t[l]=(a[3*l+o]+a[3*o+l])*n}return t},e.str=function(t){return"quat("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"},e.exactEquals=l.exactEquals,e.equals=l.equals,t.exports=e},function(t,a,n){var r=n(1),o={};o.create=function(){var t=new r.ARRAY_TYPE(3);return t[0]=0,t[1]=0,t[2]=0,t},o.clone=function(t){var a=new r.ARRAY_TYPE(3);return a[0]=t[0],a[1]=t[1],a[2]=t[2],a},o.fromValues=function(t,a,n){var o=new r.ARRAY_TYPE(3);return o[0]=t,o[1]=a,o[2]=n,o},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t},o.set=function(t,a,n,r){return t[0]=a,t[1]=n,t[2]=r,t},o.add=function(t,a,n){return t[0]=a[0]+n[0],t[1]=a[1]+n[1],t[2]=a[2]+n[2],t},o.subtract=function(t,a,n){return t[0]=a[0]-n[0],t[1]=a[1]-n[1],t[2]=a[2]-n[2],t},o.sub=o.subtract,o.multiply=function(t,a,n){return t[0]=a[0]*n[0],t[1]=a[1]*n[1],t[2]=a[2]*n[2],t},o.mul=o.multiply,o.divide=function(t,a,n){return t[0]=a[0]/n[0],t[1]=a[1]/n[1],t[2]=a[2]/n[2],t},o.div=o.divide,o.ceil=function(t,a){return t[0]=Math.ceil(a[0]),t[1]=Math.ceil(a[1]),t[2]=Math.ceil(a[2]),t},o.floor=function(t,a){return t[0]=Math.floor(a[0]),t[1]=Math.floor(a[1]),t[2]=Math.floor(a[2]),t},o.min=function(t,a,n){return t[0]=Math.min(a[0],n[0]),t[1]=Math.min(a[1],n[1]),t[2]=Math.min(a[2],n[2]),t},o.max=function(t,a,n){return t[0]=Math.max(a[0],n[0]),t[1]=Math.max(a[1],n[1]),t[2]=Math.max(a[2],n[2]),t},o.round=function(t,a){return t[0]=Math.round(a[0]),t[1]=Math.round(a[1]),t[2]=Math.round(a[2]),t},o.scale=function(t,a,n){return t[0]=a[0]*n,t[1]=a[1]*n,t[2]=a[2]*n,t},o.scaleAndAdd=function(t,a,n,r){return t[0]=a[0]+n[0]*r,t[1]=a[1]+n[1]*r,t[2]=a[2]+n[2]*r,t},o.distance=function(t,a){var n=a[0]-t[0],r=a[1]-t[1],o=a[2]-t[2];return Math.sqrt(n*n+r*r+o*o)},o.dist=o.distance,o.squaredDistance=function(t,a){var n=a[0]-t[0],r=a[1]-t[1],o=a[2]-t[2];return n*n+r*r+o*o},o.sqrDist=o.squaredDistance,o.length=function(t){var a=t[0],n=t[1],r=t[2];return Math.sqrt(a*a+n*n+r*r)},o.len=o.length,o.squaredLength=function(t){var a=t[0],n=t[1],r=t[2];return a*a+n*n+r*r},o.sqrLen=o.squaredLength,o.negate=function(t,a){return t[0]=-a[0],t[1]=-a[1],t[2]=-a[2],t},o.inverse=function(t,a){return t[0]=1/a[0],t[1]=1/a[1],t[2]=1/a[2],t},o.normalize=function(t,a){var n=a[0],r=a[1],o=a[2],u=n*n+r*r+o*o;return u>0&&(u=1/Math.sqrt(u),t[0]=a[0]*u,t[1]=a[1]*u,t[2]=a[2]*u),t},o.dot=function(t,a){return t[0]*a[0]+t[1]*a[1]+t[2]*a[2]},o.cross=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=n[0],e=n[1],M=n[2];return t[0]=o*M-u*e,t[1]=u*l-r*M,t[2]=r*e-o*l,t},o.lerp=function(t,a,n,r){var o=a[0],u=a[1],l=a[2];return t[0]=o+r*(n[0]-o),t[1]=u+r*(n[1]-u),t[2]=l+r*(n[2]-l),t},o.hermite=function(t,a,n,r,o,u){var l=u*u,e=l*(2*u-3)+1,M=l*(u-2)+u,s=l*(u-1),i=l*(3-2*u);return t[0]=a[0]*e+n[0]*M+r[0]*s+o[0]*i,t[1]=a[1]*e+n[1]*M+r[1]*s+o[1]*i,t[2]=a[2]*e+n[2]*M+r[2]*s+o[2]*i,t},o.bezier=function(t,a,n,r,o,u){var l=1-u,e=l*l,M=u*u,s=e*l,i=3*u*e,c=3*M*l,h=M*u;return t[0]=a[0]*s+n[0]*i+r[0]*c+o[0]*h,t[1]=a[1]*s+n[1]*i+r[1]*c+o[1]*h,t[2]=a[2]*s+n[2]*i+r[2]*c+o[2]*h,t},o.random=function(t,a){a=a||1;var n=2*r.RANDOM()*Math.PI,o=2*r.RANDOM()-1,u=Math.sqrt(1-o*o)*a;return t[0]=Math.cos(n)*u,t[1]=Math.sin(n)*u,t[2]=o*a,t},o.transformMat4=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=n[3]*r+n[7]*o+n[11]*u+n[15];return l=l||1,t[0]=(n[0]*r+n[4]*o+n[8]*u+n[12])/l,t[1]=(n[1]*r+n[5]*o+n[9]*u+n[13])/l,t[2]=(n[2]*r+n[6]*o+n[10]*u+n[14])/l,t},o.transformMat3=function(t,a,n){var r=a[0],o=a[1],u=a[2];return t[0]=r*n[0]+o*n[3]+u*n[6],t[1]=r*n[1]+o*n[4]+u*n[7],t[2]=r*n[2]+o*n[5]+u*n[8],t},o.transformQuat=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=n[0],e=n[1],M=n[2],s=n[3],i=s*r+e*u-M*o,c=s*o+M*r-l*u,h=s*u+l*o-e*r,S=-l*r-e*o-M*u;return t[0]=i*s+S*-l+c*-M-h*-e,t[1]=c*s+S*-e+h*-l-i*-M,t[2]=h*s+S*-M+i*-e-c*-l,t},o.rotateX=function(t,a,n,r){var o=[],u=[];return o[0]=a[0]-n[0],o[1]=a[1]-n[1],o[2]=a[2]-n[2],u[0]=o[0],u[1]=o[1]*Math.cos(r)-o[2]*Math.sin(r),u[2]=o[1]*Math.sin(r)+o[2]*Math.cos(r),t[0]=u[0]+n[0],t[1]=u[1]+n[1],t[2]=u[2]+n[2],t},o.rotateY=function(t,a,n,r){var o=[],u=[];return o[0]=a[0]-n[0],o[1]=a[1]-n[1],o[2]=a[2]-n[2],u[0]=o[2]*Math.sin(r)+o[0]*Math.cos(r),u[1]=o[1],u[2]=o[2]*Math.cos(r)-o[0]*Math.sin(r),t[0]=u[0]+n[0],t[1]=u[1]+n[1],t[2]=u[2]+n[2],t},o.rotateZ=function(t,a,n,r){var o=[],u=[];return o[0]=a[0]-n[0],o[1]=a[1]-n[1],o[2]=a[2]-n[2],u[0]=o[0]*Math.cos(r)-o[1]*Math.sin(r),u[1]=o[0]*Math.sin(r)+o[1]*Math.cos(r),u[2]=o[2],t[0]=u[0]+n[0],t[1]=u[1]+n[1],t[2]=u[2]+n[2],t},o.forEach=function(){var t=o.create();return function(a,n,r,o,u,l){var e,M;for(n||(n=3),r||(r=0),M=o?Math.min(o*n+r,a.length):a.length,e=r;M>e;e+=n)t[0]=a[e],t[1]=a[e+1],t[2]=a[e+2],u(t,t,l),a[e]=t[0],a[e+1]=t[1],a[e+2]=t[2];return a}}(),o.angle=function(t,a){var n=o.fromValues(t[0],t[1],t[2]),r=o.fromValues(a[0],a[1],a[2]);o.normalize(n,n),o.normalize(r,r);var u=o.dot(n,r);return u>1?0:Math.acos(u)},o.str=function(t){return"vec3("+t[0]+", "+t[1]+", "+t[2]+")"},o.exactEquals=function(t,a){return t[0]===a[0]&&t[1]===a[1]&&t[2]===a[2]},o.equals=function(t,a){var n=t[0],o=t[1],u=t[2],l=a[0],e=a[1],M=a[2];return Math.abs(n-l)<=r.EPSILON*Math.max(1,Math.abs(n),Math.abs(l))&&Math.abs(o-e)<=r.EPSILON*Math.max(1,Math.abs(o),Math.abs(e))&&Math.abs(u-M)<=r.EPSILON*Math.max(1,Math.abs(u),Math.abs(M))},t.exports=o},function(t,a,n){var r=n(1),o={};o.create=function(){var t=new r.ARRAY_TYPE(4);return t[0]=0,t[1]=0,t[2]=0,t[3]=0,t},o.clone=function(t){var a=new r.ARRAY_TYPE(4);return a[0]=t[0],a[1]=t[1],a[2]=t[2],a[3]=t[3],a},o.fromValues=function(t,a,n,o){var u=new r.ARRAY_TYPE(4);return u[0]=t,u[1]=a,u[2]=n,u[3]=o,u},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t[2]=a[2],t[3]=a[3],t},o.set=function(t,a,n,r,o){return t[0]=a,t[1]=n,t[2]=r,t[3]=o,t},o.add=function(t,a,n){return t[0]=a[0]+n[0],t[1]=a[1]+n[1],t[2]=a[2]+n[2],t[3]=a[3]+n[3],t},o.subtract=function(t,a,n){return t[0]=a[0]-n[0],t[1]=a[1]-n[1],t[2]=a[2]-n[2],t[3]=a[3]-n[3],t},o.sub=o.subtract,o.multiply=function(t,a,n){return t[0]=a[0]*n[0],t[1]=a[1]*n[1],t[2]=a[2]*n[2],t[3]=a[3]*n[3],t},o.mul=o.multiply,o.divide=function(t,a,n){return t[0]=a[0]/n[0],t[1]=a[1]/n[1],t[2]=a[2]/n[2],t[3]=a[3]/n[3],t},o.div=o.divide,o.ceil=function(t,a){return t[0]=Math.ceil(a[0]),t[1]=Math.ceil(a[1]),t[2]=Math.ceil(a[2]),t[3]=Math.ceil(a[3]),t},o.floor=function(t,a){return t[0]=Math.floor(a[0]),t[1]=Math.floor(a[1]),t[2]=Math.floor(a[2]),t[3]=Math.floor(a[3]),t},o.min=function(t,a,n){return t[0]=Math.min(a[0],n[0]),t[1]=Math.min(a[1],n[1]),t[2]=Math.min(a[2],n[2]),t[3]=Math.min(a[3],n[3]),t},o.max=function(t,a,n){return t[0]=Math.max(a[0],n[0]),t[1]=Math.max(a[1],n[1]),t[2]=Math.max(a[2],n[2]),t[3]=Math.max(a[3],n[3]),t},o.round=function(t,a){return t[0]=Math.round(a[0]),t[1]=Math.round(a[1]),t[2]=Math.round(a[2]),t[3]=Math.round(a[3]),t},o.scale=function(t,a,n){return t[0]=a[0]*n,t[1]=a[1]*n,t[2]=a[2]*n,t[3]=a[3]*n,t},o.scaleAndAdd=function(t,a,n,r){return t[0]=a[0]+n[0]*r,t[1]=a[1]+n[1]*r,t[2]=a[2]+n[2]*r,t[3]=a[3]+n[3]*r,t},o.distance=function(t,a){var n=a[0]-t[0],r=a[1]-t[1],o=a[2]-t[2],u=a[3]-t[3];return Math.sqrt(n*n+r*r+o*o+u*u)},o.dist=o.distance,o.squaredDistance=function(t,a){var n=a[0]-t[0],r=a[1]-t[1],o=a[2]-t[2],u=a[3]-t[3];return n*n+r*r+o*o+u*u},o.sqrDist=o.squaredDistance,o.length=function(t){var a=t[0],n=t[1],r=t[2],o=t[3];return Math.sqrt(a*a+n*n+r*r+o*o)},o.len=o.length,o.squaredLength=function(t){var a=t[0],n=t[1],r=t[2],o=t[3];return a*a+n*n+r*r+o*o},o.sqrLen=o.squaredLength,o.negate=function(t,a){return t[0]=-a[0],t[1]=-a[1],t[2]=-a[2],t[3]=-a[3],t},o.inverse=function(t,a){return t[0]=1/a[0],t[1]=1/a[1],t[2]=1/a[2],t[3]=1/a[3],t},o.normalize=function(t,a){var n=a[0],r=a[1],o=a[2],u=a[3],l=n*n+r*r+o*o+u*u;return l>0&&(l=1/Math.sqrt(l),t[0]=n*l,t[1]=r*l,t[2]=o*l,t[3]=u*l),t},o.dot=function(t,a){return t[0]*a[0]+t[1]*a[1]+t[2]*a[2]+t[3]*a[3]},o.lerp=function(t,a,n,r){var o=a[0],u=a[1],l=a[2],e=a[3];return t[0]=o+r*(n[0]-o),t[1]=u+r*(n[1]-u),t[2]=l+r*(n[2]-l),t[3]=e+r*(n[3]-e),t},o.random=function(t,a){return a=a||1,t[0]=r.RANDOM(),t[1]=r.RANDOM(),t[2]=r.RANDOM(),t[3]=r.RANDOM(),o.normalize(t,t),o.scale(t,t,a),t},o.transformMat4=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=a[3];return t[0]=n[0]*r+n[4]*o+n[8]*u+n[12]*l,t[1]=n[1]*r+n[5]*o+n[9]*u+n[13]*l,t[2]=n[2]*r+n[6]*o+n[10]*u+n[14]*l,t[3]=n[3]*r+n[7]*o+n[11]*u+n[15]*l,t},o.transformQuat=function(t,a,n){var r=a[0],o=a[1],u=a[2],l=n[0],e=n[1],M=n[2],s=n[3],i=s*r+e*u-M*o,c=s*o+M*r-l*u,h=s*u+l*o-e*r,S=-l*r-e*o-M*u;return t[0]=i*s+S*-l+c*-M-h*-e,t[1]=c*s+S*-e+h*-l-i*-M,t[2]=h*s+S*-M+i*-e-c*-l,t[3]=a[3],t},o.forEach=function(){var t=o.create();return function(a,n,r,o,u,l){var e,M;for(n||(n=4),r||(r=0),M=o?Math.min(o*n+r,a.length):a.length,e=r;M>e;e+=n)t[0]=a[e],t[1]=a[e+1],t[2]=a[e+2],t[3]=a[e+3],u(t,t,l),a[e]=t[0],a[e+1]=t[1],a[e+2]=t[2],a[e+3]=t[3];return a}}(),o.str=function(t){return"vec4("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"},o.exactEquals=function(t,a){return t[0]===a[0]&&t[1]===a[1]&&t[2]===a[2]&&t[3]===a[3]},o.equals=function(t,a){var n=t[0],o=t[1],u=t[2],l=t[3],e=a[0],M=a[1],s=a[2],i=a[3];return Math.abs(n-e)<=r.EPSILON*Math.max(1,Math.abs(n),Math.abs(e))&&Math.abs(o-M)<=r.EPSILON*Math.max(1,Math.abs(o),Math.abs(M))&&Math.abs(u-s)<=r.EPSILON*Math.max(1,Math.abs(u),Math.abs(s))&&Math.abs(l-i)<=r.EPSILON*Math.max(1,Math.abs(l),Math.abs(i))},t.exports=o},function(t,a,n){var r=n(1),o={};o.create=function(){var t=new r.ARRAY_TYPE(2);return t[0]=0,t[1]=0,t},o.clone=function(t){var a=new r.ARRAY_TYPE(2);return a[0]=t[0],a[1]=t[1],a},o.fromValues=function(t,a){var n=new r.ARRAY_TYPE(2);return n[0]=t,n[1]=a,n},o.copy=function(t,a){return t[0]=a[0],t[1]=a[1],t},o.set=function(t,a,n){return t[0]=a,t[1]=n,t},o.add=function(t,a,n){return t[0]=a[0]+n[0],t[1]=a[1]+n[1],t},o.subtract=function(t,a,n){return t[0]=a[0]-n[0],t[1]=a[1]-n[1],t},o.sub=o.subtract,o.multiply=function(t,a,n){return t[0]=a[0]*n[0],t[1]=a[1]*n[1],t},o.mul=o.multiply,o.divide=function(t,a,n){return t[0]=a[0]/n[0],t[1]=a[1]/n[1],t},o.div=o.divide,o.ceil=function(t,a){return t[0]=Math.ceil(a[0]),t[1]=Math.ceil(a[1]),t},o.floor=function(t,a){return t[0]=Math.floor(a[0]),t[1]=Math.floor(a[1]),t},o.min=function(t,a,n){return t[0]=Math.min(a[0],n[0]),t[1]=Math.min(a[1],n[1]),t},o.max=function(t,a,n){return t[0]=Math.max(a[0],n[0]),t[1]=Math.max(a[1],n[1]),t},o.round=function(t,a){return t[0]=Math.round(a[0]),t[1]=Math.round(a[1]),t},o.scale=function(t,a,n){return t[0]=a[0]*n,t[1]=a[1]*n,t},o.scaleAndAdd=function(t,a,n,r){return t[0]=a[0]+n[0]*r,t[1]=a[1]+n[1]*r,t},o.distance=function(t,a){var n=a[0]-t[0],r=a[1]-t[1];return Math.sqrt(n*n+r*r)},o.dist=o.distance,o.squaredDistance=function(t,a){var n=a[0]-t[0],r=a[1]-t[1];return n*n+r*r},o.sqrDist=o.squaredDistance,o.length=function(t){var a=t[0],n=t[1];return Math.sqrt(a*a+n*n)},o.len=o.length,o.squaredLength=function(t){var a=t[0],n=t[1];return a*a+n*n},o.sqrLen=o.squaredLength,o.negate=function(t,a){return t[0]=-a[0],t[1]=-a[1],t},o.inverse=function(t,a){return t[0]=1/a[0],t[1]=1/a[1],t},o.normalize=function(t,a){var n=a[0],r=a[1],o=n*n+r*r;return o>0&&(o=1/Math.sqrt(o),t[0]=a[0]*o,t[1]=a[1]*o),t},o.dot=function(t,a){return t[0]*a[0]+t[1]*a[1]},o.cross=function(t,a,n){var r=a[0]*n[1]-a[1]*n[0];return t[0]=t[1]=0,t[2]=r,t},o.lerp=function(t,a,n,r){var o=a[0],u=a[1];return t[0]=o+r*(n[0]-o),t[1]=u+r*(n[1]-u),t},o.random=function(t,a){a=a||1;var n=2*r.RANDOM()*Math.PI;return t[0]=Math.cos(n)*a,t[1]=Math.sin(n)*a,t},o.transformMat2=function(t,a,n){var r=a[0],o=a[1];return t[0]=n[0]*r+n[2]*o,t[1]=n[1]*r+n[3]*o,t},o.transformMat2d=function(t,a,n){var r=a[0],o=a[1];return t[0]=n[0]*r+n[2]*o+n[4],t[1]=n[1]*r+n[3]*o+n[5],t},o.transformMat3=function(t,a,n){var r=a[0],o=a[1];return t[0]=n[0]*r+n[3]*o+n[6],t[1]=n[1]*r+n[4]*o+n[7],t},o.transformMat4=function(t,a,n){var r=a[0],o=a[1];return t[0]=n[0]*r+n[4]*o+n[12],t[1]=n[1]*r+n[5]*o+n[13],t},o.forEach=function(){var t=o.create();return function(a,n,r,o,u,l){var e,M;for(n||(n=2),r||(r=0),M=o?Math.min(o*n+r,a.length):a.length,e=r;M>e;e+=n)t[0]=a[e],t[1]=a[e+1],u(t,t,l),a[e]=t[0],a[e+1]=t[1];return a}}(),o.str=function(t){return"vec2("+t[0]+", "+t[1]+")"},o.exactEquals=function(t,a){return t[0]===a[0]&&t[1]===a[1]},o.equals=function(t,a){var n=t[0],o=t[1],u=a[0],l=a[1];return Math.abs(n-u)<=r.EPSILON*Math.max(1,Math.abs(n),Math.abs(u))&&Math.abs(o-l)<=r.EPSILON*Math.max(1,Math.abs(o),Math.abs(l))},t.exports=o}])});
--------------------------------------------------------------------------------
/Week11/Demo0/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | WebGL cube drawn with indexed vertex list
5 |
6 |
7 |
8 |
25 |
26 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/Week11/Demo0/demo.js:
--------------------------------------------------------------------------------
1 | function start() {
2 |
3 | // Get canvas, WebGL context, twgl.m4
4 | var canvas = document.getElementById("mycanvas");
5 | var gl = canvas.getContext("webgl");
6 |
7 | // Sliders at center
8 | var slider1 = document.getElementById('slider1');
9 | slider1.value = 0;
10 | var slider2 = document.getElementById('slider2');
11 | slider2.value = 0;
12 |
13 | // Read shader source
14 | var vertexSource = document.getElementById("vertexShader").text;
15 | var fragmentSource = document.getElementById("fragmentShader").text;
16 |
17 | // Compile vertex shader
18 | var vertexShader = gl.createShader(gl.VERTEX_SHADER);
19 | gl.shaderSource(vertexShader,vertexSource);
20 | gl.compileShader(vertexShader);
21 | if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
22 | alert(gl.getShaderInfoLog(vertexShader)); return null; }
23 |
24 | // Compile fragment shader
25 | var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
26 | gl.shaderSource(fragmentShader,fragmentSource);
27 | gl.compileShader(fragmentShader);
28 | if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
29 | alert(gl.getShaderInfoLog(fragmentShader)); return null; }
30 |
31 | // Attach the shaders and link
32 | var shaderProgram = gl.createProgram();
33 | gl.attachShader(shaderProgram, vertexShader);
34 | gl.attachShader(shaderProgram, fragmentShader);
35 | gl.linkProgram(shaderProgram);
36 | if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
37 | alert("Could not initialize shaders"); }
38 | gl.useProgram(shaderProgram);
39 |
40 | // with the vertex shader, we need to pass it positions
41 | // as an attribute - so set up that communication
42 | shaderProgram.PositionAttribute = gl.getAttribLocation(shaderProgram, "vPosition");
43 | gl.enableVertexAttribArray(shaderProgram.PositionAttribute);
44 |
45 | shaderProgram.NormalAttribute = gl.getAttribLocation(shaderProgram, "vNormal");
46 | gl.enableVertexAttribArray(shaderProgram.NormalAttribute);
47 |
48 | shaderProgram.ColorAttribute = gl.getAttribLocation(shaderProgram, "vColor");
49 | gl.enableVertexAttribArray(shaderProgram.ColorAttribute);
50 |
51 | shaderProgram.texcoordAttribute = gl.getAttribLocation(shaderProgram, "vTexCoord");
52 | gl.enableVertexAttribArray(shaderProgram.texcoordAttribute);
53 |
54 | // this gives us access to the matrix uniform
55 | shaderProgram.MVmatrix = gl.getUniformLocation(shaderProgram,"uMV");
56 | shaderProgram.MVNormalmatrix = gl.getUniformLocation(shaderProgram,"uMVn");
57 | shaderProgram.MVPmatrix = gl.getUniformLocation(shaderProgram,"uMVP");
58 |
59 | // Data ...
60 |
61 | // vertex positions
62 | var vertexPos = new Float32Array(
63 | [ 1, 1, 1, -1, 1, 1, -1,-1, 1, 1,-1, 1,
64 | 1, 1, 1, 1,-1, 1, 1,-1,-1, 1, 1,-1,
65 | 1, 1, 1, 1, 1,-1, -1, 1,-1, -1, 1, 1,
66 | -1, 1, 1, -1, 1,-1, -1,-1,-1, -1,-1, 1,
67 | -1,-1,-1, 1,-1,-1, 1,-1, 1, -1,-1, 1,
68 | 1,-1,-1, -1,-1,-1, -1, 1,-1, 1, 1,-1 ]);
69 |
70 | // vertex normals
71 | var vertexNormals = new Float32Array(
72 | [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
73 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
74 | 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
75 | -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
76 | 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0,
77 | 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1 ]);
78 |
79 | // vertex colors
80 | var vertexColors = new Float32Array(
81 | [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
82 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
83 | 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
84 | 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0,
85 | 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1,
86 | 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1 ]);
87 |
88 | // element index array
89 | var triangleIndices = new Uint8Array(
90 | [ 0, 1, 2, 0, 2, 3, // front
91 | 4, 5, 6, 4, 6, 7, // right
92 | 8, 9,10, 8,10,11, // top
93 | 12,13,14, 12,14,15, // left
94 | 16,17,18, 16,18,19, // bottom
95 | 20,21,22, 20,22,23 ]); // back
96 |
97 | // we need to put the vertices into a buffer so we can
98 | // block transfer them to the graphics hardware
99 | var trianglePosBuffer = gl.createBuffer();
100 | gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
101 | gl.bufferData(gl.ARRAY_BUFFER, vertexPos, gl.STATIC_DRAW);
102 | trianglePosBuffer.itemSize = 3;
103 | trianglePosBuffer.numItems = 24;
104 |
105 | // a buffer for normals
106 | var triangleNormalBuffer = gl.createBuffer();
107 | gl.bindBuffer(gl.ARRAY_BUFFER, triangleNormalBuffer);
108 | gl.bufferData(gl.ARRAY_BUFFER, vertexNormals, gl.STATIC_DRAW);
109 | triangleNormalBuffer.itemSize = 3;
110 | triangleNormalBuffer.numItems = 24;
111 |
112 | // a buffer for colors
113 | var colorBuffer = gl.createBuffer();
114 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
115 | gl.bufferData(gl.ARRAY_BUFFER, vertexColors, gl.STATIC_DRAW);
116 | colorBuffer.itemSize = 3;
117 | colorBuffer.numItems = 24;
118 |
119 | // a buffer for indices
120 | var indexBuffer = gl.createBuffer();
121 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
122 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleIndices, gl.STATIC_DRAW);
123 |
124 | // Scene (re-)draw routine
125 | function draw() {
126 |
127 | // Translate slider values to angles in the [-pi,pi] interval
128 | var angle1 = slider1.value*0.01*Math.PI;
129 | var angle2 = slider2.value*0.01*Math.PI;
130 |
131 | // Circle around the y-axis
132 | var eye = [400*Math.sin(angle1),150.0,400.0*Math.cos(angle1)];
133 | var target = [0,0,0];
134 | var up = [0,1,0];
135 |
136 | var tModel = mat4.create();
137 | mat4.fromScaling(tModel,[100,100,100]);
138 | mat4.rotate(tModel,tModel,angle2,[1,1,1]);
139 |
140 | var tCamera = mat4.create();
141 | mat4.lookAt(tCamera, eye, target, up);
142 |
143 | var tProjection = mat4.create();
144 | mat4.perspective(tProjection,Math.PI/4,1,10,1000);
145 |
146 | var tMV = mat4.create();
147 | var tMVn = mat3.create();
148 | var tMVP = mat4.create();
149 | mat4.multiply(tMV,tCamera,tModel); // "modelView" matrix
150 | mat3.normalFromMat4(tMVn,tMV);
151 | mat4.multiply(tMVP,tProjection,tMV);
152 |
153 | // Clear screen, prepare for rendering
154 | gl.clearColor(0.0, 0.0, 0.0, 1.0);
155 | gl.enable(gl.DEPTH_TEST);
156 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
157 |
158 | // Set up uniforms & attributes
159 | gl.uniformMatrix4fv(shaderProgram.MVmatrix,false,tMV);
160 | gl.uniformMatrix3fv(shaderProgram.MVNormalmatrix,false,tMVn);
161 | gl.uniformMatrix4fv(shaderProgram.MVPmatrix,false,tMVP);
162 |
163 | gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
164 | gl.vertexAttribPointer(shaderProgram.PositionAttribute, trianglePosBuffer.itemSize,
165 | gl.FLOAT, false, 0, 0);
166 | gl.bindBuffer(gl.ARRAY_BUFFER, triangleNormalBuffer);
167 | gl.vertexAttribPointer(shaderProgram.NormalAttribute, triangleNormalBuffer.itemSize,
168 | gl.FLOAT, false, 0, 0);
169 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
170 | gl.vertexAttribPointer(shaderProgram.ColorAttribute, colorBuffer.itemSize,
171 | gl.FLOAT,false, 0, 0);
172 |
173 | // Do the drawing
174 | gl.drawElements(gl.TRIANGLES, triangleIndices.length, gl.UNSIGNED_BYTE, 0);
175 |
176 | }
177 |
178 | slider1.addEventListener("input",draw);
179 | slider2.addEventListener("input",draw);
180 | draw();
181 | }
182 |
183 | window.onload=start;
184 |
--------------------------------------------------------------------------------
/Week11/Demo1/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | WebGL cube drawn with indexed vertex list
5 |
6 |
7 |
8 |
28 |
29 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/Week11/Demo1/demo.js:
--------------------------------------------------------------------------------
1 | function start() {
2 |
3 | // Get canvas, WebGL context, twgl.m4
4 | var canvas = document.getElementById("mycanvas");
5 | var gl = canvas.getContext("webgl");
6 |
7 | // Sliders at center
8 | var slider1 = document.getElementById('slider1');
9 | slider1.value = 0;
10 | var slider2 = document.getElementById('slider2');
11 | slider2.value = 0;
12 |
13 | // Read shader source
14 | var vertexSource = document.getElementById("vertexShader").text;
15 | var fragmentSource = document.getElementById("fragmentShader").text;
16 |
17 | // Compile vertex shader
18 | var vertexShader = gl.createShader(gl.VERTEX_SHADER);
19 | gl.shaderSource(vertexShader,vertexSource);
20 | gl.compileShader(vertexShader);
21 | if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
22 | alert(gl.getShaderInfoLog(vertexShader)); return null; }
23 |
24 | // Compile fragment shader
25 | var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
26 | gl.shaderSource(fragmentShader,fragmentSource);
27 | gl.compileShader(fragmentShader);
28 | if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
29 | alert(gl.getShaderInfoLog(fragmentShader)); return null; }
30 |
31 | // Attach the shaders and link
32 | var shaderProgram = gl.createProgram();
33 | gl.attachShader(shaderProgram, vertexShader);
34 | gl.attachShader(shaderProgram, fragmentShader);
35 | gl.linkProgram(shaderProgram);
36 | if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
37 | alert("Could not initialize shaders"); }
38 | gl.useProgram(shaderProgram);
39 |
40 | // with the vertex shader, we need to pass it positions
41 | // as an attribute - so set up that communication
42 | shaderProgram.PositionAttribute = gl.getAttribLocation(shaderProgram, "vPosition");
43 | gl.enableVertexAttribArray(shaderProgram.PositionAttribute);
44 |
45 | shaderProgram.NormalAttribute = gl.getAttribLocation(shaderProgram, "vNormal");
46 | gl.enableVertexAttribArray(shaderProgram.NormalAttribute);
47 |
48 | shaderProgram.ColorAttribute = gl.getAttribLocation(shaderProgram, "vColor");
49 | gl.enableVertexAttribArray(shaderProgram.ColorAttribute);
50 |
51 | shaderProgram.texcoordAttribute = gl.getAttribLocation(shaderProgram, "vTexCoord");
52 | gl.enableVertexAttribArray(shaderProgram.texcoordAttribute);
53 |
54 | // this gives us access to the matrix uniform
55 | shaderProgram.MVmatrix = gl.getUniformLocation(shaderProgram,"uMV");
56 | shaderProgram.MVNormalmatrix = gl.getUniformLocation(shaderProgram,"uMVn");
57 | shaderProgram.MVPmatrix = gl.getUniformLocation(shaderProgram,"uMVP");
58 |
59 | // Attach samplers to texture units
60 | shaderProgram.texSampler1 = gl.getUniformLocation(shaderProgram, "texSampler1");
61 | gl.uniform1i(shaderProgram.texSampler1, 0);
62 | shaderProgram.texSampler2 = gl.getUniformLocation(shaderProgram, "texSampler2");
63 | gl.uniform1i(shaderProgram.texSampler2, 1);
64 |
65 | // Data ...
66 |
67 | // vertex positions
68 | var vertexPos = new Float32Array(
69 | [ 1, 1, 1, -1, 1, 1, -1,-1, 1, 1,-1, 1,
70 | 1, 1, 1, 1,-1, 1, 1,-1,-1, 1, 1,-1,
71 | 1, 1, 1, 1, 1,-1, -1, 1,-1, -1, 1, 1,
72 | -1, 1, 1, -1, 1,-1, -1,-1,-1, -1,-1, 1,
73 | -1,-1,-1, 1,-1,-1, 1,-1, 1, -1,-1, 1,
74 | 1,-1,-1, -1,-1,-1, -1, 1,-1, 1, 1,-1 ]);
75 |
76 | // vertex normals
77 | var vertexNormals = new Float32Array(
78 | [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
79 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
80 | 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
81 | -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
82 | 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0,
83 | 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1 ]);
84 |
85 | // vertex colors
86 | var vertexColors = new Float32Array(
87 | [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
88 | 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
89 | 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
90 | 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0,
91 | 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1,
92 | 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1 ]);
93 |
94 | // vertex texture coordinates
95 | var vertexTextureCoords = new Float32Array(
96 | [ 0, 0, 1, 0, 1, 1, 0, 1,
97 | 1, 0, 1, 1, 0, 1, 0, 0,
98 | 0, 1, 0, 0, 1, 0, 1, 1,
99 | 0, 0, 1, 0, 1, 1, 0, 1,
100 | 1, 1, 0, 1, 0, 0, 1, 0,
101 | 1, 1, 0, 1, 0, 0, 1, 0 ]);
102 |
103 | // element index array
104 | var triangleIndices = new Uint8Array(
105 | [ 0, 1, 2, 0, 2, 3, // front
106 | 4, 5, 6, 4, 6, 7, // right
107 | 8, 9,10, 8,10,11, // top
108 | 12,13,14, 12,14,15, // left
109 | 16,17,18, 16,18,19, // bottom
110 | 20,21,22, 20,22,23 ]); // back
111 |
112 | // we need to put the vertices into a buffer so we can
113 | // block transfer them to the graphics hardware
114 | var trianglePosBuffer = gl.createBuffer();
115 | gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
116 | gl.bufferData(gl.ARRAY_BUFFER, vertexPos, gl.STATIC_DRAW);
117 | trianglePosBuffer.itemSize = 3;
118 | trianglePosBuffer.numItems = 24;
119 |
120 | // a buffer for normals
121 | var triangleNormalBuffer = gl.createBuffer();
122 | gl.bindBuffer(gl.ARRAY_BUFFER, triangleNormalBuffer);
123 | gl.bufferData(gl.ARRAY_BUFFER, vertexNormals, gl.STATIC_DRAW);
124 | triangleNormalBuffer.itemSize = 3;
125 | triangleNormalBuffer.numItems = 24;
126 |
127 | // a buffer for colors
128 | var colorBuffer = gl.createBuffer();
129 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
130 | gl.bufferData(gl.ARRAY_BUFFER, vertexColors, gl.STATIC_DRAW);
131 | colorBuffer.itemSize = 3;
132 | colorBuffer.numItems = 24;
133 |
134 | // a buffer for textures
135 | var textureBuffer = gl.createBuffer();
136 | gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
137 | gl.bufferData(gl.ARRAY_BUFFER, vertexTextureCoords, gl.STATIC_DRAW);
138 | textureBuffer.itemSize = 2;
139 | textureBuffer.numItems = 24;
140 |
141 | // a buffer for indices
142 | var indexBuffer = gl.createBuffer();
143 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
144 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleIndices, gl.STATIC_DRAW);
145 |
146 | // Set up texture
147 | var texture1 = gl.createTexture();
148 | gl.activeTexture(gl.TEXTURE0);
149 | gl.bindTexture(gl.TEXTURE_2D, texture1);
150 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
151 | var image1 = new Image();
152 |
153 | var texture2 = gl.createTexture();
154 | gl.activeTexture(gl.TEXTURE1);
155 | gl.bindTexture(gl.TEXTURE_2D, texture2);
156 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
157 | var image2 = new Image();
158 |
159 | function initTextureThenDraw()
160 | {
161 | image1.onload = function() { loadTexture(image1,texture1); };
162 | image1.crossOrigin = "anonymous";
163 | image1.src = "https://farm6.staticflickr.com/5564/30725680942_e3bfe50e5e_b.jpg";
164 |
165 | image2.onload = function() { loadTexture(image2,texture2); };
166 | image2.crossOrigin = "anonymous";
167 | image2.src = "https://farm6.staticflickr.com/5726/30206830053_87e9530b48_b.jpg";
168 |
169 | window.setTimeout(draw,200);
170 | }
171 |
172 | function loadTexture(image,texture)
173 | {
174 | gl.bindTexture(gl.TEXTURE_2D, texture);
175 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
176 |
177 | // Option 1 : Use mipmap, select interpolation mode
178 | gl.generateMipmap(gl.TEXTURE_2D);
179 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
180 |
181 | // Option 2: At least use linear filters
182 | // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
183 | // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
184 |
185 | // Optional ... if your shader & texture coordinates go outside the [0,1] range
186 | // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
187 | // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
188 | }
189 | // Scene (re-)draw routine
190 | function draw() {
191 |
192 | // Translate slider values to angles in the [-pi,pi] interval
193 | var angle1 = slider1.value*0.01*Math.PI;
194 | var angle2 = slider2.value*0.01*Math.PI;
195 |
196 | // Circle around the y-axis
197 | var eye = [400*Math.sin(angle1),150.0,400.0*Math.cos(angle1)];
198 | var target = [0,0,0];
199 | var up = [0,1,0];
200 |
201 | var tModel = mat4.create();
202 | mat4.fromScaling(tModel,[100,100,100]);
203 | mat4.rotate(tModel,tModel,angle2,[1,1,1]);
204 |
205 | var tCamera = mat4.create();
206 | mat4.lookAt(tCamera, eye, target, up);
207 |
208 | var tProjection = mat4.create();
209 | mat4.perspective(tProjection,Math.PI/4,1,10,1000);
210 |
211 | var tMV = mat4.create();
212 | var tMVn = mat3.create();
213 | var tMVP = mat4.create();
214 | mat4.multiply(tMV,tCamera,tModel); // "modelView" matrix
215 | mat3.normalFromMat4(tMVn,tMV);
216 | mat4.multiply(tMVP,tProjection,tMV);
217 |
218 | // Clear screen, prepare for rendering
219 | gl.clearColor(0.0, 0.0, 0.0, 1.0);
220 | gl.enable(gl.DEPTH_TEST);
221 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
222 |
223 | // Set up uniforms & attributes
224 | gl.uniformMatrix4fv(shaderProgram.MVmatrix,false,tMV);
225 | gl.uniformMatrix3fv(shaderProgram.MVNormalmatrix,false,tMVn);
226 | gl.uniformMatrix4fv(shaderProgram.MVPmatrix,false,tMVP);
227 |
228 | gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
229 | gl.vertexAttribPointer(shaderProgram.PositionAttribute, trianglePosBuffer.itemSize,
230 | gl.FLOAT, false, 0, 0);
231 | gl.bindBuffer(gl.ARRAY_BUFFER, triangleNormalBuffer);
232 | gl.vertexAttribPointer(shaderProgram.NormalAttribute, triangleNormalBuffer.itemSize,
233 | gl.FLOAT, false, 0, 0);
234 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
235 | gl.vertexAttribPointer(shaderProgram.ColorAttribute, colorBuffer.itemSize,
236 | gl.FLOAT,false, 0, 0);
237 | gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
238 | gl.vertexAttribPointer(shaderProgram.texcoordAttribute, textureBuffer.itemSize,
239 | gl.FLOAT, false, 0, 0);
240 |
241 | // Bind texture
242 | gl.activeTexture(gl.TEXTURE0);
243 | gl.bindTexture(gl.TEXTURE_2D, texture1);
244 | gl.activeTexture(gl.TEXTURE1);
245 | gl.bindTexture(gl.TEXTURE_2D, texture2);
246 |
247 | // Do the drawing
248 | gl.drawElements(gl.TRIANGLES, triangleIndices.length, gl.UNSIGNED_BYTE, 0);
249 |
250 | }
251 |
252 | slider1.addEventListener("input",draw);
253 | slider2.addEventListener("input",draw);
254 | initTextureThenDraw();
255 | }
256 |
257 | window.onload=start;
258 |
259 |
260 |
261 |
--------------------------------------------------------------------------------
/Week2/Demo0/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | A simple drawing demo
5 |
6 |
7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/Week2/Demo0/demo.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById('myCanvas');
2 | var context = canvas.getContext('2d');
3 |
4 | // a thick red line
5 | context.lineWidth = 5;
6 | context.strokeStyle = "red";
7 |
8 | // the actual line
9 | context.beginPath();
10 | context.moveTo(50,50);
11 | context.lineTo(100,100);
12 | context.stroke();
13 |
--------------------------------------------------------------------------------
/Week2/Demo1/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Coordinate axes and a filled shape
5 |
6 |
7 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Week2/Demo1/demo.js:
--------------------------------------------------------------------------------
1 | var canvas = document.getElementById('myCanvas');
2 |
3 | function draw() {
4 | var context = canvas.getContext('2d');
5 |
6 | function DrawLshape(color) {
7 | context.beginPath();
8 | context.fillStyle = color;
9 | context.moveTo(50,25);
10 | context.lineTo(150,25);
11 | context.lineTo(150,75);
12 | context.lineTo(100,75);
13 | context.lineTo(100,175);
14 | context.lineTo(50,175);
15 | context.closePath();
16 | context.fill();
17 | }
18 |
19 | function DrawAxes(color) {
20 | context.strokeStyle=color;
21 | context.beginPath();
22 | // Axes
23 | context.moveTo(120,0);context.lineTo(0,0);context.lineTo(0,120);
24 | // Arrowheads
25 | context.moveTo(110,5);context.lineTo(120,0);context.lineTo(110,-5);
26 | context.moveTo(5,110);context.lineTo(0,120);context.lineTo(-5,110);
27 | // X-label
28 | context.moveTo(130,0);context.lineTo(140,10);
29 | context.moveTo(130,10);context.lineTo(140,0);
30 | // Y-label
31 | context.moveTo(0,130);context.lineTo(5,135);context.lineTo(10,130);
32 | context.moveTo(5,135);context.lineTo(5,142);
33 |
34 | context.stroke();
35 | }
36 |
37 | // make sure you understand these
38 |
39 | DrawAxes("green");
40 | DrawLshape("green");
41 |
42 | }
43 |
44 | draw();
45 |
46 |
--------------------------------------------------------------------------------
/Week2/Demo2/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Simple demonstration of slider interface
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Week2/Demo2/demo.js:
--------------------------------------------------------------------------------
1 | function setup() { "use strict";
2 | var canvas = document.getElementById('myCanvas');
3 | var slider1 = document.getElementById('slider1');
4 | slider1.value = 0;
5 | var slider2 = document.getElementById('slider2');
6 | slider2.value = 0;
7 | function draw() {
8 | var context = canvas.getContext('2d');
9 | canvas.width = canvas.width;
10 | // use the sliders to get various parameters
11 | var dx = slider1.value;
12 | var dy = slider2.value;
13 |
14 | function DrawLshape(color) {
15 | context.beginPath();
16 | context.fillStyle = color;
17 | context.moveTo(50,25);
18 | context.lineTo(150,25);
19 | context.lineTo(150,75);
20 | context.lineTo(100,75);
21 | context.lineTo(100,175);
22 | context.lineTo(50,175);
23 | context.closePath();
24 | context.fill();
25 | }
26 |
27 | function DrawAxes(color) {
28 | context.strokeStyle=color;
29 | context.beginPath();
30 | // Axes
31 | context.moveTo(120,0);context.lineTo(0,0);context.lineTo(0,120);
32 | // Arrowheads
33 | context.moveTo(110,5);context.lineTo(120,0);context.lineTo(110,-5);
34 | context.moveTo(5,110);context.lineTo(0,120);context.lineTo(-5,110);
35 | // X-label
36 | context.moveTo(130,0);context.lineTo(140,10);
37 | context.moveTo(130,10);context.lineTo(140,0);
38 | // Y-label
39 | context.moveTo(0,130);context.lineTo(5,135);context.lineTo(10,130);
40 | context.moveTo(5,135);context.lineTo(5,142);
41 |
42 | context.stroke();
43 | }
44 |
45 | // make sure you understand these
46 |
47 | DrawAxes("black");
48 | context.save();
49 | context.translate(dx,dy);
50 | DrawAxes("green");
51 | DrawLshape("green");
52 | context.restore();
53 |
54 | }
55 | slider1.addEventListener("input",draw);
56 | slider2.addEventListener("input",draw);
57 | draw();
58 | }
59 | window.onload = setup;
60 |
61 |
62 |
--------------------------------------------------------------------------------
/Week2/Demo3/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | A few static shapes
5 |
6 |
7 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/Week2/Demo3/demo.js:
--------------------------------------------------------------------------------
1 | // function draw() {
2 | window.onload = function() {
3 | var canvas = document.getElementById('myCanvas');
4 | var context = canvas.getContext('2d');
5 | context.beginPath();
6 | context.rect(25,25,50,50);
7 | context.fill();
8 |
9 | context.beginPath();
10 | context.rect(125,25,50,50);
11 | context.fillStyle = "#800";
12 | context.fill();
13 |
14 | context.beginPath();
15 | context.rect(25,125,50,50);
16 | context.strokeStyle = "#800";
17 | context.lineWidth = 4;
18 | context.stroke();
19 |
20 | context.beginPath();
21 | context.moveTo(150,125);
22 | context.lineTo(125,175);
23 | context.lineTo(175,175);
24 | context.closePath();
25 | context.fillStyle="#EE0";
26 | context.fill();
27 | context.stroke();
28 | };
29 | // window.onload = draw;
30 |
31 |
--------------------------------------------------------------------------------
/Week3/Demo0/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Simple (non-branching) robotic arm example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |