├── .gitattributes ├── .gitignore ├── camera.js ├── collision.js ├── getTextures.php ├── gl.js ├── index1.php ├── index10.php ├── index11.php ├── index12.php ├── index13.php ├── index14.php ├── index15.php ├── index16.php ├── index17.php ├── index18.php ├── index19.php ├── index2.php ├── index20.php ├── index21.php ├── index22.php ├── index3.php ├── index4.php ├── index5.php ├── index6.php ├── index7.php ├── index8.php ├── index9.php ├── keyboard.js ├── matrix.js ├── model.js ├── model ├── boxes.ply ├── car.ply ├── cube.ply ├── kart.ply ├── racingtrack.ply ├── racingtrack2.ply ├── sphere.ply ├── sprite.ply ├── stairs.ply └── untitled.ply ├── model2.js ├── model3.js ├── model4.js ├── model5.js ├── model6.js ├── mouse.js ├── ply-multi.js ├── ply-racingtrack.js ├── ply.js ├── primitives.js ├── segment.js ├── shaders.js ├── shaders ├── directional.frag ├── directional.vs ├── global.frag ├── global.vs ├── light.frag ├── light.vs ├── move.frag ├── move.vs ├── point.frag ├── point.vs ├── sprite.frag ├── sprite.vs ├── spritesheet.frag ├── spritesheet.vs ├── standard.frag ├── standard.vs ├── texture.frag ├── texture.vs ├── vertex.frag └── vertex.vs ├── starfield.php ├── texture.js ├── textures ├── brick.png ├── fire.png ├── font.png ├── road.png └── star.png ├── vector3.js ├── webgl-quickstart ├── gl.js ├── index.html ├── shaders.js ├── shaders │ ├── global.frag │ ├── global.vs │ ├── standard.frag │ └── standard.vs └── starfield.html └── webgltutorial2.php /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /camera.js: -------------------------------------------------------------------------------- 1 | // Main camera object class 2 | // Note: The Camera class is dependent on matrix-generation functions located in matrix.js 3 | var Camera = function() 4 | { 5 | this.x = 0; 6 | this.y = 0; 7 | this.z = 0; 8 | 9 | // This camera represented by a "mat4" matrix 10 | this.ViewMatrix = null; 11 | 12 | // Create LookAt matrix 13 | this.LookAt(tx, ty, tz) 14 | { 15 | 16 | } 17 | } -------------------------------------------------------------------------------- /collision.js: -------------------------------------------------------------------------------- 1 | var EPSILON = 0.000001; 2 | 3 | function triangle_intersection( 4 | V1, V2, V3, // Triangle vertices 5 | O,// Ray origin 6 | D // Ray direction 7 | ) { 8 | 9 | var e1 = new Vector(), 10 | e2 = new Vector(); 11 | 12 | var P = new Vector(), 13 | Q = new Vector(), 14 | T = new Vector(); 15 | 16 | var det = 0, inv_det = 0.0, u = 0, v = 0; 17 | var t = 0; 18 | 19 | //Find vectors for two edges sharing V1 20 | e1 = V2.subtract(V1); 21 | e2 = V3.subtract(V1); 22 | 23 | //Begin calculating determinant - also used to calculate u parameter 24 | P = D.cross(e2); 25 | 26 | // if determinant is near zero, ray lies in plane of triangle 27 | det = e1.dot(P); 28 | 29 | //NOT CULLING 30 | if(det > -EPSILON && det < EPSILON) return 0; 31 | inv_det = 1.0 / det; 32 | 33 | //calculate distance from V1 to ray origin 34 | T = O.subtract(V1); 35 | 36 | //Calculate u parameter and test bound 37 | u = T.dot(P) * inv_det; 38 | 39 | //The intersection lies outside of the triangle 40 | if(u < 0.0 || u > 1.0) return 0; 41 | 42 | //Prepare to test v parameter 43 | Q = T.cross(e1); 44 | 45 | //Calculate V parameter and test bound 46 | v = D.dot(Q) * inv_det; 47 | 48 | //The intersection lies outside of the triangle 49 | if (v < 0.0 || u + v > 1.0) return 0; 50 | 51 | t = e2.dot(Q) * inv_det; 52 | 53 | if(t > EPSILON) { // collision detected! 54 | 55 | var w = 1.0 - (u + v); 56 | 57 | var x = (w * V1.x + u * V2.x + v * V3.x); 58 | var y = (w * V1.y + u * V2.y + v * V3.y); 59 | var z = (w * V1.z + u * V2.z + v * V3.z); 60 | 61 | // return intersection point 62 | return [x,y,z]; 63 | } 64 | 65 | // No collision 66 | return 0; 67 | } 68 | 69 | /* ORIGINAL C++ function 70 | 71 | #define EPSILON 0.000001 72 | 73 | int triangle_intersection( Vector3 V1, // Triangle vertices 74 | Vector3 V2, 75 | Vector3 V3, 76 | Vector3 O, //Ray origin 77 | Vector3 D, //Ray direction 78 | Vector3 &out ) // Point of intersection out 79 | { 80 | Vector3 e1, e2; //Edge1, Edge2 81 | Vector3 P, Q, T; 82 | 83 | float det, inv_det, u, v; 84 | float t; 85 | 86 | //Find vectors for two edges sharing V1 87 | 88 | e1 = V2 - V1; 89 | e2 = V3 - V1; 90 | //SUB(e1, V2, V1); 91 | //SUB(e2, V3, V1); 92 | 93 | //Begin calculating determinant - also used to calculate u parameter 94 | //CROSS(P, D, e2); 95 | P = D.cross(e2); 96 | 97 | //out = D.cross(e2); 98 | T = O - V1; 99 | 100 | //Calculate u parameter and test bound 101 | //u = DOT(T, P) * inv_det; 102 | u = T.dot(P) * inv_det; 103 | 104 | //The intersection lies outside of the triangle 105 | if(u < 0.f || u > 1.f) return 0; 106 | 107 | //Prepare to test v parameter 108 | //CROSS(Q, T, e1); 109 | Q = T.cross(e1); 110 | 111 | //Calculate V parameter and test bound 112 | //v = DOT(D, Q) * inv_det; 113 | v = D.dot(Q) * inv_det; 114 | 115 | //The intersection lies outside of the triangle 116 | if(v < 0.f || u + v > 1.f) return 0; 117 | 118 | //t = DOT(e2, Q) * inv_det; 119 | t = e2.dot(Q) * inv_det; 120 | 121 | if(t > EPSILON) { //ray intersection 122 | // *out = t; 123 | 124 | float w = 1.0f - (u + v); 125 | out.x = (w * V1.x + u * V2.x + v * V3.x); 126 | out.y = (w * V1.y + u * V2.y + v * V3.y); 127 | out.z = (w * V1.z + u * V2.z + v * V3.z); 128 | 129 | return 1; 130 | } 131 | 132 | // No hit, no win 133 | return 0; 134 | } 135 | 136 | */ -------------------------------------------------------------------------------- /getTextures.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gl.js: -------------------------------------------------------------------------------- 1 | /* 2 | CC3.0 Distribution License 3 | 4 | NOTE: This software is released under CC3.0 creative commons 5 | If using in own projects please give credit to the original author, 6 | 7 | * By linking to my tutorial site: 8 | 9 | * http://www.webgltutorials.org 10 | 11 | * Thanks :-) 12 | 13 | */ 14 | 15 | // Some tutorials (any tutorial <= index9.php) does not have models yet, 16 | // But we are already using our most advanced asset loader, implying them 17 | // So...set as if they are already loaded to avoid halting resource loader at this time 18 | window.ModelsLoaded = true; 19 | 20 | // Get WebGL context, if standard is not available; fall back on alternatives 21 | function GetWebGLContext( canvas ) 22 | { 23 | // Standard 24 | return canvas.getContext("webgl") || 25 | 26 | // Alternative; Safari, others 27 | canvas.getContext("experimental-webgl") || 28 | 29 | // Firefox; mozilla 30 | canvas.getContext("moz-webgl") || 31 | 32 | // Last resort; Safari, and maybe others 33 | canvas.getContext("webkit-3d"); 34 | 35 | // Note that "webgl" is not available as of Safari version <= 7.0.3 36 | // So we have to fall back to ambiguous alternatives for it and some other browsers 37 | } 38 | 39 | function InitializeWebGL() 40 | { 41 | // Get a handle to canvas tag 42 | var canvas = document.getElementById("gl"); 43 | 44 | // WebGL rendering context 45 | var gl = null; 46 | 47 | // Array that will store a list of supported extensions 48 | var extensions = null; 49 | 50 | // ! used twice in a row to cast object state to a Boolean value 51 | if (!!window.WebGLRenderingContext == true) 52 | { 53 | // Initialize WebGL rendering context, if available 54 | if ( gl = GetWebGLContext( canvas ) ) 55 | { 56 | console.log("WebGL is initialized."); 57 | 58 | // Ensure OpenGL viewport is resized to match canvas dimensions 59 | gl.viewportWidth = 800;//canvas.width; 60 | gl.viewportHeight = 600;//canvas.height; 61 | 62 | // Output the WebGL rendering context object to console for reference 63 | console.log( gl ); 64 | 65 | // List available extensions 66 | console.log( extensions = gl.getSupportedExtensions() ); 67 | 68 | // Set screen clear color to R, G, B, alpha; where 0.0 is 0% and 1.0 is 100% 69 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 70 | 71 | // Enable color; required for clearing the screen 72 | gl.clear(gl.COLOR_BUFFER_BIT); 73 | 74 | // Clear out the viewport with solid black color 75 | gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 76 | 77 | return gl; 78 | 79 | } 80 | else 81 | console.log("Your browser doesn't support WebGL."); 82 | } 83 | else 84 | console.log("WebGL is supported, but disabled :-("); 85 | } 86 | 87 | function DrawPoint(gl) { 88 | 89 | if (!gl) 90 | return; 91 | 92 | gl.useProgram( Shader.standardProgram ); 93 | gl.drawArrays(gl.POINTS, 0, 1); 94 | } 95 | 96 | function DrawPointUsingGlobalParameters(gl, x, y, z) { 97 | 98 | if (!gl) 99 | return; 100 | 101 | gl.useProgram( Shader.globalDrawingProgram ); // Use the program 102 | 103 | var a_Position = gl.getAttribLocation(Shader.globalDrawingProgram, 'a_Position'); 104 | //var alpha = gl.getUniformLocation(Shader.globalDrawingProgram, 'u_Alpha'); 105 | 106 | if (a_Position < 0) 107 | console.log("DrawPointUsingGlobalParameters: Failed to get attribute pointer a_Position."); 108 | else { 109 | // Pass point coordinates using global attribute a_Position from our JavaScript program 110 | gl.vertexAttrib3f(a_Position, x, y, z); 111 | //gl.uniform3f(alpha, 0.2, 0.2, 0.2); 112 | gl.drawArrays(gl.POINTS, 0, 1); 113 | } 114 | } 115 | 116 | var a = undefined; 117 | function DrawPointAtMousePosition(canvas, gl, e) { 118 | 119 | gl.useProgram( Shader.globalDrawingProgram ); // Use the program 120 | 121 | var x = e.clientX; // Get mouse position coordinates from click event object 122 | var y = e.clientY; 123 | 124 | console.log("Mouse x=" + x + ", y=" + y); // Output the coordinates to console 125 | 126 | // Get a pointer to a_Position attribute within the vertex shader 127 | // Note, variable doesn't have to be called 'a_Position' 128 | 129 | if (a == undefined) 130 | a = gl.getAttribLocation(Shader.globalDrawingProgram, 'a_Position'); 131 | 132 | if (a < 0) 133 | console.log("Failed to get attribute pointer a_Position."); 134 | else { 135 | // translate mouse coordinates to WebGL coordinate system 136 | var r = e.target.getBoundingClientRect(); 137 | x = ((x - r.left) - canvas.width / 2) / (canvas.width / 2); 138 | y = (canvas.height / 2 - (y - r.top)) / (canvas.height / 2); 139 | 140 | // Pass point coordinates using global attribute a_Position from our JavaScript program 141 | gl.vertexAttrib3f(a, x, y, 0); 142 | 143 | // Erase background 144 | //gl.clearColor(0.0, 0.0, 0.0, 1.0); 145 | //gl.clear(gl.COLOR_BUFFER_BIT); 146 | 147 | gl.drawArrays(gl.POINTS, 0, 1); 148 | } 149 | } -------------------------------------------------------------------------------- /index1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 1 - Drawing Arbitrary Points 5 | 6 | 7 | 8 | 9 | 10 | 11 | 52 | 53 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /index10.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 10 - Loading 3D Model From OBJ Format 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 164 | 165 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /index11.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 11 - WebGL and Keyboard Controls 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 180 | 181 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /index12.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 12 - 3D Camera & Multiple Viewport 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 172 | 173 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /index13.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 13 - Rendering Multiple Models (Objects) Separately 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 158 | 159 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /index14.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 14 - Dynamic Values (RGB) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 197 | 198 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /index15.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 14 - Light Source Shader 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 159 | 160 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /index18.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 18 - Per-Vertex Point-Light Light Source Shader 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 174 | 175 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /index19.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 19 - Drawing 2D Sprites in WebGL 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 169 | 170 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /index2.php: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | Tutorial 2 - Loading shaders from files 18 | 19 | 20 | 21 | 22 | 23 | 24 | 71 | 72 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /index20.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 20 - Sprite Sheet Shader 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 196 | 197 | 201 | 202 | 203 | 204 | -------------------------------------------------------------------------------- /index21.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 21 - Sprite Sheet 2D Frame-Based Animation 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 198 | 199 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /index3.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 3 - Load shaders from script tags 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 22 | 74 | 75 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /index4.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 4 - Draw Triangle ("Hello Triangle") 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 22 | 115 | 116 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /index5.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 5 - Colored Triangle (Vertex-Color Shader) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 22 | 122 | 123 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /index6.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 6 - Drawing Multiple (Two) Triangles 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 22 | 134 | 135 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /index7.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 7 - Making A 3D Cube Out Of Vertices (Float32Array) Semi-Programmatically 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 19 | 23 | 114 | 115 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /index8.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 8 - Texture Mapping A Triangle 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 123 | 124 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /index9.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 9 - WebGL Matrix Operations (3D Cube Rotation) 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 165 | 166 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /keyboard.js: -------------------------------------------------------------------------------- 1 | // ASCII codes 2 | var KEY_LEFT = 37; 3 | var KEY_RIGHT = 39; 4 | var KEY_UP = 38; 5 | var KEY_DOWN = 40; 6 | var KEY_W = 87; 7 | var KEY_S = 83; 8 | var KEY_A = 65; 9 | var KEY_D = 68; 10 | 11 | var DIR_E = 1; 12 | var DIR_NE = 2; 13 | var DIR_N = 4; 14 | var DIR_NW = 8; 15 | var DIR_W = 16; 16 | var DIR_SW = 32; 17 | var DIR_S = 64; 18 | var DIR_SE = 128; 19 | 20 | var isShift = false; // var key = [false, false, false, false]; 21 | window.key = null; 22 | 23 | var Keyboard = function() { 24 | this.left = false; 25 | this.right = false; 26 | this.up = false; 27 | this.down = false; 28 | this.w = false; 29 | this.s = false; 30 | this.a = false; 31 | this.d = false; 32 | }; 33 | 34 | function InitializeKeyboard() 35 | { 36 | window.key = new Keyboard(); 37 | 38 | $(document).keydown(function(e) { 39 | if (e.keyCode == 16) isShift = true; 40 | if (e.keyCode == KEY_LEFT) { key.left = true; } 41 | if (e.keyCode == KEY_RIGHT) { key.right = true; } 42 | if (e.keyCode == KEY_UP) { key.up = true; } 43 | if (e.keyCode == KEY_DOWN) { key.down = true; } 44 | if (e.keyCode == KEY_W) { key.w = true; } 45 | if (e.keyCode == KEY_S) { key.s = true; } 46 | if (e.keyCode == KEY_A) { key.a = true; } 47 | if (e.keyCode == KEY_D) { key.d = true; } 48 | console.log(e.keyCode); 49 | }); 50 | 51 | $(document).keyup(function(e) { 52 | if (e.keyCode == 16) isShift = false; 53 | if (e.keyCode == KEY_LEFT) { key.left = false; } 54 | if (e.keyCode == KEY_RIGHT) { key.right = false; } 55 | if (e.keyCode == KEY_UP) { key.up = false; } 56 | if (e.keyCode == KEY_DOWN) { key.down = false; } 57 | if (e.keyCode == KEY_W) { key.w = false; } 58 | if (e.keyCode == KEY_S) { key.s = false; } 59 | if (e.keyCode == KEY_A) { key.a = false; } 60 | if (e.keyCode == KEY_D) { key.d = false; } 61 | }); 62 | } 63 | -------------------------------------------------------------------------------- /model.js: -------------------------------------------------------------------------------- 1 | var MAX_MODELS = 16; 2 | 3 | window.ModelsLoaded = false; 4 | 5 | window.ref_arrayMDL = new Array(); 6 | 7 | window.current_Model_ID = 0; 8 | 9 | function ModelData() { 10 | this.vertexbuffer = null; //gl.createBuffer(); 11 | this.colorbuffer = null; //gl.createBuffer(); 12 | this.texturebuffer = null; //gl.createBuffer(); 13 | this.normalbuffer = null; //gl.createBuffer(); 14 | this.indexbuffer = null; //gl.createBuffer(); 15 | } 16 | 17 | var Model = new Array(); 18 | 19 | for (var i = 0; i < MAX_MODELS; i++) 20 | Model[i] = new ModelData(); 21 | 22 | function LoadModels() 23 | { 24 | LoadPLY("car.ply"); 25 | // LoadPLY("racingtrack2.ply"); 26 | } 27 | 28 | // Bind model for rasterization; 29 | // Assumes model vertex data is fully loaded 30 | function BindModel(model_ID) 31 | { 32 | var i = model_ID; 33 | 34 | var vertices = window.ref_arrayMDL[i][0]; // Get vertex data from loaded model 35 | var colors = window.ref_arrayMDL[i][1]; 36 | var uvs = window.ref_arrayMDL[i][2]; 37 | var normals = window.ref_arrayMDL[i][3]; 38 | var indices = window.ref_arrayMDL[i][4]; 39 | 40 | // set global pointer to this model's indices 41 | model_indices = window.ref_arrayMDL[i][4]; 42 | 43 | if (Model[i].vertexbuffer == null) Model[i].vertexbuffer = gl.createBuffer(); 44 | if (Model[i].colorbuffer == null) Model[i].colorbuffer = gl.createBuffer(); 45 | if (Model[i].texturebuffer == null) Model[i].texturebuffer = gl.createBuffer(); 46 | if (Model[i].normalbuffer == null) Model[i].normalbuffer = gl.createBuffer(); 47 | if (Model[i].indexbuffer == null) Model[i].indexbuffer = gl.createBuffer(); 48 | 49 | var BYTESIZE = vertices.BYTES_PER_ELEMENT; 50 | 51 | // Bind vertex buffer to ARRAY_BUFFER 52 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].vertexbuffer); 53 | // Send our vertex data to the buffer using floating point array 54 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 55 | var coords = gl.getAttribLocation(Shader.directionalProgram, "a_Position"); 56 | gl.vertexAttribPointer(coords, 3, gl.FLOAT, false, 0, 0); 57 | gl.enableVertexAttribArray(coords); // Enable it 58 | // We're done; now we have to unbind the buffer 59 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 60 | 61 | // Bind colorbuffer to ARRAY_BUFFER 62 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].colorbuffer); 63 | // Send our vertex data to the buffer using floating point array 64 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 65 | var col = gl.getAttribLocation(Shader.directionalProgram, "a_Color"); 66 | gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0); 67 | gl.enableVertexAttribArray(col); // Enable it 68 | // We're done; now we have to unbind the buffer 69 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 70 | 71 | // Bind texturebuffer to ARRAY_BUFFER 72 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].texturebuffer); 73 | // Send our texture image data to the buffer using floating point array 74 | gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); 75 | var uv = gl.getAttribLocation(Shader.directionalProgram, "a_Texture"); 76 | gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0); 77 | gl.enableVertexAttribArray(uv); // Enable it 78 | // We're done; now we have to unbind the buffer (optional but probably a good idea) 79 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 80 | 81 | // Bind normalbuffer to ARRAY_BUFFER 82 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].normalbuffer); 83 | // Send our vertex data to the buffer using floating point array 84 | gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); 85 | var n = gl.getAttribLocation(Shader.directionalProgram, "a_Normal"); 86 | gl.vertexAttribPointer(n, 3, gl.FLOAT, false, 0, 0); 87 | gl.enableVertexAttribArray(n); // Enable it 88 | // We're done; now we have to unbind the buffer 89 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 90 | 91 | // Bind indices to ELEMENT_ARRAY_BUFFER 92 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Model[i].indexbuffer); 93 | // Send index (indices) data to this buffer 94 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 95 | } -------------------------------------------------------------------------------- /model/cube.ply: -------------------------------------------------------------------------------- 1 | ply 2 | format ascii 1.0 3 | comment Created by Blender 2.74 (sub 0) - www.blender.org, source file: '' 4 | element vertex 26 5 | property float x 6 | property float y 7 | property float z 8 | property float nx 9 | property float ny 10 | property float nz 11 | property float s 12 | property float t 13 | property uchar red 14 | property uchar green 15 | property uchar blue 16 | element face 12 17 | property list uchar uint vertex_indices 18 | end_header 19 | 1.000000 -1.000000 1.000000 0.000000 -1.000000 0.000000 0.333333 0.666667 13 79 255 20 | -1.000000 -1.000000 1.000000 0.000000 -1.000000 0.000000 0.333333 1.000000 1 70 255 21 | -1.000000 -1.000000 -1.000000 0.000000 -1.000000 0.000000 0.000000 1.000000 0 69 255 22 | -1.000000 1.000000 -1.000000 0.000000 1.000000 0.000000 0.333333 0.666667 255 233 0 23 | -1.000000 1.000000 1.000000 0.000000 1.000000 0.000000 0.000000 0.666667 255 233 0 24 | 0.999999 1.000000 1.000001 0.000000 1.000000 0.000000 0.000000 0.333333 255 233 0 25 | 1.000000 1.000000 -0.999999 1.000000 0.000000 0.000001 0.333333 0.333333 255 233 0 26 | 0.999999 1.000000 1.000001 1.000000 0.000000 0.000001 0.333333 0.000000 255 233 0 27 | 1.000000 -1.000000 1.000000 1.000000 0.000000 0.000001 0.666667 0.000000 0 69 255 28 | 0.999999 1.000000 1.000001 -0.000000 0.000000 1.000000 0.000000 0.000000 255 233 0 29 | -1.000000 1.000000 1.000000 -0.000000 0.000000 1.000000 0.333333 0.000000 255 233 0 30 | -1.000000 -1.000000 1.000000 -0.000000 0.000000 1.000000 0.333333 0.333333 0 69 255 31 | -1.000000 -1.000000 1.000000 -1.000000 -0.000000 -0.000000 1.000000 0.333333 0 69 255 32 | -1.000000 1.000000 1.000000 -1.000000 -0.000000 -0.000000 0.666667 0.333333 255 233 0 33 | -1.000000 1.000000 -1.000000 -1.000000 -0.000000 -0.000000 0.666667 0.000000 255 233 0 34 | 1.000000 -1.000000 -1.000000 0.000000 0.000000 -1.000000 0.666667 0.333333 1 70 255 35 | -1.000000 -1.000000 -1.000000 0.000000 0.000000 -1.000000 0.666667 0.666667 0 69 255 36 | -1.000000 1.000000 -1.000000 0.000000 0.000000 -1.000000 0.333333 0.666667 255 233 0 37 | 1.000000 -1.000000 -1.000000 0.000000 -1.000000 0.000000 0.000000 0.666667 0 69 255 38 | 1.000000 1.000000 -0.999999 -0.000000 1.000000 0.000000 0.333333 0.333333 255 233 0 39 | 1.000000 -1.000000 -1.000000 1.000000 -0.000000 0.000000 0.666667 0.333333 0 69 255 40 | 1.000000 1.000000 -0.999999 1.000000 -0.000000 0.000000 0.333333 0.333333 255 233 0 41 | 1.000000 -1.000000 1.000000 1.000000 -0.000000 0.000000 0.666667 0.000000 0 69 255 42 | 1.000000 -1.000000 1.000000 -0.000000 -0.000000 1.000000 0.000000 0.333333 4 71 255 43 | -1.000000 -1.000000 -1.000000 -1.000000 -0.000000 -0.000000 1.000000 0.000000 0 69 255 44 | 1.000000 1.000000 -0.999999 0.000000 0.000000 -1.000000 0.333333 0.333333 255 233 0 45 | 3 0 1 2 46 | 3 3 4 5 47 | 3 6 7 8 48 | 3 9 10 11 49 | 3 12 13 14 50 | 3 15 16 17 51 | 3 18 0 2 52 | 3 19 3 5 53 | 3 20 21 22 54 | 3 23 9 11 55 | 3 24 12 14 56 | 3 25 15 17 57 | -------------------------------------------------------------------------------- /model/sprite.ply: -------------------------------------------------------------------------------- 1 | ply 2 | format ascii 1.0 3 | comment Created by Blender 2.74 (sub 0) - www.blender.org, source file: '' 4 | element vertex 4 5 | property float x 6 | property float y 7 | property float z 8 | property float nx 9 | property float ny 10 | property float nz 11 | property float s 12 | property float t 13 | property uchar red 14 | property uchar green 15 | property uchar blue 16 | element face 2 17 | property list uchar uint vertex_indices 18 | end_header 19 | 0.999999 1.000000 0.004500 -0.000000 0.000000 1.000000 0.000000 0.000000 255 255 255 20 | -1.000000 1.000000 0.004499 -0.000000 0.000000 1.000000 1.000000 0.000000 255 255 255 21 | -1.000000 -1.000000 0.004499 -0.000000 0.000000 1.000000 1.000000 1.000000 255 255 255 22 | 1.000000 -1.000000 0.004499 -0.000000 -0.000000 1.000000 0.000000 1.000000 255 255 255 23 | 3 0 1 2 24 | 3 3 0 2 25 | -------------------------------------------------------------------------------- /model/untitled.ply: -------------------------------------------------------------------------------- 1 | ply 2 | format ascii 1.0 3 | comment Created by Blender 2.74 (sub 0) - www.blender.org, source file: '' 4 | element vertex 26 5 | property float x 6 | property float y 7 | property float z 8 | property float nx 9 | property float ny 10 | property float nz 11 | property float s 12 | property float t 13 | property uchar red 14 | property uchar green 15 | property uchar blue 16 | element face 12 17 | property list uchar uint vertex_indices 18 | end_header 19 | 1.000000 -1.000000 1.000000 0.000000 -1.000000 0.000000 0.333333 0.666667 255 255 255 20 | -1.000000 -1.000000 1.000000 0.000000 -1.000000 0.000000 0.333333 1.000000 255 255 255 21 | -1.000000 -1.000000 -1.000000 0.000000 -1.000000 0.000000 0.000000 1.000000 255 255 255 22 | -1.000000 1.000000 -1.000000 0.000000 1.000000 0.000000 0.333333 0.666667 255 255 255 23 | -1.000000 1.000000 1.000000 0.000000 1.000000 0.000000 0.000000 0.666667 255 255 255 24 | 0.999999 1.000000 1.000001 0.000000 1.000000 0.000000 0.000000 0.333333 255 163 77 25 | 1.000000 1.000000 -0.999999 1.000000 0.000000 0.000001 0.333333 0.333333 255 255 255 26 | 0.999999 1.000000 1.000001 1.000000 0.000000 0.000001 0.333333 0.000000 255 163 77 27 | 1.000000 -1.000000 1.000000 1.000000 0.000000 0.000001 0.666667 0.000000 255 255 255 28 | 0.999999 1.000000 1.000001 -0.000000 0.000000 1.000000 0.000000 0.000000 255 163 77 29 | -1.000000 1.000000 1.000000 -0.000000 0.000000 1.000000 0.333333 0.000000 255 255 255 30 | -1.000000 -1.000000 1.000000 -0.000000 0.000000 1.000000 0.333333 0.333333 255 255 255 31 | -1.000000 -1.000000 1.000000 -1.000000 -0.000000 -0.000000 1.000000 0.333333 255 255 255 32 | -1.000000 1.000000 1.000000 -1.000000 -0.000000 -0.000000 0.666667 0.333333 255 255 255 33 | -1.000000 1.000000 -1.000000 -1.000000 -0.000000 -0.000000 0.666667 0.000000 255 255 255 34 | 1.000000 -1.000000 -1.000000 0.000000 0.000000 -1.000000 0.666667 0.333333 255 255 255 35 | -1.000000 -1.000000 -1.000000 0.000000 0.000000 -1.000000 0.666667 0.666667 255 255 255 36 | -1.000000 1.000000 -1.000000 0.000000 0.000000 -1.000000 0.333333 0.666667 255 255 255 37 | 1.000000 -1.000000 -1.000000 0.000000 -1.000000 0.000000 0.000000 0.666667 255 255 255 38 | 1.000000 1.000000 -0.999999 -0.000000 1.000000 0.000000 0.333333 0.333333 255 255 255 39 | 1.000000 -1.000000 -1.000000 1.000000 -0.000000 0.000000 0.666667 0.333333 255 255 255 40 | 1.000000 1.000000 -0.999999 1.000000 -0.000000 0.000000 0.333333 0.333333 255 255 255 41 | 1.000000 -1.000000 1.000000 1.000000 -0.000000 0.000000 0.666667 0.000000 255 255 255 42 | 1.000000 -1.000000 1.000000 -0.000000 -0.000000 1.000000 0.000000 0.333333 255 255 255 43 | -1.000000 -1.000000 -1.000000 -1.000000 -0.000000 -0.000000 1.000000 0.000000 255 255 255 44 | 1.000000 1.000000 -0.999999 0.000000 0.000000 -1.000000 0.333333 0.333333 255 255 255 45 | 3 0 1 2 46 | 3 3 4 5 47 | 3 6 7 8 48 | 3 9 10 11 49 | 3 12 13 14 50 | 3 15 16 17 51 | 3 18 0 2 52 | 3 19 3 5 53 | 3 20 21 22 54 | 3 23 9 11 55 | 3 24 12 14 56 | 3 25 15 17 57 | -------------------------------------------------------------------------------- /model2.js: -------------------------------------------------------------------------------- 1 | var MAX_MODELS = 16; 2 | 3 | window.ModelsLoaded = false; 4 | 5 | window.ref_arrayMDL = new Array(); 6 | 7 | window.current_Model_ID = 0; 8 | 9 | function ModelData() { 10 | this.vertexbuffer = null; //gl.createBuffer(); 11 | this.colorbuffer = null; //gl.createBuffer(); 12 | this.texturebuffer = null; //gl.createBuffer(); 13 | this.normalbuffer = null; //gl.createBuffer(); 14 | this.indexbuffer = null; //gl.createBuffer(); 15 | } 16 | 17 | var Model = new Array(); 18 | 19 | for (var i = 0; i < MAX_MODELS; i++) 20 | Model[i] = new ModelData(); 21 | 22 | function LoadModels() 23 | { 24 | LoadPLY("stairs.ply"); 25 | LoadPLY("sphere.ply"); 26 | // LoadPLY("racingtrack2.ply"); 27 | } 28 | 29 | // Bind model for rasterization; 30 | // Assumes model vertex data is fully loaded 31 | function BindModel(model_ID) 32 | { 33 | var i = model_ID; 34 | 35 | var vertices = window.ref_arrayMDL[i][0]; // Get vertex data from loaded model 36 | var colors = window.ref_arrayMDL[i][1]; 37 | var uvs = window.ref_arrayMDL[i][2]; 38 | var normals = window.ref_arrayMDL[i][3]; 39 | var indices = window.ref_arrayMDL[i][4]; 40 | 41 | // set global pointer to this model's indices 42 | model_indices = window.ref_arrayMDL[i][4]; 43 | 44 | if (Model[i].vertexbuffer == null) Model[i].vertexbuffer = gl.createBuffer(); 45 | if (Model[i].colorbuffer == null) Model[i].colorbuffer = gl.createBuffer(); 46 | if (Model[i].texturebuffer == null) Model[i].texturebuffer = gl.createBuffer(); 47 | if (Model[i].normalbuffer == null) Model[i].normalbuffer = gl.createBuffer(); 48 | if (Model[i].indexbuffer == null) Model[i].indexbuffer = gl.createBuffer(); 49 | 50 | var BYTESIZE = vertices.BYTES_PER_ELEMENT; 51 | 52 | // Bind vertex buffer to ARRAY_BUFFER 53 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].vertexbuffer); 54 | // Send our vertex data to the buffer using floating point array 55 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 56 | var coords = gl.getAttribLocation(Shader.directionalProgram, "a_Position"); 57 | gl.vertexAttribPointer(coords, 3, gl.FLOAT, false, 0, 0); 58 | gl.enableVertexAttribArray(coords); // Enable it 59 | // We're done; now we have to unbind the buffer 60 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 61 | 62 | // Bind colorbuffer to ARRAY_BUFFER 63 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].colorbuffer); 64 | // Send our vertex data to the buffer using floating point array 65 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 66 | var col = gl.getAttribLocation(Shader.directionalProgram, "a_Color"); 67 | gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0); 68 | gl.enableVertexAttribArray(col); // Enable it 69 | // We're done; now we have to unbind the buffer 70 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 71 | 72 | // Bind texturebuffer to ARRAY_BUFFER 73 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].texturebuffer); 74 | // Send our texture image data to the buffer using floating point array 75 | gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); 76 | var uv = gl.getAttribLocation(Shader.directionalProgram, "a_Texture"); 77 | gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0); 78 | gl.enableVertexAttribArray(uv); // Enable it 79 | // We're done; now we have to unbind the buffer (optional but probably a good idea) 80 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 81 | 82 | // Bind normalbuffer to ARRAY_BUFFER 83 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].normalbuffer); 84 | // Send our vertex data to the buffer using floating point array 85 | gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); 86 | var n = gl.getAttribLocation(Shader.directionalProgram, "a_Normal"); 87 | gl.vertexAttribPointer(n, 3, gl.FLOAT, false, 0, 0); 88 | gl.enableVertexAttribArray(n); // Enable it 89 | // We're done; now we have to unbind the buffer 90 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 91 | 92 | // Bind indices to ELEMENT_ARRAY_BUFFER 93 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Model[i].indexbuffer); 94 | // Send index (indices) data to this buffer 95 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 96 | } -------------------------------------------------------------------------------- /model3.js: -------------------------------------------------------------------------------- 1 | var MAX_MODELS = 16; 2 | 3 | window.ModelsLoaded = false; 4 | 5 | window.ref_arrayMDL = new Array(); 6 | 7 | window.current_Model_ID = 0; 8 | 9 | function ModelData() { 10 | this.vertexbuffer = null; //gl.createBuffer(); 11 | this.colorbuffer = null; //gl.createBuffer(); 12 | this.texturebuffer = null; //gl.createBuffer(); 13 | this.normalbuffer = null; //gl.createBuffer(); 14 | this.indexbuffer = null; //gl.createBuffer(); 15 | } 16 | 17 | var Model = new Array(); 18 | 19 | for (var i = 0; i < MAX_MODELS; i++) 20 | Model[i] = new ModelData(); 21 | 22 | function LoadModels() 23 | { 24 | LoadPLY("sphere.ply"); 25 | LoadPLY("racingtrack2.ply"); 26 | } 27 | 28 | // Bind model for rasterization; 29 | // Assumes model vertex data is fully loaded 30 | function BindModel(model_ID) 31 | { 32 | var i = model_ID; 33 | 34 | var vertices = window.ref_arrayMDL[i][0]; // Get vertex data from loaded model 35 | var colors = window.ref_arrayMDL[i][1]; 36 | var uvs = window.ref_arrayMDL[i][2]; 37 | var normals = window.ref_arrayMDL[i][3]; 38 | var indices = window.ref_arrayMDL[i][4]; 39 | 40 | // set global pointer to this model's indices 41 | model_indices = window.ref_arrayMDL[i][4]; 42 | 43 | if (Model[i].vertexbuffer == null) Model[i].vertexbuffer = gl.createBuffer(); 44 | if (Model[i].colorbuffer == null) Model[i].colorbuffer = gl.createBuffer(); 45 | if (Model[i].texturebuffer == null) Model[i].texturebuffer = gl.createBuffer(); 46 | if (Model[i].normalbuffer == null) Model[i].normalbuffer = gl.createBuffer(); 47 | if (Model[i].indexbuffer == null) Model[i].indexbuffer = gl.createBuffer(); 48 | 49 | var BYTESIZE = vertices.BYTES_PER_ELEMENT; 50 | 51 | // Bind vertex buffer to ARRAY_BUFFER 52 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].vertexbuffer); 53 | // Send our vertex data to the buffer using floating point array 54 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 55 | var coords = gl.getAttribLocation(Shader.directionalProgram, "a_Position"); 56 | gl.vertexAttribPointer(coords, 3, gl.FLOAT, false, 0, 0); 57 | gl.enableVertexAttribArray(coords); // Enable it 58 | // We're done; now we have to unbind the buffer 59 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 60 | 61 | // Bind colorbuffer to ARRAY_BUFFER 62 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].colorbuffer); 63 | // Send our vertex data to the buffer using floating point array 64 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 65 | var col = gl.getAttribLocation(Shader.directionalProgram, "a_Color"); 66 | gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0); 67 | gl.enableVertexAttribArray(col); // Enable it 68 | // We're done; now we have to unbind the buffer 69 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 70 | 71 | // Bind texturebuffer to ARRAY_BUFFER 72 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].texturebuffer); 73 | // Send our texture image data to the buffer using floating point array 74 | gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); 75 | var uv = gl.getAttribLocation(Shader.directionalProgram, "a_Texture"); 76 | gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0); 77 | gl.enableVertexAttribArray(uv); // Enable it 78 | // We're done; now we have to unbind the buffer (optional but probably a good idea) 79 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 80 | 81 | // Bind normalbuffer to ARRAY_BUFFER 82 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].normalbuffer); 83 | // Send our vertex data to the buffer using floating point array 84 | gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); 85 | var n = gl.getAttribLocation(Shader.directionalProgram, "a_Normal"); 86 | gl.vertexAttribPointer(n, 3, gl.FLOAT, false, 0, 0); 87 | gl.enableVertexAttribArray(n); // Enable it 88 | // We're done; now we have to unbind the buffer 89 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 90 | 91 | // Bind indices to ELEMENT_ARRAY_BUFFER 92 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Model[i].indexbuffer); 93 | // Send index (indices) data to this buffer 94 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 95 | } -------------------------------------------------------------------------------- /model4.js: -------------------------------------------------------------------------------- 1 | var MAX_MODELS = 16; 2 | 3 | window.ModelsLoaded = false; 4 | 5 | window.ref_arrayMDL = new Array(); 6 | 7 | window.current_Model_ID = 0; 8 | 9 | function ModelData() { 10 | this.vertexbuffer = null; //gl.createBuffer(); 11 | this.colorbuffer = null; //gl.createBuffer(); 12 | this.texturebuffer = null; //gl.createBuffer(); 13 | this.normalbuffer = null; //gl.createBuffer(); 14 | this.indexbuffer = null; //gl.createBuffer(); 15 | } 16 | 17 | var Model = new Array(); 18 | 19 | for (var i = 0; i < MAX_MODELS; i++) 20 | Model[i] = new ModelData(); 21 | 22 | function LoadModels() 23 | { 24 | LoadPLY("boxes.ply"); 25 | LoadPLY("sphere.ply"); 26 | } 27 | 28 | // Bind model for rasterization; 29 | // Assumes model vertex data is fully loaded 30 | function BindModel(model_ID) 31 | { 32 | var i = model_ID; 33 | 34 | var vertices = window.ref_arrayMDL[i][0]; // Get vertex data from loaded model 35 | var colors = window.ref_arrayMDL[i][1]; 36 | var uvs = window.ref_arrayMDL[i][2]; 37 | var normals = window.ref_arrayMDL[i][3]; 38 | var indices = window.ref_arrayMDL[i][4]; 39 | 40 | // set global pointer to this model's indices 41 | model_indices = window.ref_arrayMDL[i][4]; 42 | 43 | if (Model[i].vertexbuffer == null) Model[i].vertexbuffer = gl.createBuffer(); 44 | if (Model[i].colorbuffer == null) Model[i].colorbuffer = gl.createBuffer(); 45 | if (Model[i].texturebuffer == null) Model[i].texturebuffer = gl.createBuffer(); 46 | if (Model[i].normalbuffer == null) Model[i].normalbuffer = gl.createBuffer(); 47 | if (Model[i].indexbuffer == null) Model[i].indexbuffer = gl.createBuffer(); 48 | 49 | var BYTESIZE = vertices.BYTES_PER_ELEMENT; 50 | 51 | // Bind vertex buffer to ARRAY_BUFFER 52 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].vertexbuffer); 53 | // Send our vertex data to the buffer using floating point array 54 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 55 | var coords = gl.getAttribLocation(Shader.directionalProgram, "a_Position"); 56 | gl.vertexAttribPointer(coords, 3, gl.FLOAT, false, 0, 0); 57 | gl.enableVertexAttribArray(coords); // Enable it 58 | // We're done; now we have to unbind the buffer 59 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 60 | 61 | // Bind colorbuffer to ARRAY_BUFFER 62 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].colorbuffer); 63 | // Send our vertex data to the buffer using floating point array 64 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 65 | var col = gl.getAttribLocation(Shader.directionalProgram, "a_Color"); 66 | gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0); 67 | gl.enableVertexAttribArray(col); // Enable it 68 | // We're done; now we have to unbind the buffer 69 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 70 | 71 | // Bind texturebuffer to ARRAY_BUFFER 72 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].texturebuffer); 73 | // Send our texture image data to the buffer using floating point array 74 | gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); 75 | var uv = gl.getAttribLocation(Shader.directionalProgram, "a_Texture"); 76 | gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0); 77 | gl.enableVertexAttribArray(uv); // Enable it 78 | // We're done; now we have to unbind the buffer (optional but probably a good idea) 79 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 80 | 81 | // Bind normalbuffer to ARRAY_BUFFER 82 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].normalbuffer); 83 | // Send our vertex data to the buffer using floating point array 84 | gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); 85 | var n = gl.getAttribLocation(Shader.directionalProgram, "a_Normal"); 86 | gl.vertexAttribPointer(n, 3, gl.FLOAT, false, 0, 0); 87 | gl.enableVertexAttribArray(n); // Enable it 88 | // We're done; now we have to unbind the buffer 89 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 90 | 91 | // Bind indices to ELEMENT_ARRAY_BUFFER 92 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Model[i].indexbuffer); 93 | // Send index (indices) data to this buffer 94 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 95 | } -------------------------------------------------------------------------------- /model5.js: -------------------------------------------------------------------------------- 1 | var MAX_MODELS = 16; 2 | 3 | window.ModelsLoaded = false; 4 | 5 | window.ref_arrayMDL = new Array(); 6 | 7 | window.current_Model_ID = 0; 8 | 9 | function ModelData() { 10 | this.vertexbuffer = null; //gl.createBuffer(); 11 | this.colorbuffer = null; //gl.createBuffer(); 12 | this.texturebuffer = null; //gl.createBuffer(); 13 | this.normalbuffer = null; //gl.createBuffer(); 14 | this.indexbuffer = null; //gl.createBuffer(); 15 | } 16 | 17 | var Model = new Array(); 18 | 19 | for (var i = 0; i < MAX_MODELS; i++) 20 | Model[i] = new ModelData(); 21 | 22 | function LoadModels() 23 | { 24 | LoadPLY("sprite.ply"); 25 | } 26 | 27 | // Bind model for rasterization; 28 | // Assumes model vertex data is fully loaded 29 | function BindModel(model_ID) 30 | { 31 | var i = model_ID; 32 | 33 | var vertices = window.ref_arrayMDL[i][0]; // Get vertex data from loaded model 34 | var colors = window.ref_arrayMDL[i][1]; 35 | var uvs = window.ref_arrayMDL[i][2]; 36 | var normals = window.ref_arrayMDL[i][3]; 37 | var indices = window.ref_arrayMDL[i][4]; 38 | 39 | // set global pointer to this model's indices 40 | model_indices = window.ref_arrayMDL[i][4]; 41 | 42 | if (Model[i].vertexbuffer == null) Model[i].vertexbuffer = gl.createBuffer(); 43 | if (Model[i].colorbuffer == null) Model[i].colorbuffer = gl.createBuffer(); 44 | if (Model[i].texturebuffer == null) Model[i].texturebuffer = gl.createBuffer(); 45 | if (Model[i].normalbuffer == null) Model[i].normalbuffer = gl.createBuffer(); 46 | if (Model[i].indexbuffer == null) Model[i].indexbuffer = gl.createBuffer(); 47 | 48 | var BYTESIZE = vertices.BYTES_PER_ELEMENT; 49 | 50 | // Bind vertex buffer to ARRAY_BUFFER 51 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].vertexbuffer); 52 | // Send our vertex data to the buffer using floating point array 53 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 54 | var coords = gl.getAttribLocation(Shader.directionalProgram, "a_Position"); 55 | gl.vertexAttribPointer(coords, 3, gl.FLOAT, false, 0, 0); 56 | gl.enableVertexAttribArray(coords); // Enable it 57 | // We're done; now we have to unbind the buffer 58 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 59 | 60 | // Bind colorbuffer to ARRAY_BUFFER 61 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].colorbuffer); 62 | // Send our vertex data to the buffer using floating point array 63 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 64 | var col = gl.getAttribLocation(Shader.directionalProgram, "a_Color"); 65 | gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0); 66 | gl.enableVertexAttribArray(col); // Enable it 67 | // We're done; now we have to unbind the buffer 68 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 69 | 70 | // Bind texturebuffer to ARRAY_BUFFER 71 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].texturebuffer); 72 | // Send our texture image data to the buffer using floating point array 73 | gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); 74 | var uv = gl.getAttribLocation(Shader.directionalProgram, "a_Texture"); 75 | gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0); 76 | gl.enableVertexAttribArray(uv); // Enable it 77 | // We're done; now we have to unbind the buffer (optional but probably a good idea) 78 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 79 | 80 | // Bind normalbuffer to ARRAY_BUFFER 81 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].normalbuffer); 82 | // Send our vertex data to the buffer using floating point array 83 | gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); 84 | var n = gl.getAttribLocation(Shader.directionalProgram, "a_Normal"); 85 | gl.vertexAttribPointer(n, 3, gl.FLOAT, false, 0, 0); 86 | gl.enableVertexAttribArray(n); // Enable it 87 | // We're done; now we have to unbind the buffer 88 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 89 | 90 | // Bind indices to ELEMENT_ARRAY_BUFFER 91 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Model[i].indexbuffer); 92 | // Send index (indices) data to this buffer 93 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 94 | } -------------------------------------------------------------------------------- /model6.js: -------------------------------------------------------------------------------- 1 | var MAX_MODELS = 16; 2 | 3 | window.ModelsLoaded = false; 4 | 5 | window.ref_arrayMDL = new Array(); 6 | 7 | window.current_Model_ID = 0; 8 | 9 | function ModelData() { 10 | this.vertexbuffer = null; //gl.createBuffer(); 11 | this.colorbuffer = null; //gl.createBuffer(); 12 | this.texturebuffer = null; //gl.createBuffer(); 13 | this.normalbuffer = null; //gl.createBuffer(); 14 | this.indexbuffer = null; //gl.createBuffer(); 15 | } 16 | 17 | var Model = new Array(); 18 | 19 | for (var i = 0; i < MAX_MODELS; i++) 20 | Model[i] = new ModelData(); 21 | 22 | function LoadModels() 23 | { 24 | LoadPLY("sphere.ply"); 25 | } 26 | 27 | // Bind model for rasterization; 28 | // Assumes model vertex data is fully loaded 29 | function BindModel(model_ID) 30 | { 31 | var i = model_ID; 32 | 33 | var vertices = window.ref_arrayMDL[i][0]; // Get vertex data from loaded model 34 | var colors = window.ref_arrayMDL[i][1]; 35 | var uvs = window.ref_arrayMDL[i][2]; 36 | var normals = window.ref_arrayMDL[i][3]; 37 | var indices = window.ref_arrayMDL[i][4]; 38 | 39 | // set global pointer to this model's indices 40 | model_indices = window.ref_arrayMDL[i][4]; 41 | 42 | if (Model[i].vertexbuffer == null) Model[i].vertexbuffer = gl.createBuffer(); 43 | if (Model[i].colorbuffer == null) Model[i].colorbuffer = gl.createBuffer(); 44 | if (Model[i].texturebuffer == null) Model[i].texturebuffer = gl.createBuffer(); 45 | if (Model[i].normalbuffer == null) Model[i].normalbuffer = gl.createBuffer(); 46 | if (Model[i].indexbuffer == null) Model[i].indexbuffer = gl.createBuffer(); 47 | 48 | var BYTESIZE = vertices.BYTES_PER_ELEMENT; 49 | 50 | // Bind vertex buffer to ARRAY_BUFFER 51 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].vertexbuffer); 52 | // Send our vertex data to the buffer using floating point array 53 | gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 54 | var coords = gl.getAttribLocation(Shader.directionalProgram, "a_Position"); 55 | gl.vertexAttribPointer(coords, 3, gl.FLOAT, false, 0, 0); 56 | gl.enableVertexAttribArray(coords); // Enable it 57 | // We're done; now we have to unbind the buffer 58 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 59 | 60 | // Bind colorbuffer to ARRAY_BUFFER 61 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].colorbuffer); 62 | // Send our vertex data to the buffer using floating point array 63 | gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 64 | var col = gl.getAttribLocation(Shader.directionalProgram, "a_Color"); 65 | gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0); 66 | gl.enableVertexAttribArray(col); // Enable it 67 | // We're done; now we have to unbind the buffer 68 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 69 | 70 | // Bind texturebuffer to ARRAY_BUFFER 71 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].texturebuffer); 72 | // Send our texture image data to the buffer using floating point array 73 | gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW); 74 | var uv = gl.getAttribLocation(Shader.directionalProgram, "a_Texture"); 75 | gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0); 76 | gl.enableVertexAttribArray(uv); // Enable it 77 | // We're done; now we have to unbind the buffer (optional but probably a good idea) 78 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 79 | 80 | // Bind normalbuffer to ARRAY_BUFFER 81 | gl.bindBuffer(gl.ARRAY_BUFFER, Model[i].normalbuffer); 82 | // Send our vertex data to the buffer using floating point array 83 | gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); 84 | var n = gl.getAttribLocation(Shader.directionalProgram, "a_Normal"); 85 | gl.vertexAttribPointer(n, 3, gl.FLOAT, false, 0, 0); 86 | gl.enableVertexAttribArray(n); // Enable it 87 | // We're done; now we have to unbind the buffer 88 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 89 | 90 | // Bind indices to ELEMENT_ARRAY_BUFFER 91 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Model[i].indexbuffer); 92 | // Send index (indices) data to this buffer 93 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 94 | } -------------------------------------------------------------------------------- /mouse.js: -------------------------------------------------------------------------------- 1 | window.clicked = false; 2 | var MouseControls = function() 3 | { 4 | this.x = 0; 5 | this.y = 0; 6 | var that = this; 7 | this.Initialize = function(element) 8 | { 9 | $(element).on("mousemove", function(event) { 10 | that.x = event.pageX - $(element).offset().left; 11 | that.y = event.pageY - $(element).offset().top; 12 | }); 13 | $(element).on("click", function(e) { 14 | if (!e) var e = event; 15 | e.preventDefault(); 16 | that.x = e.clientX - $(element).offset().left; 17 | that.y = e.clientY - $(element).offset().top; 18 | window.clicked = true; 19 | }); 20 | } 21 | } 22 | 23 | window.Mouse = null; 24 | 25 | function InitializeMouse() 26 | { 27 | window.Mouse = new MouseControls(); 28 | } -------------------------------------------------------------------------------- /primitives.js: -------------------------------------------------------------------------------- 1 | function makeCube() { 2 | 3 | return new Float32Array([ 4 | 5 | 1.0,-1.0, 1.0, 6 | -1.0,-1.0, 1.0, 7 | -1.0,-1.0,-1.0, 8 | 9 | -1.0, 1.0,-1.0, 10 | -1.0, 1.0, 1.0, 11 | 1.0, 1.0, 1.0, 12 | 13 | 1.0, 1.0,-1.0, 14 | 1.0, 1.0, 1.0, 15 | 1.0,-1.0, 1.0, 16 | 17 | 1.0, 1.0, 1.0, 18 | -1.0, 1.0, 1.0, 19 | -1.0,-1.0, 1.0, 20 | 21 | -1.0,-1.0, 1.0, 22 | -1.0, 1.0, 1.0, 23 | -1.0, 1.0,-1.0, 24 | 25 | 1.0,-1.0,-1.0, 26 | -1.0,-1.0,-1.0, 27 | -1.0, 1.0,-1.0, 28 | 29 | 1.0,-1.0,-1.0, 30 | 1.0,-1.0, 1.0, 31 | -1.0,-1.0,-1.0, 32 | 33 | 1.0, 1.0,-1.0, 34 | -1.0, 1.0,-1.0, 35 | 1.0, 1.0, 1.0, 36 | 37 | 1.0,-1.0,-1.0, 38 | 1.0, 1.0,-1.0, 39 | 1.0,-1.0, 1.0, 40 | 41 | 1.0,-1.0, 1.0, 42 | 1.0, 1.0, 1.0, 43 | -1.0,-1.0, 1.0, 44 | 45 | -1.0,-1.0,-1.0, 46 | -1.0,-1.0, 1.0, 47 | -1.0, 1.0,-1.0, 48 | 49 | 1.0, 1.0,-1.0, 50 | 1.0,-1.0,-1.0, 51 | -1.0, 1.0,-1.0 52 | ] 53 | ); 54 | } 55 | 56 | function makeCubeColors() { 57 | 58 | return new Float32Array([ 59 | 60 | 1.0, 0.0, 0.0, 61 | 1.0, 0.0, 0.0, 62 | 1.0, 1.0, 0.0, 63 | 64 | 1.0, 0.0, 0.0, 65 | 1.0, 1.0, 0.0, 66 | 1.0, 0.0, 0.0, 67 | 68 | 1.0, 0.0, 0.0, 69 | 1.0, 0.0, 0.0, 70 | 1.0, 1.0, 0.0, 71 | 72 | 1.0, 0.0, 0.0, 73 | 1.0, 1.0, 0.0, 74 | 1.0, 0.0, 0.0, 75 | 76 | 1.0, 0.0, 0.0, 77 | 1.0, 0.0, 0.0, 78 | 1.0, 1.0, 0.0, 79 | 80 | 1.0, 0.0, 0.0, 81 | 1.0, 1.0, 0.0, 82 | 1.0, 0.0, 0.0, 83 | 84 | 1.0, 0.0, 0.0, 85 | 1.0, 0.0, 0.0, 86 | 1.0, 1.0, 0.0, 87 | 88 | 1.0, 0.0, 0.0, 89 | 1.0, 1.0, 0.0, 90 | 1.0, 0.0, 0.0, 91 | 92 | 1.0, 0.0, 0.0, 93 | 1.0, 0.0, 0.0, 94 | 1.0, 1.0, 0.0, 95 | 96 | 1.0, 0.0, 0.0, 97 | 1.0, 1.0, 0.0, 98 | 1.0, 0.0, 0.0, 99 | 100 | 1.0, 0.0, 0.0, 101 | 1.0, 0.0, 0.0, 102 | 1.0, 1.0, 0.0, 103 | 104 | 1.0, 0.0, 0.0, 105 | 1.0, 1.0, 0.0, 106 | 1.0, 0.0, 0.0 107 | ] 108 | ); 109 | } 110 | 111 | function makeCubeTextures() { 112 | return new Float32Array([ 113 | 114 | 1.0, 0.0, 115 | 1.0, 1.0, 116 | 0.0, 1.0, 117 | 118 | 1.0, 1.0, 119 | 0.0, 1.0, 120 | 0.0, 0.0, 121 | 122 | 0.0, 1.0, 123 | 0.0, 0.0, 124 | 1.0, 0.0, 125 | 126 | 0.0, 0.0, 127 | 1.0, 0.0, 128 | 1.0, 1.0, 129 | 130 | 1.0, 1.0, 131 | 0.0, 1.0, 132 | 0.0, 0.0, 133 | 134 | 1.0, 0.0, 135 | 1.0, 1.0, 136 | 0.0, 1.0, 137 | 138 | 0.0, 0.0, 139 | 1.0, 0.0, 140 | 0.0, 1.0, 141 | 142 | 1.0, 0.0, 143 | 1.0, 1.0, 144 | 0.0, 0.0, 145 | 146 | 1.0, 1.0, 147 | 0.0, 1.0, 148 | 1.0, 0.0, 149 | 150 | 0.0, 1.0, 151 | 0.0, 0.0, 152 | 1.0, 0.0, 153 | 154 | 1.0, 1.0, 155 | 1.0, 1.0, 156 | 0.0, 0.0, 157 | 158 | 0.0, 0.0, 159 | 1.0, 0.0, 160 | 0.0, 1.0 161 | ] 162 | ); 163 | } -------------------------------------------------------------------------------- /segment.js: -------------------------------------------------------------------------------- 1 | window.int_x = 0; 2 | window.int_y = 0; 3 | 4 | var DONT_INTERSECT = 0; 5 | var COLLINEAR = 1; 6 | var DO_INTERSECT = 2; 7 | 8 | function same_sign(a, b){ return ( ( a * b ) >= 0 ); } 9 | 10 | var Segment = function(x, y, vecx, vecy) 11 | { 12 | this.x = x; 13 | this.y = y; 14 | this.vecx = vecx; 15 | this.vecy = vecy; 16 | 17 | // var that = this; 18 | 19 | this.draw = function(width, color) 20 | { 21 | gfx.beginPath(); 22 | gfx.lineWidth = width; 23 | gfx.moveTo(this.x, this.y); 24 | gfx.lineTo(this.x + this.vecx, this.y + this.vecy); 25 | gfx.strokeStyle = color; 26 | gfx.stroke(); 27 | } 28 | 29 | this.length = function() { 30 | var dx = this.vecx; 31 | var dy = this.vecy; 32 | return Math.sqrt(dx * dx + dy * dy); 33 | } 34 | 35 | this.normal = function() { 36 | var x1 = this.y; 37 | var y1 = this.x + this.vecx; 38 | var y2 = this.x; 39 | var x2 = this.y + this.vecy; 40 | return new Segment(x1, y1, x2-x1, y2-y1); 41 | } 42 | 43 | this.center = function() { 44 | var _x = this.x + this.x + this.vecx; 45 | var _y = this.y + this.y + this.vecy; 46 | _x /= 2; 47 | _y /= 2; 48 | return new Point(_x, _y); 49 | } 50 | 51 | this.unit = function() { 52 | return new Segment(0, 0, this.vecx / this.length(), this.vecy / this.length()); 53 | } 54 | 55 | this.multiply = function(multiplier) 56 | { 57 | return new Segment(0, 0, this.vecx*multiplier, this.vecy*multiplier); 58 | } 59 | 60 | this.project = function( seg_onto ) 61 | { 62 | var vec = new Vector(this.vecx, this.vecy); 63 | var onto = new Vector(seg_onto.vecx, seg_onto.vecy); 64 | var d = onto.dot(onto); 65 | if (0 < d) { 66 | var dp = vec.dot(onto); 67 | var multiplier = dp / d; 68 | var rx = onto.x * multiplier; 69 | var ry = onto.y * multiplier; 70 | return new Point(rx, ry); 71 | } 72 | return new Point(0, 0); 73 | } 74 | 75 | this.intersect = function( segment ) 76 | { 77 | // a 78 | var x1 = this.x; 79 | var y1 = this.y; 80 | var x2 = this.x + this.vecx; 81 | var y2 = this.y + this.vecy; 82 | 83 | // b 84 | var x3 = segment.x; 85 | var y3 = segment.y; 86 | var x4 = segment.x + segment.vecx; 87 | var y4 = segment.y + segment.vecy; 88 | 89 | var a1, a2, b1, b2, c1, c2; 90 | var r1, r2 , r3, r4; 91 | var denom, offset, num; 92 | 93 | a1 = y2 - y1; 94 | b1 = x1 - x2; 95 | c1 = (x2 * y1) - (x1 * y2); 96 | 97 | r3 = ((a1 * x3) + (b1 * y3) + c1); 98 | r4 = ((a1 * x4) + (b1 * y4) + c1); 99 | 100 | if ((r3 != 0) && (r4 != 0) && same_sign(r3, r4)) 101 | return DONT_INTERSECT; 102 | 103 | a2 = y4 - y3; // Compute a2, b2, c2 104 | b2 = x3 - x4; 105 | c2 = (x4 * y3) - (x3 * y4); 106 | r1 = (a2 * x1) + (b2 * y1) + c2; // Compute r1 and r2 107 | r2 = (a2 * x2) + (b2 * y2) + c2; 108 | 109 | if ((r1 != 0) && (r2 != 0) && (same_sign(r1, r2))) 110 | return DONT_INTERSECT; 111 | 112 | denom = (a1 * b2) - (a2 * b1); //Line segments intersect: compute intersection point. 113 | 114 | if (denom == 0) 115 | return COLLINEAR; 116 | 117 | if (denom < 0) offset = -denom / 2; else offset = denom / 2; 118 | 119 | num = (b1 * c2) - (b2 * c1); 120 | if (num < 0) window.int_x = (num - offset) / denom; else window.int_x = (num + offset) / denom; 121 | 122 | num = (a2 * c1) - (a1 * c2); 123 | if (num < 0) window.int_y = ( num - offset) / denom; else window.int_y = (num + offset) / denom; 124 | 125 | return DO_INTERSECT; 126 | } 127 | } 128 | 129 | function vec2ang(x,y) 130 | { 131 | angleInRadians = Math.atan2(y, x); 132 | angleInDegrees = (angleInRadians / Math.PI) * 180.0; 133 | return angleInDegrees; 134 | } 135 | 136 | function ang2vec(angle) 137 | { 138 | var radians = angle * (Math.PI / 180.0); 139 | var x = Math.cos(radians); 140 | var y = Math.sin(radians); 141 | 142 | var a = new Segment(0, 0, x, y); 143 | var u = a.normal().unit(); 144 | 145 | return [u.vecx, u.vecy]; 146 | } -------------------------------------------------------------------------------- /shaders.js: -------------------------------------------------------------------------------- 1 | /* 2 | CC3.0 Distribution License 3 | 4 | NOTE: This software is released under CC3.0 creative commons 5 | If using in own projects please give credit to the original author, 6 | 7 | * By linking to my tutorial site: 8 | 9 | * http://www.webgltutorials.org 10 | 11 | * Thanks :-) 12 | 13 | */ 14 | 15 | // Set to true once all shaders finished loading asyncronously 16 | window.ShadersFinishedLoading = false; 17 | 18 | class ShaderProgramManager { // Globally available shader programs 19 | constructor() { 20 | this.standardProgram = null; // Draw static point in the middle 21 | this.globalDrawingProgram = null; // Draw point defined by global parameters 22 | this.vertexColorProgram = null; // Draw static point in the middle 23 | this.textureProgram = null; 24 | this.lightProgram = null; 25 | this.moveProgram = null; 26 | } 27 | } 28 | 29 | var Shader = new ShaderProgramManager(); // Create shader program manager 30 | 31 | var a_Position = null; 32 | 33 | function CreateShaderPrograms(gl) { 34 | 35 | // Draw point at x = 0, y = 0, z = 0 36 | var v = 'void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1); gl_PointSize = 10.0; }'; 37 | var f = 'void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }'; // Red 38 | Shader.standardProgram = InitializeShader(gl, v, f); 39 | 40 | // Draw a point at an arbitrary location, determined globally by the JavaScript application 41 | v = 'attribute vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; }'; 42 | f = 'void main() { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); }'; // Green 43 | Shader.globalDrawingProgram = InitializeShader(gl, v, f); 44 | } 45 | 46 | var shaders = [ // Enumerate shader filenames 47 | "standard", // this assumes "standard.vs" & "standard.frag" are available in "shaders" directory 48 | "global", // this assumes "global.vs" & "global.frag" are available in "shaders" directory 49 | "vertex", 50 | "texture", 51 | "move", 52 | "light", 53 | "directional", 54 | "point", 55 | "sprite", 56 | "spritesheet" 57 | ]; 58 | 59 | var shader_name = [ // Enumerate shader program names 60 | "standardProgram", 61 | "globalDrawingProgram", 62 | "vertexColorProgram", 63 | "textureMapProgram", 64 | "moveProgram", 65 | "lightProgram", 66 | "directionalProgram", // directional light 67 | "pointProgram", // point light 68 | "spriteProgram", 69 | "spritesheetProgram" 70 | ]; 71 | 72 | // Scroll through the list, loading shader pairs 73 | function CreateShadersFromFile( gl ) { 74 | 75 | var cache_Bust = new Date().getTime()/1000|0; 76 | 77 | for (i in shaders) 78 | LoadShader(gl, shader_name[i], shaders[i] + ".vs?v=" + cache_Bust, shaders[i] + ".frag?v=" + cache_Bust, 79 | i // pass in the index of the currently loading shader, 80 | // this way we can determine when last shader has finished loading 81 | ); 82 | } 83 | 84 | function LoadShader(gl, shaderName, filenameVertexShader, filenameFragmentShader, index) 85 | { 86 | // Folder where your shaders are located 87 | var ShaderDirectory = "shaders"; 88 | 89 | var filename_vs = ShaderDirectory + "/" + filenameVertexShader; 90 | var filename_fs = ShaderDirectory + "/" + filenameFragmentShader; 91 | 92 | var v = ""; // Placeholders for the shader pair 93 | var f = ""; 94 | 95 | // Now execute two Ajax calls in a row to grab the vertex and 96 | // fragment shaders from the file location 97 | 98 | var xmlhttp = new XMLHttpRequest(); 99 | 100 | // Execute first Ajax call to load the vertex shader 101 | xmlhttp.onreadystatechange = function() { 102 | if (xmlhttp.readyState == XMLHttpRequest.DONE) { 103 | if (xmlhttp.status == 200) { 104 | 105 | v = xmlhttp.responseText; 106 | 107 | // Execute second Ajax call to load the fragment shader 108 | var xmlhttp2 = new XMLHttpRequest(); 109 | xmlhttp2.onreadystatechange = function () { 110 | if (xmlhttp2.readyState == XMLHttpRequest.DONE) 111 | if (xmlhttp2.status == 200) { 112 | 113 | f = xmlhttp2.responseText; 114 | 115 | Shader[ shaderName ] = InitializeShader(gl, v, f, filenameVertexShader, filenameFragmentShader); 116 | // Is this the last shader in the queue? 117 | // If so, execute "all shaders loaded" event 118 | if (index == shaders.length - 1) { 119 | 120 | setTimeout(function () { 121 | 122 | window.ShadersFinishedLoading = true; 123 | 124 | }, 500); // .5 sec delay 125 | } 126 | } 127 | }; 128 | xmlhttp2.open("GET", filename_fs, true); 129 | xmlhttp2.send(); 130 | } 131 | } 132 | }; 133 | xmlhttp.open("GET", filename_vs, true); 134 | xmlhttp.send(); 135 | } 136 | 137 | function InitializeShader(gl, source_vs, source_frag, fv, ff) 138 | { 139 | ErrorMessage = "Initializing Shader Program: <" + fv + ">, <" + ff + ">"; 140 | 141 | var shader_vs = gl.createShader(gl.VERTEX_SHADER); 142 | var shader_frag = gl.createShader(gl.FRAGMENT_SHADER); 143 | 144 | gl.shaderSource(shader_vs, source_vs); 145 | gl.shaderSource(shader_frag, source_frag); 146 | 147 | gl.compileShader(shader_vs); 148 | gl.compileShader(shader_frag); 149 | 150 | var error = false; 151 | 152 | // Compile vertex shader 153 | if (!gl.getShaderParameter(shader_vs, gl.COMPILE_STATUS)) { 154 | ErrorMessage += gl.getShaderInfoLog(shader_vs); 155 | error = true; 156 | } 157 | 158 | // Compile fragment shader 159 | if (!gl.getShaderParameter(shader_frag, gl.COMPILE_STATUS)) { 160 | ErrorMessage += gl.getShaderInfoLog(shader_frag); 161 | error = true; 162 | } 163 | 164 | // Create shader program consisting of shader pair 165 | program = gl.createProgram(); 166 | 167 | var ret = gl.getProgramInfoLog(program); 168 | 169 | if (ret != "") 170 | ErrorMessage += ret; 171 | 172 | // Attach shaders to the program; these methods do not have a return value 173 | gl.attachShader(program, shader_vs); 174 | gl.attachShader(program, shader_frag); 175 | 176 | // Link the program - returns 0 if an error occurs 177 | if (gl.linkProgram(program) == 0) { 178 | ErrorMessage += "\r\ngl.linkProgram(program) failed with error code 0."; 179 | error = true; 180 | } 181 | 182 | if (error) { 183 | console.log(ErrorMessage + ' ...failed to initialize shader.'); 184 | return false; 185 | } else { 186 | console.log(ErrorMessage + ' ...shader successfully created.'); 187 | return program; // Return created program 188 | } 189 | } -------------------------------------------------------------------------------- /shaders/directional.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 Model; 10 | uniform mat4 View; 11 | 12 | uniform vec3 rgb; 13 | 14 | void main() { 15 | 16 | gl_FragColor = color * vec4(rgb[0], rgb[1], rgb[2], 1) * texture2D(image, vec2(texture.s, texture.t)); 17 | } 18 | -------------------------------------------------------------------------------- /shaders/directional.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | attribute vec4 a_Normal; 6 | 7 | varying vec4 color; 8 | varying vec2 texture; 9 | 10 | uniform mat4 Projection; 11 | uniform mat4 Model; 12 | uniform mat4 View; 13 | 14 | uniform vec3 rgb; 15 | uniform vec3 LightPosition; 16 | uniform vec3 LightDirection; 17 | uniform vec3 LightColor; 18 | 19 | void main() 20 | { 21 | gl_Position = Projection * View * Model * a_Position; 22 | 23 | vec3 normal = normalize(vec3(a_Normal)); 24 | 25 | float NdotL = max(dot(LightDirection, normal), 1.0); 26 | 27 | vec4 diffuse = vec4(0.7, 0.7, 0.85, 0.4); 28 | 29 | color = diffuse * a_Color * vec4(LightColor, 1) * NdotL; 30 | 31 | texture = a_Texture; 32 | } -------------------------------------------------------------------------------- /shaders/global.frag: -------------------------------------------------------------------------------- 1 | void main() 2 | { 3 | gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 4 | } 5 | -------------------------------------------------------------------------------- /shaders/global.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | 4 | void main() 5 | { 6 | gl_Position = a_Position; gl_PointSize = 10.0; 7 | } 8 | -------------------------------------------------------------------------------- /shaders/light.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 Model; 10 | uniform mat4 View; 11 | 12 | uniform vec3 rgb; 13 | 14 | void main() { 15 | 16 | gl_FragColor = vec4(rgb[0], rgb[1], rgb[2], 1) * texture2D(image, vec2(texture.s, texture.t)); 17 | } 18 | -------------------------------------------------------------------------------- /shaders/light.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | 6 | varying vec4 color; 7 | varying vec2 texture; 8 | 9 | uniform mat4 Projection; 10 | uniform mat4 Model; 11 | uniform mat4 View; 12 | 13 | uniform vec3 rgb; 14 | 15 | void main() 16 | { 17 | gl_Position = Projection * View * Model * a_Position; 18 | 19 | color = a_Color; 20 | 21 | texture = a_Texture; 22 | } -------------------------------------------------------------------------------- /shaders/move.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 Model; 10 | uniform mat4 View; 11 | 12 | void main() { 13 | 14 | gl_FragColor = texture2D(image, vec2(texture.s, texture.t)); 15 | } 16 | -------------------------------------------------------------------------------- /shaders/move.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | 6 | varying vec4 color; 7 | varying vec2 texture; 8 | 9 | uniform mat4 Projection; 10 | uniform mat4 Model; 11 | uniform mat4 View; 12 | 13 | void main() 14 | { 15 | gl_Position = Projection * View * Model * a_Position; 16 | 17 | color = a_Color; 18 | 19 | texture = a_Texture; 20 | } -------------------------------------------------------------------------------- /shaders/point.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 Model; 10 | uniform mat4 View; 11 | 12 | uniform vec3 rgb; 13 | 14 | void main() { 15 | 16 | gl_FragColor = color * texture2D(image, vec2(texture.s, texture.t)); 17 | } 18 | -------------------------------------------------------------------------------- /shaders/point.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | attribute vec4 a_Normal; 6 | 7 | varying vec4 color; 8 | varying vec2 texture; 9 | 10 | uniform mat4 Projection; 11 | uniform mat4 Model; 12 | uniform mat4 View; 13 | 14 | uniform vec3 rgb; 15 | uniform vec3 LightPosition; 16 | uniform vec3 LightDirection; 17 | uniform vec3 LightColor; 18 | 19 | void main() 20 | { 21 | gl_Position = Projection * View * Model * a_Position; 22 | 23 | vec3 normal = normalize(vec3(a_Normal)); 24 | 25 | vec4 vert_Position = Model * a_Position; 26 | 27 | vec3 calc_LightDirection = normalize(LightPosition - vec3(vert_Position)); 28 | 29 | float NdotL = max(dot(calc_LightDirection, normal), 0.0); 30 | 31 | vec4 ambient = vec4(0.3, 0.3, 0.3, 0.15); 32 | 33 | vec4 diffuse = vec4(0.7, 0.7, 0.7, 0.15); 34 | 35 | color = (ambient + diffuse) * a_Color * vec4(LightColor, 1) * NdotL; 36 | 37 | texture = a_Texture; 38 | } -------------------------------------------------------------------------------- /shaders/sprite.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 Model; 10 | uniform mat4 View; 11 | 12 | uniform vec3 rgb; 13 | 14 | void main() { 15 | 16 | gl_FragColor = 17 | vec4(rgb[0], rgb[1], rgb[2], 1) * 18 | texture2D(image, vec2(texture.s, texture.t)); 19 | } 20 | -------------------------------------------------------------------------------- /shaders/sprite.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | 6 | uniform sampler2D image; 7 | 8 | varying vec4 color; 9 | varying vec2 texture; 10 | 11 | uniform mat4 Projection; 12 | uniform mat4 Model; 13 | uniform mat4 View; 14 | 15 | uniform vec3 rgb; 16 | 17 | void main() 18 | { 19 | gl_Position = Projection * View * Model * a_Position; 20 | 21 | color = a_Color; 22 | 23 | texture = a_Texture; 24 | } -------------------------------------------------------------------------------- /shaders/spritesheet.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 Model; 10 | uniform mat4 View; 11 | 12 | uniform vec3 rgb; 13 | 14 | uniform float column; 15 | uniform float row; 16 | uniform float sheet_size; 17 | uniform float sprite_size; 18 | 19 | void main() { 20 | 21 | // step is 0.0625f when sheet_size is 16.0 22 | float step = 1.0 / sheet_size; 23 | 24 | vec2 tex = vec2(step * column + texture.s * step, 25 | step * row + texture.t * step); 26 | 27 | gl_FragColor = 28 | vec4(rgb[0], rgb[1], rgb[2], 1) * 29 | texture2D(image, tex); 30 | } 31 | -------------------------------------------------------------------------------- /shaders/spritesheet.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | 6 | uniform sampler2D image; 7 | 8 | varying vec4 color; 9 | varying vec2 texture; 10 | 11 | uniform mat4 Projection; 12 | uniform mat4 Model; 13 | uniform mat4 View; 14 | 15 | uniform vec3 rgb; 16 | 17 | void main() 18 | { 19 | gl_Position = Projection * View * Model * a_Position; 20 | 21 | color = a_Color; 22 | 23 | texture = a_Texture; 24 | } -------------------------------------------------------------------------------- /shaders/standard.frag: -------------------------------------------------------------------------------- 1 | void main() { 2 | gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 3 | } 4 | -------------------------------------------------------------------------------- /shaders/standard.vs: -------------------------------------------------------------------------------- 1 | attribute vec4 a_Position; 2 | 3 | void main() 4 | { 5 | gl_Position = a_Position; 6 | } -------------------------------------------------------------------------------- /shaders/texture.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform sampler2D image; 4 | 5 | varying vec4 color; 6 | varying vec2 texture; 7 | 8 | uniform mat4 Projection; 9 | uniform mat4 ModelView; 10 | 11 | void main() { 12 | 13 | gl_FragColor = texture2D(image, vec2(texture.s, texture.t)); 14 | } 15 | -------------------------------------------------------------------------------- /shaders/texture.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | attribute vec2 a_Texture; 5 | 6 | varying vec4 color; 7 | varying vec2 texture; 8 | 9 | uniform mat4 Projection; 10 | uniform mat4 ModelView; 11 | 12 | void main() 13 | { 14 | gl_Position = Projection * ModelView * a_Position; 15 | 16 | color = a_Color; 17 | 18 | texture = a_Texture; 19 | } -------------------------------------------------------------------------------- /shaders/vertex.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | varying vec4 color; 3 | void main() { 4 | gl_FragColor = color; 5 | } 6 | -------------------------------------------------------------------------------- /shaders/vertex.vs: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | attribute vec4 a_Position; 3 | attribute vec4 a_Color; 4 | 5 | varying vec4 color; 6 | 7 | void main() 8 | { 9 | gl_Position = a_Position; 10 | 11 | color = a_Color; 12 | } 13 | -------------------------------------------------------------------------------- /starfield.php: -------------------------------------------------------------------------------- 1 | 15 | 16 | Starfield Demo 17 | 18 | 19 | 20 | 113 | 114 | -------------------------------------------------------------------------------- /texture.js: -------------------------------------------------------------------------------- 1 | var url = "http://localhost/tigrisgames.com"; 2 | 3 | window.ResourceId = 0; 4 | window.TotalTextures = 0; 5 | window.Ltimer = null; 6 | 7 | // Do not output sprite name, width & height to console -- if true. 8 | var SilentLoad = false; 9 | 10 | // Texture class 11 | var Texture = function(fn) { 12 | 13 | var that = this; 14 | var root = this; 15 | 16 | this.filename = fn; // Image filename path 17 | this.width = 0; 18 | this.height = 0; 19 | 20 | this.image = null; // JavaScript image 21 | this.texture = gl.createTexture(); // Create WebGL texture object 22 | 23 | // Primary image loader function 24 | this.load = function(filename) { 25 | that.image = new Image(); 26 | that.image.onload = function(event) { 27 | 28 | var file = fn.split("/"); 29 | 30 | that.width = this.width; 31 | that.height = this.height; 32 | 33 | gl.bindTexture(gl.TEXTURE_2D, that.texture); 34 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, that.image); 35 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 36 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 37 | //gl.generateMipmap(gl.TEXTURE_2D); 38 | gl.bindTexture(gl.TEXTURE_2D, null); 39 | 40 | if (!SilentLoad) 41 | console.log("Loaded texture image (" + that.width + "x" + that.height + ") filename = " + file[file.length-1]); 42 | 43 | window.ResourceId++; // increase resource counter 44 | }; 45 | that.image.src = filename; // Assign resource to "src" 46 | return that; // Return a link to loaded object 47 | }; 48 | 49 | // Using the function load() above... Load texture, if filename was supplied 50 | if (fn != undefined && fn != "" && fn != null) 51 | this.load(fn); 52 | else 53 | console.log("Unable to load sprite. Filename '" + 54 | fn + "' is undefined or null."); 55 | } 56 | 57 | function LoadTextures() { 58 | 59 | console.log("LoadTextures(); -- Loading textures"); 60 | 61 | var xmlhttp = new XMLHttpRequest(); 62 | xmlhttp.onreadystatechange = function() { // Make an HTTP request to load texture images 63 | if (xmlhttp.readyState == XMLHttpRequest.DONE) { 64 | if (xmlhttp.status == 200) { 65 | var msg = xmlhttp.responseText; 66 | console.log(msg); 67 | if (JSON.parse(msg) != undefined) { 68 | 69 | var json = JSON.parse(msg); 70 | 71 | // Memorize total number of resources -- for progress bar calculation: 72 | var resourceNumber = window.TotalTextures = json.length; 73 | 74 | console.log("window.TotalTextures = " + window.TotalTextures); 75 | 76 | // Check until all textures are loaded in memory; only then initialize WebGL 77 | // Start only if there are textures to load 78 | if (window.Ltimer == null && window.TotalTextures != 0) { 79 | window.Ltimer = setInterval(function () { 80 | if (window.ResourceId >= window.TotalTextures) { 81 | 82 | console.log("All (" + window.TotalTextures + ") textures loaded"); 83 | 84 | // Now check if shaders have finished loading 85 | if (window.ShadersFinishedLoading) { 86 | 87 | console.log("window.ShadersFinishedLoading = true"); 88 | 89 | // Check if PLY models have finished loading 90 | if (window.ModelsLoaded) { 91 | 92 | console.log("window.ModelsLoaded = true"); 93 | 94 | // Prevent this timer from ticking again after all textures are loaded 95 | clearInterval(window.Ltimer); 96 | window.Ltimer = null; 97 | 98 | // Both textures and shaders finished loading; 99 | // Start main rendering loop 100 | window.webGLResourcesLoaded(); 101 | } 102 | } 103 | } 104 | }, 0); 105 | } 106 | 107 | for (var i = 0; i < json.length; i++) { 108 | console.log("Loading texture <" + json[i] + ">"); 109 | var cache_Bust = new Date().getTime()/1000|0; 110 | var appropriateName = json[i].split(".")[0]; 111 | window.LoadingFileName = json[i]; 112 | window[appropriateName] = new Texture(url + "/fx/textures/" + window.LoadingFileName + "?v=" + cache_Bust); 113 | } 114 | } 115 | } else console.log("*** unable to open "); 116 | } 117 | } 118 | xmlhttp.open("GET", "getTextures.php", true); 119 | xmlhttp.send(); 120 | } -------------------------------------------------------------------------------- /textures/brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imtumbleweed/WebGLTutorials/f6c6247bf75d384ee0d644bc40ac3373125661a5/textures/brick.png -------------------------------------------------------------------------------- /textures/fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imtumbleweed/WebGLTutorials/f6c6247bf75d384ee0d644bc40ac3373125661a5/textures/fire.png -------------------------------------------------------------------------------- /textures/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imtumbleweed/WebGLTutorials/f6c6247bf75d384ee0d644bc40ac3373125661a5/textures/font.png -------------------------------------------------------------------------------- /textures/road.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imtumbleweed/WebGLTutorials/f6c6247bf75d384ee0d644bc40ac3373125661a5/textures/road.png -------------------------------------------------------------------------------- /textures/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imtumbleweed/WebGLTutorials/f6c6247bf75d384ee0d644bc40ac3373125661a5/textures/star.png -------------------------------------------------------------------------------- /vector3.js: -------------------------------------------------------------------------------- 1 | function Vector(x, y, z) { 2 | this.x = x || 0; 3 | this.y = y || 0; 4 | this.z = z || 0; 5 | } 6 | 7 | Vector.prototype = { 8 | negative: function() { 9 | return new Vector(-this.x, -this.y, -this.z); 10 | }, 11 | add: function(v) { 12 | if (v instanceof Vector) 13 | return new Vector(this.x + v.x, this.y + v.y, this.z + v.z); 14 | else 15 | return new Vector(this.x + v, this.y + v, this.z + v); 16 | }, 17 | subtract: function(v) { 18 | if (v instanceof Vector) 19 | return new Vector(this.x - v.x, this.y - v.y, this.z - v.z); 20 | else 21 | return new Vector(this.x - v, this.y - v, this.z - v); 22 | }, 23 | multiply: function(v) { 24 | if (v instanceof Vector) 25 | return new Vector(this.x * v.x, this.y * v.y, this.z * v.z); 26 | else 27 | return new Vector(this.x * v, this.y * v, this.z * v); 28 | }, 29 | divide: function(v) { 30 | if (v instanceof Vector) 31 | return new Vector(this.x / v.x, this.y / v.y, this.z / v.z); 32 | else 33 | return new Vector(this.x / v, this.y / v, this.z / v); 34 | }, 35 | equals: function(v) { 36 | return this.x == v.x && this.y == v.y && this.z == v.z; 37 | }, 38 | dot: function(v) { 39 | return this.x * v.x + this.y * v.y + this.z * v.z; 40 | }, 41 | cross: function(v) { 42 | return new Vector( 43 | this.y * v.z - this.z * v.y, 44 | this.z * v.x - this.x * v.z, 45 | this.x * v.y - this.y * v.x 46 | ); 47 | }, 48 | length: function() { 49 | return Math.sqrt(this.dot(this)); 50 | }, 51 | unit: function() { 52 | return this.divide(this.length()); 53 | }, 54 | min: function() { 55 | return Math.min(Math.min(this.x, this.y), this.z); 56 | }, 57 | max: function() { 58 | return Math.max(Math.max(this.x, this.y), this.z); 59 | }, 60 | toAngles: function() { 61 | return { 62 | theta: Math.atan2(this.z, this.x), 63 | phi: Math.asin(this.y / this.length()) 64 | }; 65 | }, 66 | angleTo: function(a) { 67 | return Math.acos(this.dot(a) / (this.length() * a.length())); 68 | }, 69 | toArray: function(n) { 70 | return [this.x, this.y, this.z].slice(0, n || 3); 71 | }, 72 | clone: function() { 73 | return new Vector(this.x, this.y, this.z); 74 | }, 75 | init: function(x, y, z) { 76 | this.x = x; this.y = y; this.z = z; 77 | return this; 78 | } 79 | }; 80 | 81 | Vector.negative = function(a, b) { 82 | b.x = -a.x; b.y = -a.y; b.z = -a.z; 83 | return b; 84 | }; 85 | Vector.add = function(a, b, c) { 86 | if (b instanceof Vector) 87 | { c.x = a.x + b.x; c.y = a.y + b.y; c.z = a.z + b.z; } 88 | else { c.x = a.x + b; c.y = a.y + b; c.z = a.z + b; } 89 | return c; 90 | }; 91 | Vector.subtract = function(a, b, c) { 92 | if (b instanceof Vector) 93 | { c.x = a.x - b.x; c.y = a.y - b.y; c.z = a.z - b.z; } 94 | else { c.x = a.x - b; c.y = a.y - b; c.z = a.z - b; } 95 | return c; 96 | }; 97 | Vector.multiply = function(a, b, c) { 98 | if (b instanceof Vector) 99 | { c.x = a.x * b.x; c.y = a.y * b.y; c.z = a.z * b.z; } 100 | else { c.x = a.x * b; c.y = a.y * b; c.z = a.z * b; } 101 | return c; 102 | }; 103 | Vector.divide = function(a, b, c) { 104 | if (b instanceof Vector) 105 | { c.x = a.x / b.x; c.y = a.y / b.y; c.z = a.z / b.z; } 106 | else { c.x = a.x / b; c.y = a.y / b; c.z = a.z / b; } 107 | return c; 108 | }; 109 | Vector.cross = function(a, b, c) { 110 | c.x = a.y * b.z - a.z * b.y; 111 | c.y = a.z * b.x - a.x * b.z; 112 | c.z = a.x * b.y - a.y * b.x; 113 | return c; 114 | }; 115 | Vector.unit = function(a, b) { 116 | var length = a.length(); 117 | b.x = a.x / length; 118 | b.y = a.y / length; 119 | b.z = a.z / length; 120 | return b; 121 | }; 122 | Vector.fromAngles = function(theta, phi) { 123 | return new Vector(Math.cos(theta) * Math.cos(phi), Math.sin(phi), Math.sin(theta) * Math.cos(phi)); 124 | }; 125 | Vector.randomDirection = function() { 126 | return Vector.fromAngles(Math.random() * Math.PI * 2, Math.asin(Math.random() * 2 - 1)); 127 | }; 128 | Vector.min = function(a, b) { 129 | return new Vector(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.min(a.z, b.z)); 130 | }; 131 | Vector.max = function(a, b) { 132 | return new Vector(Math.max(a.x, b.x), Math.max(a.y, b.y), Math.max(a.z, b.z)); 133 | }; 134 | Vector.lerp = function(a, b, fraction) { 135 | return b.subtract(a).multiply(fraction).add(a); 136 | }; 137 | Vector.fromArray = function(a) { 138 | return new Vector(a[0], a[1], a[2]); 139 | }; 140 | Vector.angleBetween = function(a, b) { 141 | return a.angleTo(b); 142 | }; -------------------------------------------------------------------------------- /webgl-quickstart/gl.js: -------------------------------------------------------------------------------- 1 | /* 2 | CC3.0 Distribution License 3 | 4 | NOTE: This software is released under CC3.0 creative commons 5 | If using in own projects please give credit to the original author, 6 | 7 | * By linking to my tutorial site: 8 | 9 | * http://www.webgltutorials.org 10 | 11 | * Thanks :-) 12 | 13 | */ 14 | 15 | // Get WebGL context, if standard is not available; fall back on alternatives 16 | function GetWebGLContext( canvas ) 17 | { 18 | // Standard 19 | return canvas.getContext("webgl") || 20 | 21 | // Alternative; Safari, others 22 | canvas.getContext("experimental-webgl") || 23 | 24 | // Firefox; mozilla 25 | canvas.getContext("moz-webgl") || 26 | 27 | // Last resort; Safari, and maybe others 28 | canvas.getContext("webkit-3d"); 29 | 30 | // Note that "webgl" is not available as of Safari version <= 7.0.3 31 | // So we have to fall back to ambiguous alternatives for it and some other browsers 32 | } 33 | 34 | function InitializeWebGL() 35 | { 36 | // Get a handle to canvas tag 37 | var canvas = document.getElementById("gl"); 38 | 39 | // WebGL rendering context 40 | var gl = null; 41 | 42 | // Array that will store a list of supported extensions 43 | var extensions = null; 44 | 45 | // ! used twice in a row to cast object state to a Boolean value 46 | if (!!window.WebGLRenderingContext == true) 47 | { 48 | // Initialize WebGL rendering context, if available 49 | if ( gl = GetWebGLContext( canvas ) ) 50 | { 51 | console.log("WebGL is initialized."); 52 | 53 | // Ensure OpenGL viewport is resized to match canvas dimensions 54 | gl.viewportWidth = 800;//canvas.width; 55 | gl.viewportHeight = 600;//canvas.height; 56 | 57 | // Output the WebGL rendering context object to console for reference 58 | console.log( gl ); 59 | 60 | // List available extensions 61 | console.log( extensions = gl.getSupportedExtensions() ); 62 | 63 | // Set screen clear color to R, G, B, alpha; where 0.0 is 0% and 1.0 is 100% 64 | gl.clearColor(0.0, 0.0, 0.0, 1.0); 65 | 66 | // Enable color; required for clearing the screen 67 | gl.clear(gl.COLOR_BUFFER_BIT); 68 | 69 | // Clear out the viewport with solid black color 70 | gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 71 | 72 | return gl; 73 | 74 | } 75 | else 76 | console.log("Your browser doesn't support WebGL."); 77 | } 78 | else 79 | console.log("WebGL is supported, but disabled :-("); 80 | } 81 | 82 | function DrawPoint(gl) { 83 | 84 | console.log("DrawPoint(gl)"); 85 | 86 | if (!gl) 87 | return; 88 | 89 | gl.useProgram( Shader.standardProgram ); 90 | gl.drawArrays(gl.POINTS, 0, 1); 91 | } 92 | 93 | function DrawPointUsingGlobalParameters(gl, x, y, z) { 94 | 95 | if (!gl) 96 | return; 97 | 98 | gl.useProgram( Shader.globalDrawingProgram ); // Use the program 99 | 100 | var a_Position = gl.getAttribLocation(Shader.globalDrawingProgram, 'a_Position'); 101 | //var alpha = gl.getUniformLocation(Shader.globalDrawingProgram, 'u_Alpha'); 102 | 103 | if (a_Position < 0) 104 | console.log("DrawPointUsingGlobalParameters: Failed to get attribute pointer a_Position."); 105 | else { 106 | // Pass point coordinates using global attribute a_Position from our JavaScript program 107 | gl.vertexAttrib3f(a_Position, x, y, z); 108 | //gl.uniform3f(alpha, 0.2, 0.2, 0.2); 109 | gl.drawArrays(gl.POINTS, 0, 1); 110 | } 111 | } 112 | 113 | var a = undefined; 114 | function DrawPointAtMousePosition(canvas, gl, e) { 115 | 116 | gl.useProgram( Shader.globalDrawingProgram ); // Use the program 117 | 118 | var x = e.clientX; // Get mouse position coordinates from click event object 119 | var y = e.clientY; 120 | 121 | console.log("Mouse x=" + x + ", y=" + y); // Output the coordinates to console 122 | 123 | // Get a pointer to a_Position attribute within the vertex shader 124 | // Note, variable doesn't have to be called 'a_Position' 125 | 126 | if (a == undefined) 127 | a = gl.getAttribLocation(Shader.globalDrawingProgram, 'a_Position'); 128 | 129 | if (a < 0) 130 | console.log("Failed to get attribute pointer a_Position."); 131 | else { 132 | // translate mouse coordinates to WebGL coordinate system 133 | var r = e.target.getBoundingClientRect(); 134 | x = ((x - r.left) - canvas.width / 2) / (canvas.width / 2); 135 | y = (canvas.height / 2 - (y - r.top)) / (canvas.height / 2); 136 | 137 | // Pass point coordinates using global attribute a_Position from our JavaScript program 138 | gl.vertexAttrib3f(a, x, y, 0); 139 | 140 | // Erase background 141 | //gl.clearColor(0.0, 0.0, 0.0, 1.0); 142 | //gl.clear(gl.COLOR_BUFFER_BIT); 143 | 144 | gl.drawArrays(gl.POINTS, 0, 1); 145 | } 146 | } -------------------------------------------------------------------------------- /webgl-quickstart/index.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | Tutorial 2 - Loading shaders from files 18 | 19 | 20 | 21 | 67 | 68 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /webgl-quickstart/shaders.js: -------------------------------------------------------------------------------- 1 | /* 2 | CC3.0 Distribution License 3 | 4 | NOTE: This software is released under CC3.0 creative commons 5 | If using in own projects please give credit to the original author, 6 | 7 | * By linking to my tutorial site: 8 | 9 | * http://www.webgltutorials.org 10 | 11 | * Thanks :-) 12 | 13 | */ 14 | 15 | class ShaderProgramManager { // Globally available shader programs 16 | constructor() { 17 | this.standardProgram = null; // Draw static point in the middle 18 | this.globalDrawingProgram = null; // Draw point defined by global parameters 19 | this.vertexColorProgram = null; // Draw static point in the middle 20 | } 21 | } 22 | 23 | var Shader = new ShaderProgramManager(); // Create shader program manager 24 | 25 | var a_Position = null; 26 | 27 | function CreateShaderPrograms(gl) { 28 | 29 | // Draw point at x = 0, y = 0, z = 0 30 | var v = 'void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1); gl_PointSize = 10.0; }'; 31 | var f = 'void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }'; // Red 32 | Shader.standardProgram = InitializeShader(gl, v, f); 33 | 34 | // Draw a point at an arbitrary location, determined globally by the JavaScript application 35 | v = 'attribute vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; }'; 36 | f = 'void main() { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); }'; // Green 37 | Shader.globalDrawingProgram = InitializeShader(gl, v, f); 38 | } 39 | 40 | var shaders = [ // Enumerate shader filenames 41 | "standard", // this assumes "standard.vs" & "standard.frag" are available in "shaders" directory 42 | "global", // this assumes "global.vs" & "global.frag" are available in "shaders" directory 43 | "vertex" 44 | ]; 45 | 46 | var shader_name = [ // Enumerate shader program names 47 | "standardProgram", 48 | "globalDrawingProgram", 49 | "vertexColorProgram" 50 | ]; 51 | 52 | // Scroll through the list, loading shader pairs 53 | function CreateShadersFromFile( gl ) { 54 | for (i in shaders) 55 | LoadShader(gl, shader_name[i], shaders[i] + ".vs", shaders[i] + ".frag", 56 | i // pass in the index of the currently loading shader, 57 | // this way we can determine when last shader has finished loading 58 | ); 59 | } 60 | 61 | function LoadShader(gl, shaderName, filenameVertexShader, filenameFragmentShader, index) 62 | { 63 | // Folder where your shaders are located 64 | var ShaderDirectory = "shaders"; 65 | 66 | var filename_vs = ShaderDirectory + "/" + filenameVertexShader; 67 | var filename_fs = ShaderDirectory + "/" + filenameFragmentShader; 68 | 69 | var v = ""; // Placeholders for the shader pair 70 | var f = ""; 71 | 72 | // Now execute two Ajax calls in a row to grab the vertex and 73 | // fragment shaders from the file location 74 | 75 | var xmlhttp = new XMLHttpRequest(); 76 | 77 | // Execute first Ajax call to load the vertex shader 78 | xmlhttp.onreadystatechange = function() { 79 | if (xmlhttp.readyState == XMLHttpRequest.DONE) { 80 | if (xmlhttp.status == 200) { 81 | 82 | v = xmlhttp.responseText; 83 | 84 | // Execute second Ajax call to load the fragment shader 85 | var xmlhttp2 = new XMLHttpRequest(); 86 | xmlhttp2.onreadystatechange = function () { 87 | if (xmlhttp2.readyState == XMLHttpRequest.DONE) 88 | if (xmlhttp2.status == 200) { 89 | 90 | f = xmlhttp2.responseText; 91 | 92 | console.log("Initializing Shader Program: " + filename_vs + ", " + filename_fs); 93 | Shader[ shaderName ] = InitializeShader(gl, v, f); 94 | // Is this the last shader in the queue? 95 | // If so, execute "all shaders loaded" event 96 | if (index == shaders.length - 1) 97 | window.webGLResourcesLoaded(); 98 | } 99 | }; 100 | xmlhttp2.open("GET", filename_vs, true); 101 | xmlhttp2.send(); 102 | } 103 | } 104 | }; 105 | xmlhttp.open("GET", filename_vs, true); 106 | xmlhttp.send(); 107 | 108 | /* 109 | $.ajax( { // Load the vertex shader 110 | url : filename_vs, type : "POST", 111 | success : function( msg ) { 112 | v = msg; 113 | 114 | $.ajax( { // Load the corresponding fragment shader 115 | url : filename_fs, type : "POST", 116 | success : function( msg ) { 117 | 118 | f = msg; 119 | 120 | console.log("Initializing Shader Program: " + filename_vs + ", " + filename_fs); 121 | 122 | Shader[ shaderName ] = InitializeShader(gl, v, f); 123 | 124 | // Is this the last shader in the queue? 125 | // If so, execute "all shaders loaded" event 126 | 127 | if (index == shaders.length - 1) 128 | window.webGLResourcesLoaded(); 129 | } 130 | }); 131 | } 132 | }); 133 | */ 134 | } 135 | 136 | function InitializeShader(gl, source_vs, source_frag) 137 | { 138 | //console.log("InitializeShader(...)"); 139 | 140 | var shader_vs = gl.createShader(gl.VERTEX_SHADER); 141 | var shader_frag = gl.createShader(gl.FRAGMENT_SHADER); 142 | 143 | gl.shaderSource(shader_vs, source_vs); 144 | gl.shaderSource(shader_frag, source_frag); 145 | 146 | gl.compileShader(shader_vs); 147 | gl.compileShader(shader_frag); 148 | 149 | var error = false; 150 | 151 | // Compile vertex shader 152 | if (!gl.getShaderParameter(shader_vs, gl.COMPILE_STATUS)) { 153 | alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader_vs)); 154 | error = true; 155 | } 156 | 157 | // Compile fragment shader 158 | if (!gl.getShaderParameter(shader_vs, gl.COMPILE_STATUS)) { 159 | alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader_vs)); 160 | error = true; 161 | } 162 | 163 | // Create shader program consisting of shader pair 164 | program = gl.createProgram(); 165 | 166 | // Attach shaders to the program; these methods do not have a return value 167 | gl.attachShader(program, shader_vs); 168 | gl.attachShader(program, shader_frag); 169 | 170 | // Link the program - returns 0 if an error occurs 171 | if (gl.linkProgram(program) == 0) { 172 | console.log("gl.linkProgram(program) failed with error code 0."); 173 | error = true; 174 | } 175 | 176 | if (error) { 177 | console.log('Failed to initialize shader.'); 178 | return false; 179 | } else { 180 | console.log('Shader successfully created.'); 181 | return program; // Return created program 182 | } 183 | } -------------------------------------------------------------------------------- /webgl-quickstart/shaders/global.frag: -------------------------------------------------------------------------------- 1 | void main() 2 | { 3 | gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 4 | } 5 | -------------------------------------------------------------------------------- /webgl-quickstart/shaders/global.vs: -------------------------------------------------------------------------------- 1 | attribute vec4 a_Position; 2 | 3 | void main() 4 | { 5 | gl_Position = a_Position; gl_PointSize = 10.0; 6 | } 7 | -------------------------------------------------------------------------------- /webgl-quickstart/shaders/standard.frag: -------------------------------------------------------------------------------- 1 | void main() 2 | { 3 | gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 4 | } 5 | -------------------------------------------------------------------------------- /webgl-quickstart/shaders/standard.vs: -------------------------------------------------------------------------------- 1 | void main() 2 | { 3 | gl_Position = vec4(0.0, 0.0, 0.0, 1); 4 | gl_PointSize = 10.0; 5 | } 6 | -------------------------------------------------------------------------------- /webgl-quickstart/starfield.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | Starfield Demo 17 | 18 | 19 | 20 | 113 | 114 | -------------------------------------------------------------------------------- /webgltutorial2.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tutorial 3 - Load shaders from script tags 5 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 | 21 | 49 | 50 | 54 | 55 | 56 | 57 | --------------------------------------------------------------------------------