├── models ├── female02 │ ├── .htaccess │ ├── Female02_bin.bin │ ├── 01_-_Default1noCulling.JPG │ ├── 02_-_Default1noCulling.JPG │ ├── 03_-_Default1noCulling.JPG │ ├── readme.txt │ ├── female02.mtl │ └── Female02_bin.js └── CesiumMan │ ├── CesiumMan.jpg │ └── CesiumMan0.bin ├── images ├── back.jpg ├── left.jpg ├── lena.png ├── top.jpg ├── wall.jpg ├── wood.png ├── 阴影示例.png ├── bottom.jpg ├── camera.jpg ├── front.jpg ├── grass.png ├── marble.jpg ├── metal.png ├── right.jpg ├── stone.png ├── top(1).jpg ├── window.png ├── back(1).jpg ├── bottom(1).jpg ├── brickwall.jpg ├── front(1).jpg ├── left(1).jpg ├── right (2).jpg ├── sky_cloud.jpg ├── awesomeface.png ├── container2.png ├── brick-diffuse.png ├── brick-normals.png ├── normal_mapping.png ├── stone_normal.png ├── brickwall_normal.jpg └── container2_specular.png ├── 视频纹理 ├── test.mp4 └── index.html ├── sample ├── textures │ ├── grass.jpg │ ├── misc.jpg │ └── tree.png └── index.html ├── resources ├── models │ ├── CesiumMan │ │ ├── CesiumMan.jpg │ │ └── CesiumMan0.bin │ ├── killer_whale │ │ └── whale.CYCLES.bin │ └── simpleSkin.gltf ├── webgl-tutorials.css └── webgl-lessons-ui.js ├── 第四章-高级光照 └── 视差贴图.html ├── Web.config ├── 第三章 ├── FrameBuffer_cube.html ├── wireframe.html ├── 实例化.html └── depthTest.html ├── rtsp.html ├── 第二章 ├── LoadModel.html ├── LightingMaps.html ├── 基础光照.html ├── color.html ├── BaseLighting.html ├── MirrorReflect.html └── 光照贴图-镜面光贴图.html ├── 新建文本文档.html ├── 一些比较炫的例子 └── 星系 │ ├── index.html │ └── css │ └── style.css ├── 学习webgl ├── 你好三角形.html └── 纹理.html ├── 第一章 ├── triangle.html ├── texture.html ├── transform.html └── coordinateSystem.html ├── lib ├── cuon-utils.js └── webgl-utils.js ├── _lib └── polygon.js ├── webgl-skinning.html └── 代码库 └── 生成cube.html /models/female02/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | SetOutputFilter DEFLATE 3 | 4 | -------------------------------------------------------------------------------- /images/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/back.jpg -------------------------------------------------------------------------------- /images/left.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/left.jpg -------------------------------------------------------------------------------- /images/lena.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/lena.png -------------------------------------------------------------------------------- /images/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/top.jpg -------------------------------------------------------------------------------- /images/wall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/wall.jpg -------------------------------------------------------------------------------- /images/wood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/wood.png -------------------------------------------------------------------------------- /images/阴影示例.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/阴影示例.png -------------------------------------------------------------------------------- /视频纹理/test.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/视频纹理/test.mp4 -------------------------------------------------------------------------------- /images/bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/bottom.jpg -------------------------------------------------------------------------------- /images/camera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/camera.jpg -------------------------------------------------------------------------------- /images/front.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/front.jpg -------------------------------------------------------------------------------- /images/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/grass.png -------------------------------------------------------------------------------- /images/marble.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/marble.jpg -------------------------------------------------------------------------------- /images/metal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/metal.png -------------------------------------------------------------------------------- /images/right.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/right.jpg -------------------------------------------------------------------------------- /images/stone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/stone.png -------------------------------------------------------------------------------- /images/top(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/top(1).jpg -------------------------------------------------------------------------------- /images/window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/window.png -------------------------------------------------------------------------------- /images/back(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/back(1).jpg -------------------------------------------------------------------------------- /images/bottom(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/bottom(1).jpg -------------------------------------------------------------------------------- /images/brickwall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/brickwall.jpg -------------------------------------------------------------------------------- /images/front(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/front(1).jpg -------------------------------------------------------------------------------- /images/left(1).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/left(1).jpg -------------------------------------------------------------------------------- /images/right (2).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/right (2).jpg -------------------------------------------------------------------------------- /images/sky_cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/sky_cloud.jpg -------------------------------------------------------------------------------- /images/awesomeface.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/awesomeface.png -------------------------------------------------------------------------------- /images/container2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/container2.png -------------------------------------------------------------------------------- /images/brick-diffuse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/brick-diffuse.png -------------------------------------------------------------------------------- /images/brick-normals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/brick-normals.png -------------------------------------------------------------------------------- /images/normal_mapping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/normal_mapping.png -------------------------------------------------------------------------------- /images/stone_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/stone_normal.png -------------------------------------------------------------------------------- /sample/textures/grass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/sample/textures/grass.jpg -------------------------------------------------------------------------------- /sample/textures/misc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/sample/textures/misc.jpg -------------------------------------------------------------------------------- /sample/textures/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/sample/textures/tree.png -------------------------------------------------------------------------------- /images/brickwall_normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/brickwall_normal.jpg -------------------------------------------------------------------------------- /images/container2_specular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/images/container2_specular.png -------------------------------------------------------------------------------- /models/CesiumMan/CesiumMan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/models/CesiumMan/CesiumMan.jpg -------------------------------------------------------------------------------- /models/CesiumMan/CesiumMan0.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/models/CesiumMan/CesiumMan0.bin -------------------------------------------------------------------------------- /models/female02/Female02_bin.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/models/female02/Female02_bin.bin -------------------------------------------------------------------------------- /resources/models/CesiumMan/CesiumMan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/resources/models/CesiumMan/CesiumMan.jpg -------------------------------------------------------------------------------- /models/female02/01_-_Default1noCulling.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/models/female02/01_-_Default1noCulling.JPG -------------------------------------------------------------------------------- /models/female02/02_-_Default1noCulling.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/models/female02/02_-_Default1noCulling.JPG -------------------------------------------------------------------------------- /models/female02/03_-_Default1noCulling.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/models/female02/03_-_Default1noCulling.JPG -------------------------------------------------------------------------------- /resources/models/CesiumMan/CesiumMan0.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/resources/models/CesiumMan/CesiumMan0.bin -------------------------------------------------------------------------------- /resources/models/killer_whale/whale.CYCLES.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liubgithub/learnopengl/HEAD/resources/models/killer_whale/whale.CYCLES.bin -------------------------------------------------------------------------------- /models/female02/readme.txt: -------------------------------------------------------------------------------- 1 | Model by Reallusion iClone from Google 3d Warehouse: 2 | 3 | http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1 -------------------------------------------------------------------------------- /第四章-高级光照/视差贴图.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /视频纹理/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL Demo 6 | 7 | 8 | 9 |

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Web.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /第三章/FrameBuffer_cube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frame Buffer Object 6 | 7 | 8 | 9 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /rtsp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | WebGL - Skinning 8 | 9 | 10 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /第二章/LoadModel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 载入模型 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 27 | 28 | 29 |

32 | 33 | 34 | -------------------------------------------------------------------------------- /新建文本文档.html: -------------------------------------------------------------------------------- 1 | 2 |

3 |

4 |

26 |

27 |

28 | 29 | 30 | -------------------------------------------------------------------------------- /models/female02/female02.mtl: -------------------------------------------------------------------------------- 1 | # Material Count: 6 2 | newmtl FrontColorNoCullingID__01_-_Default1noCulli 3 | Ns 154.901961 4 | Ka 0.000000 0.000000 0.000000 5 | Kd 0.800000 0.800000 0.800000 6 | Ks 0.165000 0.165000 0.165000 7 | Ni 1.000000 8 | d 1.000000 9 | illum 2 10 | map_Kd 01_-_Default1noCulling.JPG 11 | 12 | 13 | newmtl _02_-_Default1noCulli__02_-_Default1noCulli 14 | Ns 154.901961 15 | Ka 0.000000 0.000000 0.000000 16 | Kd 0.640000 0.640000 0.640000 17 | Ks 0.165000 0.165000 0.165000 18 | Ni 1.000000 19 | d 1.000000 20 | illum 2 21 | map_Kd 02_-_Default1noCulling.JPG 22 | 23 | 24 | newmtl _01_-_Default1noCulli__01_-_Default1noCulli 25 | Ns 154.901961 26 | Ka 0.000000 0.000000 0.000000 27 | Kd 0.640000 0.640000 0.640000 28 | Ks 0.165000 0.165000 0.165000 29 | Ni 1.000000 30 | d 1.000000 31 | illum 2 32 | map_Kd 01_-_Default1noCulling.JPG 33 | 34 | 35 | newmtl FrontColorNoCullingID__03_-_Default1noCulli 36 | Ns 154.901961 37 | Ka 0.000000 0.000000 0.000000 38 | Kd 0.800000 0.800000 0.800000 39 | Ks 0.165000 0.165000 0.165000 40 | Ni 1.000000 41 | d 1.000000 42 | illum 2 43 | map_Kd 03_-_Default1noCulling.JPG 44 | 45 | 46 | newmtl _03_-_Default1noCulli__03_-_Default1noCulli 47 | Ns 154.901961 48 | Ka 0.000000 0.000000 0.000000 49 | Kd 0.640000 0.640000 0.640000 50 | Ks 0.165000 0.165000 0.165000 51 | Ni 1.000000 52 | d 1.000000 53 | illum 2 54 | map_Kd 03_-_Default1noCulling.JPG 55 | 56 | 57 | newmtl FrontColorNoCullingID__02_-_Default1noCulli 58 | Ns 154.901961 59 | Ka 0.000000 0.000000 0.000000 60 | Kd 0.800000 0.800000 0.800000 61 | Ks 0.165000 0.165000 0.165000 62 | Ni 1.000000 63 | d 1.000000 64 | illum 2 65 | map_Kd 02_-_Default1noCulling.JPG 66 | 67 | 68 | -------------------------------------------------------------------------------- /一些比较炫的例子/星系/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 基于HTML5 WebGL的3D星云动画特效DEMO演示 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 45 | 69 | 70 | 71 | 72 | 73 | 74 |

75 | 76 | 77 |

78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /models/female02/Female02_bin.js: -------------------------------------------------------------------------------- 1 | { 2 | 3 | "metadata" : 4 | { 5 | "formatVersion" : 3.1, 6 | "sourceFile" : "female02.obj", 7 | "generatedBy" : "OBJConverter", 8 | "vertices" : 3274, 9 | "faces" : 6233, 10 | "normals" : 3292, 11 | "uvs" : 4935, 12 | "materials" : 6 13 | }, 14 | 15 | "materials": [ { 16 | "DbgColor" : 15658734, 17 | "DbgIndex" : 0, 18 | "DbgName" : "_03_-_Default1noCulli__03_-_Default1noCulli", 19 | "colorDiffuse" : [0.64, 0.64, 0.64], 20 | "colorSpecular" : [0.165, 0.165, 0.165], 21 | "illumination" : 2, 22 | "mapDiffuse" : "03_-_Default1noCulling.JPG", 23 | "opticalDensity" : 1.0, 24 | "specularCoef" : 154.901961, 25 | "opacity" : 1.0 26 | }, 27 | 28 | { 29 | "DbgColor" : 15597568, 30 | "DbgIndex" : 1, 31 | "DbgName" : "_02_-_Default1noCulli__02_-_Default1noCulli", 32 | "colorDiffuse" : [0.64, 0.64, 0.64], 33 | "colorSpecular" : [0.165, 0.165, 0.165], 34 | "illumination" : 2, 35 | "mapDiffuse" : "02_-_Default1noCulling.JPG", 36 | "opticalDensity" : 1.0, 37 | "specularCoef" : 154.901961, 38 | "opacity" : 1.0 39 | }, 40 | 41 | { 42 | "DbgColor" : 60928, 43 | "DbgIndex" : 2, 44 | "DbgName" : "FrontColorNoCullingID__02_-_Default1noCulli", 45 | "colorDiffuse" : [0.8, 0.8, 0.8], 46 | "colorSpecular" : [0.165, 0.165, 0.165], 47 | "illumination" : 2, 48 | "mapDiffuse" : "02_-_Default1noCulling.JPG", 49 | "opticalDensity" : 1.0, 50 | "specularCoef" : 154.901961, 51 | "opacity" : 1.0 52 | }, 53 | 54 | { 55 | "DbgColor" : 238, 56 | "DbgIndex" : 3, 57 | "DbgName" : "FrontColorNoCullingID__03_-_Default1noCulli", 58 | "colorDiffuse" : [0.8, 0.8, 0.8], 59 | "colorSpecular" : [0.165, 0.165, 0.165], 60 | "illumination" : 2, 61 | "mapDiffuse" : "03_-_Default1noCulling.JPG", 62 | "opticalDensity" : 1.0, 63 | "specularCoef" : 154.901961, 64 | "opacity" : 1.0 65 | }, 66 | 67 | { 68 | "DbgColor" : 15658496, 69 | "DbgIndex" : 4, 70 | "DbgName" : "_01_-_Default1noCulli__01_-_Default1noCulli", 71 | "colorDiffuse" : [0.64, 0.64, 0.64], 72 | "colorSpecular" : [0.165, 0.165, 0.165], 73 | "illumination" : 2, 74 | "mapDiffuse" : "01_-_Default1noCulling.JPG", 75 | "opticalDensity" : 1.0, 76 | "specularCoef" : 154.901961, 77 | "opacity" : 1.0 78 | }, 79 | 80 | { 81 | "DbgColor" : 61166, 82 | "DbgIndex" : 5, 83 | "DbgName" : "FrontColorNoCullingID__01_-_Default1noCulli", 84 | "colorDiffuse" : [0.8, 0.8, 0.8], 85 | "colorSpecular" : [0.165, 0.165, 0.165], 86 | "illumination" : 2, 87 | "mapDiffuse" : "01_-_Default1noCulling.JPG", 88 | "opticalDensity" : 1.0, 89 | "specularCoef" : 154.901961, 90 | "opacity" : 1.0 91 | }], 92 | 93 | "buffers": "Female02_bin.bin" 94 | 95 | } 96 | -------------------------------------------------------------------------------- /学习webgl/你好三角形.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 你好三角形 6 | 7 | 8 | 9 | 70 | 71 | 72 |

75 | 76 | -------------------------------------------------------------------------------- /第一章/triangle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 你好三角形 6 | 7 | 8 | 9 | 70 | 71 | 72 |

75 | 76 | -------------------------------------------------------------------------------- /lib/cuon-utils.js: -------------------------------------------------------------------------------- 1 | // cuon-utils.js (c) 2012 kanda and matsuda 2 | /** 3 | * Create a program object and make current 4 | * @param gl GL context 5 | * @param vshader a vertex shader program (string) 6 | * @param fshader a fragment shader program (string) 7 | * @return true, if the program object was created and successfully made current 8 | */ 9 | function initShaders(gl, vshader, fshader) { 10 | var program = createProgram(gl, vshader, fshader); 11 | if (!program) { 12 | console.log('Failed to create program'); 13 | return false; 14 | } 15 | 16 | gl.useProgram(program); 17 | gl.program = program; 18 | 19 | return true; 20 | } 21 | 22 | /** 23 | * Create the linked program object 24 | * @param gl GL context 25 | * @param vshader a vertex shader program (string) 26 | * @param fshader a fragment shader program (string) 27 | * @return created program object, or null if the creation has failed 28 | */ 29 | function createProgram(gl, vshader, fshader) { 30 | // Create shader object 31 | var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader); 32 | var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader); 33 | if (!vertexShader || !fragmentShader) { 34 | return null; 35 | } 36 | 37 | // Create a program object 38 | var program = gl.createProgram(); 39 | if (!program) { 40 | return null; 41 | } 42 | 43 | // Attach the shader objects 44 | gl.attachShader(program, vertexShader); 45 | gl.attachShader(program, fragmentShader); 46 | 47 | // Link the program object 48 | gl.linkProgram(program); 49 | 50 | // Check the result of linking 51 | var linked = gl.getProgramParameter(program, gl.LINK_STATUS); 52 | if (!linked) { 53 | var error = gl.getProgramInfoLog(program); 54 | console.log('Failed to link program: ' + error); 55 | gl.deleteProgram(program); 56 | gl.deleteShader(fragmentShader); 57 | gl.deleteShader(vertexShader); 58 | return null; 59 | } 60 | return program; 61 | } 62 | 63 | /** 64 | * Create a shader object 65 | * @param gl GL context 66 | * @param type the type of the shader object to be created 67 | * @param source shader program (string) 68 | * @return created shader object, or null if the creation has failed. 69 | */ 70 | function loadShader(gl, type, source) { 71 | // Create shader object 72 | var shader = gl.createShader(type); 73 | if (shader == null) { 74 | console.log('unable to create shader'); 75 | return null; 76 | } 77 | 78 | // Set the shader program 79 | gl.shaderSource(shader, source); 80 | 81 | // Compile the shader 82 | gl.compileShader(shader); 83 | 84 | // Check the result of compilation 85 | var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); 86 | if (!compiled) { 87 | var error = gl.getShaderInfoLog(shader); 88 | console.log('Failed to compile shader: ' + error); 89 | gl.deleteShader(shader); 90 | return null; 91 | } 92 | 93 | return shader; 94 | } 95 | 96 | /** 97 | * Initialize and get the rendering for WebGL 98 | * @param canvas element 99 | * @param opt_debug flag to initialize the context for debugging 100 | * @return the rendering context for WebGL 101 | */ 102 | function getWebGLContext(canvas, opt_debug) { 103 | // Get the rendering context for WebGL 104 | var gl = WebGLUtils.setupWebGL(canvas); 105 | if (!gl) return null; 106 | 107 | // if opt_debug is explicitly false, create the context for debugging 108 | if (arguments.length < 2 || opt_debug) { 109 | gl = WebGLDebugUtils.makeDebugContext(gl); 110 | } 111 | 112 | return gl; 113 | } 114 | -------------------------------------------------------------------------------- /resources/webgl-tutorials.css: -------------------------------------------------------------------------------- 1 | /* Licensed under a BSD license. See ../license.html for license */ 2 | 3 | html { 4 | box-sizing: border-box; 5 | } 6 | *, *:before, *:after { 7 | box-sizing: inherit; 8 | user-select: none; 9 | } 10 | 11 | body { 12 | background-color: #aaa; 13 | font-family: Sans-Serif; 14 | } 15 | 16 | canvas { 17 | background-color: #fff; 18 | border: 1px solid black; 19 | /* NOTE: This size is changed if in iframe - see below '.iframe canvas' */ 20 | width: 800px; 21 | height: 600px; 22 | display: block; 23 | } 24 | 25 | #uiContainer { 26 | position: absolute; 27 | top: 10px; 28 | right: 10px; 29 | z-index: 3; 30 | font-family: monospace; 31 | pointer-events: none; 32 | 33 | text-shadow: 34 | -1px -1px 0 #FFF, 35 | 1px -1px 0 #FFF, 36 | -1px 1px 0 #FFF, 37 | 1px 1px 0 #FFF; 38 | } 39 | #ui { 40 | opacity: 0.8; 41 | } 42 | #ui>div { 43 | pointer-events: none; 44 | } 45 | #ui input, #ui select, #ui option, #ui canvas { 46 | pointer-events: auto; 47 | } 48 | 49 | .gman-slider-label, .gman-widget-label, .gman-checkbox-label { 50 | font-size: small; 51 | min-width: 10em; 52 | text-align: right; 53 | } 54 | .gman-checkbox-label { 55 | pointer-events: auto; 56 | } 57 | .gman-widget-value { 58 | float: right; 59 | font-size: small; 60 | order: 1; 61 | min-width: 3em; 62 | } 63 | 64 | .gman-slider-upper { 65 | height: 1.5em; 66 | } 67 | .gman-slider-outer, .gman-widget-outer { 68 | float: right; 69 | display: flex; 70 | align-items: center; 71 | height: 1.7em; 72 | } 73 | .gman-widget-slider, .gman-widget-checkbox, .gman-widget-select { 74 | opacity: 0.5; 75 | font-size: large; 76 | margin-left: .3em; 77 | margin-right: .3em; 78 | } 79 | .gman-widget-select { 80 | font-size: small; 81 | } 82 | .gman-widget-slider { 83 | min-width: 120px; 84 | } 85 | 86 | 87 | /* styles to apply if in an iframe */ 88 | 89 | html.iframe { 90 | height: 100vh; 91 | } 92 | body.iframe { 93 | width: 100vw; 94 | height: 100vh; 95 | margin: 0; 96 | overflow: hidden; 97 | } 98 | 99 | .iframe>.description { 100 | display: none; 101 | } 102 | .iframe .divcavnas { 103 | width: 100vw; 104 | height: 100vh; 105 | } 106 | .iframe canvas { 107 | width: 100vw; 108 | height: 100vh; 109 | max-width: 100vw; 110 | border: none; 111 | } 112 | 113 | .iframe>#example { 114 | width: 100%; 115 | height: 100%; 116 | } 117 | #ui #rotation>canvas { 118 | background-color: rgba(255, 255, 255, 0.6); 119 | } 120 | #ui { 121 | width: 200px; 122 | } 123 | 124 | .console { 125 | font-family: monospace; 126 | max-height: 50%; 127 | position: fixed; 128 | bottom: 0; 129 | left: 0; 130 | width: 100%; 131 | overflow: auto; 132 | background: #DDD; 133 | } 134 | .console>div { 135 | white-space: pre-wrap; 136 | border-top: 1px solid black; 137 | padding-left: 0.2em; 138 | padding-right: 0.2em; 139 | } 140 | .console>.error { 141 | background: red; 142 | color: white; 143 | } 144 | 145 | .contextlost { 146 | display: flex; 147 | justify-content: center; 148 | align-items: center; 149 | width: 100vw; 150 | height: 100vh; 151 | position: absolute; 152 | left: 0; 153 | top: 0; 154 | background-color: rgba(0, 0, 0, 0.8); 155 | color: white; 156 | z-index: 10000; 157 | } 158 | .contextlost>div { 159 | padding: 1em; 160 | border-radius: 0.5em; 161 | background: red; 162 | color: white; 163 | } 164 | 165 | @media (max-width: 390px) { 166 | pre { 167 | font-size: xx-small !important; 168 | max-width: 300px !important; 169 | } 170 | canvas { 171 | width: 100vw; 172 | } 173 | .iframe canvas { 174 | width: 100vw; 175 | height: 100vh; 176 | border: none; 177 | } 178 | #uiContainer { 179 | top: 120px; 180 | } 181 | .iframe #uiContainer { 182 | top: 10px; 183 | } 184 | } 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /第三章/wireframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 你好三角形 6 | 7 | 8 | 9 | 94 | 95 | 96 |

99 | 100 | -------------------------------------------------------------------------------- /第三章/实例化.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 你好三角形 6 | 7 | 8 | 9 | 103 | 104 | 105 |

106 |

109 |

110 | 111 | -------------------------------------------------------------------------------- /resources/models/simpleSkin.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "scenes" : [ { 3 | "nodes" : [ 0 ] 4 | } ], 5 | 6 | "nodes" : [ { 7 | "skin" : 0, 8 | "mesh" : 0, 9 | "children" : [ 1 ] 10 | }, { 11 | "children" : [ 2 ], 12 | "translation" : [ 0.0, 1.0, 0.0 ] 13 | }, { 14 | "rotation" : [ 0.0, 0.0, 0.0, 1.0 ] 15 | } ], 16 | 17 | "meshes" : [ { 18 | "primitives" : [ { 19 | "attributes" : { 20 | "POSITION" : 1, 21 | "JOINTS_0" : 2, 22 | "WEIGHTS_0" : 3 23 | }, 24 | "indices" : 0 25 | } ] 26 | } ], 27 | 28 | "skins" : [ { 29 | "inverseBindMatrices" : 4, 30 | "joints" : [ 1, 2 ] 31 | } ], 32 | 33 | "animations" : [ { 34 | "channels" : [ { 35 | "sampler" : 0, 36 | "target" : { 37 | "node" : 2, 38 | "path" : "rotation" 39 | } 40 | } ], 41 | "samplers" : [ { 42 | "input" : 5, 43 | "interpolation" : "LINEAR", 44 | "output" : 6 45 | } ] 46 | } ], 47 | 48 | "buffers" : [ { 49 | "uri" : "data:application/gltf-buffer;base64,AAABAAMAAAADAAIAAgADAAUAAgAFAAQABAAFAAcABAAHAAYABgAHAAkABgAJAAgAAAAAAAAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAAAAAD8AAAAAAACAPwAAAD8AAAAAAAAAAAAAgD8AAAAAAACAPwAAgD8AAAAAAAAAAAAAwD8AAAAAAACAPwAAwD8AAAAAAAAAAAAAAEAAAAAAAACAPwAAAEAAAAAA", 50 | "byteLength" : 168 51 | }, { 52 | "uri" : "data:application/gltf-buffer;base64,AAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAABAPwAAgD4AAAAAAAAAAAAAQD8AAIA+AAAAAAAAAAAAAAA/AAAAPwAAAAAAAAAAAAAAPwAAAD8AAAAAAAAAAAAAgD4AAEA/AAAAAAAAAAAAAIA+AABAPwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAA=", 53 | "byteLength" : 320 54 | }, { 55 | "uri" : "data:application/gltf-buffer;base64,AACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAvwAAgL8AAAAAAACAPwAAgD8AAAAAAAAAAAAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAL8AAIC/AAAAAAAAgD8=", 56 | "byteLength" : 128 57 | }, { 58 | "uri" : "data:application/gltf-buffer;base64,AAAAAAAAAD8AAIA/AADAPwAAAEAAACBAAABAQAAAYEAAAIBAAACQQAAAoEAAALBAAAAAAAAAAAAAAAAAAACAPwAAAAAAAAAAkxjEPkSLbD8AAAAAAAAAAPT9ND/0/TQ/AAAAAAAAAAD0/TQ/9P00PwAAAAAAAAAAkxjEPkSLbD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAAAAAAAkxjEvkSLbD8AAAAAAAAAAPT9NL/0/TQ/AAAAAAAAAAD0/TS/9P00PwAAAAAAAAAAkxjEvkSLbD8AAAAAAAAAAAAAAAAAAIA/", 59 | "byteLength" : 240 60 | } ], 61 | 62 | "bufferViews" : [ { 63 | "buffer" : 0, 64 | "byteOffset" : 0, 65 | "byteLength" : 48, 66 | "target" : 34963 67 | }, { 68 | "buffer" : 0, 69 | "byteOffset" : 48, 70 | "byteLength" : 120, 71 | "target" : 34962 72 | }, { 73 | "buffer" : 1, 74 | "byteOffset" : 0, 75 | "byteLength" : 320, 76 | "byteStride" : 16 77 | }, { 78 | "buffer" : 2, 79 | "byteOffset" : 0, 80 | "byteLength" : 128 81 | }, { 82 | "buffer" : 3, 83 | "byteOffset" : 0, 84 | "byteLength" : 240 85 | } ], 86 | 87 | "accessors" : [ { 88 | "bufferView" : 0, 89 | "byteOffset" : 0, 90 | "componentType" : 5123, 91 | "count" : 24, 92 | "type" : "SCALAR", 93 | "max" : [ 9 ], 94 | "min" : [ 0 ] 95 | }, { 96 | "bufferView" : 1, 97 | "byteOffset" : 0, 98 | "componentType" : 5126, 99 | "count" : 10, 100 | "type" : "VEC3", 101 | "max" : [ 1.0, 2.0, 0.0 ], 102 | "min" : [ 0.0, 0.0, 0.0 ] 103 | }, { 104 | "bufferView" : 2, 105 | "byteOffset" : 0, 106 | "componentType" : 5123, 107 | "count" : 10, 108 | "type" : "VEC4", 109 | "max" : [ 0, 1, 0, 0 ], 110 | "min" : [ 0, 1, 0, 0 ] 111 | }, { 112 | "bufferView" : 2, 113 | "byteOffset" : 160, 114 | "componentType" : 5126, 115 | "count" : 10, 116 | "type" : "VEC4", 117 | "max" : [ 1.0, 1.0, 0.0, 0.0 ], 118 | "min" : [ 0.0, 0.0, 0.0, 0.0 ] 119 | }, { 120 | "bufferView" : 3, 121 | "byteOffset" : 0, 122 | "componentType" : 5126, 123 | "count" : 2, 124 | "type" : "MAT4", 125 | "max" : [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, -0.5, -1.0, 0.0, 1.0 ], 126 | "min" : [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, -0.5, -1.0, 0.0, 1.0 ] 127 | }, { 128 | "bufferView" : 4, 129 | "byteOffset" : 0, 130 | "componentType" : 5126, 131 | "count" : 12, 132 | "type" : "SCALAR", 133 | "max" : [ 5.5 ], 134 | "min" : [ 0.0 ] 135 | }, { 136 | "bufferView" : 4, 137 | "byteOffset" : 48, 138 | "componentType" : 5126, 139 | "count" : 12, 140 | "type" : "VEC4", 141 | "max" : [ 0.0, 0.0, 0.707, 1.0 ], 142 | "min" : [ 0.0, 0.0, -0.707, 0.707 ] 143 | } ], 144 | 145 | "asset" : { 146 | "version" : "2.0" 147 | } 148 | } -------------------------------------------------------------------------------- /学习webgl/纹理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 你好三角形 6 | 7 | 8 | 9 | 109 | 110 | 111 |

114 | 115 | -------------------------------------------------------------------------------- /一些比较炫的例子/星系/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | background-color:#000; 4 | } 5 | canvas{ 6 | cursor:grab; 7 | cursor:-webkit-grab; 8 | cursor:-moz-grab; 9 | } 10 | canvas:active{ 11 | cursor:grabbing; 12 | cursor:-webkit-grabbing; 13 | cursor:-moz-grabbing; 14 | } 15 | a.twitter, a.more{ 16 | position:absolute; 17 | bottom:40px; 18 | right:10px; 19 | font-family:Arial; 20 | color:#33c; 21 | margin-right:-500px; 22 | transition:margin-right 500ms ease; 23 | } 24 | p{ 25 | margin:3px; 26 | position:relative; 27 | font:normal 15px Arial; 28 | } 29 | p.shadow{ 30 | text-shadow:1px 1px 2px #000 ; 31 | } 32 | div.layout{ 33 | top:-250px; 34 | width:100%; 35 | position:absolute; 36 | transition:top 500ms ease; 37 | } 38 | #instruction{ 39 | z-index:1; 40 | color:#f90; 41 | font-family:Arial; 42 | padding:9px 0 5px 0; 43 | background-color:darkslategrey; 44 | top:100%; 45 | width:50%; 46 | position:absolute; 47 | left:25%; 48 | opacity:.8; 49 | border-radius:0px 0px 100px 100px; 50 | text-align:center; 51 | transition:all 500ms ease; 52 | } 53 | #good-person{ 54 | cursor:pointer; 55 | color:#f90; 56 | font-family:Arial; 57 | padding:9px 0 5px 0; 58 | background-color:darkslategrey; 59 | bottom:-50px; 60 | box-shadow:0px -2px 4px black inset; 61 | width:50%; 62 | position:absolute; 63 | left:25%; 64 | opacity:.8; 65 | border-radius:100px 100px 0px 0px ; 66 | text-align:center; 67 | transition:all 500ms ease; 68 | } 69 | #info{ 70 | border:solid 4px #444; 71 | border-top:none; 72 | border-radius:0px 0px 10px 10px; 73 | z-index:2; 74 | box-shadow:0px 5px 5px black ; 75 | color:#aaa; 76 | font-family:Arial; 77 | position:relative; 78 | text-align:center; 79 | padding:1px; 80 | top:0px; 81 | width:50%; 82 | min-width:500px; 83 | margin:auto; 84 | background:linear-gradient(-78deg ,#222 23%, #446 39%, #222 45%,#222 52%, #334 55%, #222 57%); 85 | } 86 | span.black{ 87 | width:3%; 88 | height:7%; 89 | background:black; 90 | position:absolute; 91 | left:-1%; 92 | box-shadow:-2px 0px 5px #222 inset; 93 | } 94 | span.right{ 95 | position:absolute; 96 | left:98%; 97 | box-shadow:2px 0px 5px #222 inset; 98 | } 99 | span.one{top:10%} 100 | span.two{top:19%} 101 | span.three{top:28%} 102 | span.four{top:37%} 103 | p.positionning{ 104 | width:50%; 105 | background:#000; 106 | height:2px; 107 | text-align:left; 108 | margin:10px auto; 109 | } 110 | #timeline{ 111 | height:2px; 112 | width:0%; 113 | position:absolute; 114 | top:0%; 115 | } 116 | .scanning{ 117 | background:#f90; 118 | /*animation:scan 8s linear;*/ /* way faster on mobile without that*/ 119 | } 120 | @keyframes scan{ 121 | 0%{ 122 | width:0%; 123 | box-shadow:0px 0px 20px 5px #f90; 124 | } 125 | 100%{ 126 | width:100%; 127 | box-shadow:0px 0px 20px 5px #f90; 128 | } 129 | } 130 | .waiting{ 131 | background:#3c4; 132 | /*animation:wait 4s infinite;*/ /*same*/ 133 | } 134 | @keyframes wait{ 135 | 0%{ 136 | width:100%; 137 | box-shadow:0px 0px 20px 3px #3c4; 138 | } 139 | 50%{ 140 | width:100%; 141 | box-shadow:0px 0px 0px 0px #3c4; 142 | } 143 | 100%{ 144 | width:100%; 145 | box-shadow:0px 0px 20px 3px #3c4; 146 | } 147 | } 148 | .warning{ 149 | background:#f50; 150 | animation:warn 1s infinite; 151 | } 152 | @keyframes warn{ 153 | 0%{ 154 | width:100%; 155 | box-shadow:0px 0px 0px 0px #f50; 156 | } 157 | 50%{ 158 | width:100%; 159 | box-shadow:0px 0px 20px 3px #f50; 160 | } 161 | 100%{ 162 | width:100%; 163 | box-shadow:0px 0px 0px 0px #f50; 164 | } 165 | } 166 | span.eye{ 167 | width:40px; 168 | height:40px; 169 | background:-webkit-radial-gradient(orange 0% , red 20%, black 60%, #555 61%); 170 | background:-moz-radial-gradient(orange 0% , red 20%, black 60%, #555 61%); 171 | background:-ms-radial-gradient(orange 0% , red 20%, black 60%, #555 61%); 172 | background:-o-radial-gradient(orange 0% , red 20%, black 60%, #555 61%); 173 | border-radius:50%; 174 | position:absolute; 175 | left:47px; 176 | top:7px; 177 | } 178 | span.metal{ 179 | font:bold 10px Arial; 180 | width:40px; 181 | height:40px; 182 | background:-webkit-radial-gradient(#777 15%,#888 35%, #666 50%,#888 55%,#555 65%); 183 | background:-moz-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%); 184 | background:-ms-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%); 185 | background:-o-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%); 186 | border-radius:50%; 187 | box-shadow:0px 0px 15px 3px black; 188 | position:absolute; 189 | right:47px; 190 | top:7px; 191 | color:#222; 192 | } 193 | .clic{ 194 | animation:clic .2s linear 2 alternate; 195 | } 196 | @keyframes clic{ 197 | 0%{box-shadow:0px 0px 15px 3px black} 198 | 100%{box-shadow:0px 0px 15px 3px green} 199 | } 200 | span.metal:after{ 201 | position:relative; 202 | content:'ABORT'; 203 | text-align:center; 204 | width:100%; 205 | top:14px 206 | } 207 | .abort{ 208 | animation:aborting .4s linear infinite alternate; 209 | } 210 | @keyframes aborting{ 211 | 0%{color:#222;} 212 | 100%{color:red;} 213 | } 214 | #log{ 215 | font:normal 15px Courier; 216 | border-radius:10px; 217 | height:36px; 218 | padding:3px 15px; 219 | background:black; 220 | } 221 | #howmuch { 222 | top:20%; 223 | height:71%; 224 | width:58px; 225 | position:absolute; 226 | text-align:center; 227 | border:solid 4px #444; 228 | border-left:none; 229 | border-radius:0px 10px 10px 0px; 230 | background:#222; 231 | padding:2px; 232 | left:-100px; 233 | transition:left 500ms ease; 234 | } 235 | #good{ 236 | top:15%; 237 | color:#590; 238 | font:bold 15px Arial; 239 | left:1px; 240 | } 241 | #bad{ 242 | font:bold 15px Arial; 243 | color:#a11; 244 | position:absolute; 245 | bottom:22%; 246 | left:4px; 247 | } 248 | #gauge { 249 | position:absolute; 250 | top:50%; 251 | left:11px; 252 | border-top: 4px solid transparent; 253 | border-bottom: 4px solid transparent; 254 | border-left: 19px solid #444; 255 | border-right: 19px solid #444; 256 | width:2px; 257 | transition:top 2s ease; 258 | } 259 | #bg{ 260 | width:40px; 261 | height:40%; 262 | background:black; 263 | position:absolute; 264 | top:30%; 265 | left:11px; 266 | } 267 | p.counter-title{ 268 | color:#aaa; 269 | font:normal 10px Arial; 270 | } 271 | #destroyed{ 272 | position:absolute; 273 | bottom:0; 274 | left:-2px; 275 | } 276 | p.counter{ 277 | width:40px; 278 | height:40px; 279 | left:7px; 280 | border-radius:50%; 281 | border:solid 1px #555; 282 | position:absolute; 283 | font:bold 37px Arial; 284 | color:#aaa; 285 | background:#222; 286 | } 287 | #destroyedresult{ 288 | bottom:30px; 289 | } 290 | p.change{ 291 | animation:changing 2s linear; 292 | } 293 | @keyframes changing{ 294 | 0%{ 295 | background:#ccc; 296 | } 297 | 100%{ 298 | background:#222; 299 | } 300 | } -------------------------------------------------------------------------------- /第一章/texture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 纹理 6 | 7 | 8 | 9 | 165 | 166 | 167 |

170 | 171 | -------------------------------------------------------------------------------- /sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Babylon.js sample code 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 40 | 41 | 42 |

43 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /lib/webgl-utils.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2010, Google Inc. 3 | * All rights reserved. 4 | * 5 | * Redistribution and use in source and binary forms, with or without 6 | * modification, are permitted provided that the following conditions are 7 | * met: 8 | * 9 | * * Redistributions of source code must retain the above copyright 10 | * notice, this list of conditions and the following disclaimer. 11 | * * Redistributions in binary form must reproduce the above 12 | * copyright notice, this list of conditions and the following disclaimer 13 | * in the documentation and/or other materials provided with the 14 | * distribution. 15 | * * Neither the name of Google Inc. nor the names of its 16 | * contributors may be used to endorse or promote products derived from 17 | * this software without specific prior written permission. 18 | * 19 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 20 | * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 21 | * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 22 | * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 23 | * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 24 | * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 25 | * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 26 | * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 27 | * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28 | * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | */ 31 | 32 | 33 | /** 34 | * @fileoverview This file contains functions every webgl program will need 35 | * a version of one way or another. 36 | * 37 | * Instead of setting up a context manually it is recommended to 38 | * use. This will check for success or failure. On failure it 39 | * will attempt to present an approriate message to the user. 40 | * 41 | * gl = WebGLUtils.setupWebGL(canvas); 42 | * 43 | * For animated WebGL apps use of setTimeout or setInterval are 44 | * discouraged. It is recommended you structure your rendering 45 | * loop like this. 46 | * 47 | * function render() { 48 | * window.requestAnimationFrame(render, canvas); 49 | * 50 | * // do rendering 51 | * ... 52 | * } 53 | * render(); 54 | * 55 | * This will call your rendering function up to the refresh rate 56 | * of your display but will stop rendering if your app is not 57 | * visible. 58 | */ 59 | 60 | WebGLUtils = function() { 61 | 62 | /** 63 | * Creates the HTLM for a failure message 64 | * @param {string} canvasContainerId id of container of th 65 | * canvas. 66 | * @return {string} The html. 67 | */ 68 | var makeFailHTML = function(msg) { 69 | return '' + 70 | '

' + msg + '

'; 71 | return '' + 72 | '' + 73 | '

' + 74 | '

' + 75 | '

' + msg + '

' + 76 | '

' + 77 | '

'; 78 | }; 79 | 80 | /** 81 | * Mesasge for getting a webgl browser 82 | * @type {string} 83 | */ 84 | var GET_A_WEBGL_BROWSER = '' + 85 | 'This page requires a browser that supports WebGL.
' + 86 | 'Click here to upgrade your browser.'; 87 | 88 | /** 89 | * Mesasge for need better hardware 90 | * @type {string} 91 | */ 92 | var OTHER_PROBLEM = '' + 93 | "It doesn't appear your computer can support WebGL.
" + 94 | 'Click here for more information.'; 95 | 96 | /** 97 | * Creates a webgl context. If creation fails it will 98 | * change the contents of the container of the