├── .gitignore ├── lesson05 ├── nehe.gif ├── thumb.png ├── webgl-utils.js └── index.html ├── lesson09 ├── star.gif ├── thumb.png └── webgl-utils.js ├── lesson10 ├── mud.gif ├── thumb.png ├── world.txt └── webgl-utils.js ├── lesson11 ├── moon.gif ├── thumb.png ├── sphere-latitude.odg ├── sphere-latitude.png ├── sphere-longitude.odg ├── sphere-longitude.png ├── sphere-triangles.png ├── sphere-triangle-stitching.odg ├── sphere-triangle-stitching.png └── webgl-utils.js ├── lesson12 ├── moon.gif ├── crate.gif ├── thumb.png └── webgl-utils.js ├── lesson13 ├── moon.gif ├── crate.gif ├── thumb.png ├── point-lighting-in-middle.odg ├── point-lighting-in-middle.png └── webgl-utils.js ├── lesson16 ├── moon.gif ├── crate.gif ├── thumb.png ├── macbook.3DS ├── macbook.blend ├── ObjToJSON.html └── webgl-utils.js ├── example03 ├── smoke.gif ├── particles-01-noenable.html ├── particles-01.html ├── particles-02.html └── particles-03.html ├── lesson00 ├── thumb.png └── old-examples.txt ├── lesson01 ├── static.png ├── thumb.png └── index.html ├── lesson02 ├── static.png ├── thumb.png ├── simple-rendering-pipeline.odg ├── simple-rendering-pipeline.png └── index.html ├── lesson03 ├── thumb.png ├── webgl-utils.js └── index.html ├── lesson04 ├── thumb.png └── webgl-utils.js ├── lesson06 ├── crate.gif ├── thumb.png └── webgl-utils.js ├── lesson07 ├── crate.gif ├── point.png ├── thumb.png ├── directional.png ├── directional_vs_point.odg ├── directional_vs_point.png └── webgl-utils.js ├── lesson08 ├── glass.gif ├── thumb.png └── webgl-utils.js ├── lesson14 ├── earth.jpg ├── thumb.png ├── arroway.de_metal+structure+06_d100_flat.jpg └── webgl-utils.js ├── lesson15 ├── earth.jpg ├── thumb.png ├── earth-specular.gif ├── earth-specular.pdn └── webgl-utils.js ├── example01 ├── README.txt └── index.html ├── LICENSE.txt ├── index.html ├── README.txt └── example02 ├── webgl-utils.js └── glMatrix-0.9.5.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | Thumbs.db 2 | *.blend1 3 | .c9settings.xml -------------------------------------------------------------------------------- /lesson05/nehe.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson05/nehe.gif -------------------------------------------------------------------------------- /lesson09/star.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson09/star.gif -------------------------------------------------------------------------------- /lesson10/mud.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson10/mud.gif -------------------------------------------------------------------------------- /lesson11/moon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/moon.gif -------------------------------------------------------------------------------- /lesson12/moon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson12/moon.gif -------------------------------------------------------------------------------- /lesson13/moon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson13/moon.gif -------------------------------------------------------------------------------- /lesson16/moon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson16/moon.gif -------------------------------------------------------------------------------- /example03/smoke.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/example03/smoke.gif -------------------------------------------------------------------------------- /lesson00/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson00/thumb.png -------------------------------------------------------------------------------- /lesson01/static.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson01/static.png -------------------------------------------------------------------------------- /lesson01/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson01/thumb.png -------------------------------------------------------------------------------- /lesson02/static.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson02/static.png -------------------------------------------------------------------------------- /lesson02/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson02/thumb.png -------------------------------------------------------------------------------- /lesson03/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson03/thumb.png -------------------------------------------------------------------------------- /lesson04/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson04/thumb.png -------------------------------------------------------------------------------- /lesson05/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson05/thumb.png -------------------------------------------------------------------------------- /lesson06/crate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson06/crate.gif -------------------------------------------------------------------------------- /lesson06/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson06/thumb.png -------------------------------------------------------------------------------- /lesson07/crate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson07/crate.gif -------------------------------------------------------------------------------- /lesson07/point.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson07/point.png -------------------------------------------------------------------------------- /lesson07/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson07/thumb.png -------------------------------------------------------------------------------- /lesson08/glass.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson08/glass.gif -------------------------------------------------------------------------------- /lesson08/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson08/thumb.png -------------------------------------------------------------------------------- /lesson09/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson09/thumb.png -------------------------------------------------------------------------------- /lesson10/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson10/thumb.png -------------------------------------------------------------------------------- /lesson11/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/thumb.png -------------------------------------------------------------------------------- /lesson12/crate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson12/crate.gif -------------------------------------------------------------------------------- /lesson12/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson12/thumb.png -------------------------------------------------------------------------------- /lesson13/crate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson13/crate.gif -------------------------------------------------------------------------------- /lesson13/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson13/thumb.png -------------------------------------------------------------------------------- /lesson14/earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson14/earth.jpg -------------------------------------------------------------------------------- /lesson14/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson14/thumb.png -------------------------------------------------------------------------------- /lesson15/earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson15/earth.jpg -------------------------------------------------------------------------------- /lesson15/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson15/thumb.png -------------------------------------------------------------------------------- /lesson16/crate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson16/crate.gif -------------------------------------------------------------------------------- /lesson16/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson16/thumb.png -------------------------------------------------------------------------------- /lesson16/macbook.3DS: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson16/macbook.3DS -------------------------------------------------------------------------------- /lesson16/macbook.blend: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson16/macbook.blend -------------------------------------------------------------------------------- /lesson07/directional.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson07/directional.png -------------------------------------------------------------------------------- /lesson00/old-examples.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson00/old-examples.txt -------------------------------------------------------------------------------- /lesson15/earth-specular.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson15/earth-specular.gif -------------------------------------------------------------------------------- /lesson15/earth-specular.pdn: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson15/earth-specular.pdn -------------------------------------------------------------------------------- /lesson11/sphere-latitude.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-latitude.odg -------------------------------------------------------------------------------- /lesson11/sphere-latitude.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-latitude.png -------------------------------------------------------------------------------- /lesson11/sphere-longitude.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-longitude.odg -------------------------------------------------------------------------------- /lesson11/sphere-longitude.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-longitude.png -------------------------------------------------------------------------------- /lesson11/sphere-triangles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-triangles.png -------------------------------------------------------------------------------- /lesson07/directional_vs_point.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson07/directional_vs_point.odg -------------------------------------------------------------------------------- /lesson07/directional_vs_point.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson07/directional_vs_point.png -------------------------------------------------------------------------------- /lesson13/point-lighting-in-middle.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson13/point-lighting-in-middle.odg -------------------------------------------------------------------------------- /lesson13/point-lighting-in-middle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson13/point-lighting-in-middle.png -------------------------------------------------------------------------------- /lesson02/simple-rendering-pipeline.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson02/simple-rendering-pipeline.odg -------------------------------------------------------------------------------- /lesson02/simple-rendering-pipeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson02/simple-rendering-pipeline.png -------------------------------------------------------------------------------- /lesson11/sphere-triangle-stitching.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-triangle-stitching.odg -------------------------------------------------------------------------------- /lesson11/sphere-triangle-stitching.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson11/sphere-triangle-stitching.png -------------------------------------------------------------------------------- /lesson14/arroway.de_metal+structure+06_d100_flat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpjt/webgl-lessons/HEAD/lesson14/arroway.de_metal+structure+06_d100_flat.jpg -------------------------------------------------------------------------------- /example01/README.txt: -------------------------------------------------------------------------------- 1 | A zooming Mandelbrot set in a WebGL canvas, all calculations done on the 2 | graphics hardware using a fragment shader. 3 | 4 | See for more details. -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (C) 2009-2013 Giles Thomas 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGL Lessons 4 | 5 | 6 |

WebGL Lessons

7 | 8 |
    9 |
  1. lesson01
    2. 10 |
  2. lesson02
    3. 11 |
  3. lesson03
    4. 12 |
  4. lesson04
    5. 13 |
  5. lesson05
    6. 14 |
  6. lesson06
    7. 15 |
  7. lesson07
    8. 16 |
  8. lesson08
    9. 17 |
  9. lesson09
    10. 18 |
  10. lesson10
    11. 19 |
  11. lesson11
    12. 20 |
  12. lesson12
    13. 21 |
  13. lesson13
    14. 22 |
  14. lesson14
    15. 23 |
  15. lesson15
    16. 24 |
  16. lesson16
    17. 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /lesson10/world.txt: -------------------------------------------------------------------------------- 1 | 2 | NUMPOLLIES 36 3 | 4 | // Floor 1 5 | -3.0 0.0 -3.0 0.0 6.0 6 | -3.0 0.0 3.0 0.0 0.0 7 | 3.0 0.0 3.0 6.0 0.0 8 | 9 | -3.0 0.0 -3.0 0.0 6.0 10 | 3.0 0.0 -3.0 6.0 6.0 11 | 3.0 0.0 3.0 6.0 0.0 12 | 13 | // Ceiling 1 14 | -3.0 1.0 -3.0 0.0 6.0 15 | -3.0 1.0 3.0 0.0 0.0 16 | 3.0 1.0 3.0 6.0 0.0 17 | -3.0 1.0 -3.0 0.0 6.0 18 | 3.0 1.0 -3.0 6.0 6.0 19 | 3.0 1.0 3.0 6.0 0.0 20 | 21 | // A1 22 | 23 | -2.0 1.0 -2.0 0.0 1.0 24 | -2.0 0.0 -2.0 0.0 0.0 25 | -0.5 0.0 -2.0 1.5 0.0 26 | -2.0 1.0 -2.0 0.0 1.0 27 | -0.5 1.0 -2.0 1.5 1.0 28 | -0.5 0.0 -2.0 1.5 0.0 29 | 30 | // A2 31 | 32 | 2.0 1.0 -2.0 2.0 1.0 33 | 2.0 0.0 -2.0 2.0 0.0 34 | 0.5 0.0 -2.0 0.5 0.0 35 | 2.0 1.0 -2.0 2.0 1.0 36 | 0.5 1.0 -2.0 0.5 1.0 37 | 0.5 0.0 -2.0 0.5 0.0 38 | 39 | // B1 40 | 41 | -2.0 1.0 2.0 2.0 1.0 42 | -2.0 0.0 2.0 2.0 0.0 43 | -0.5 0.0 2.0 0.5 0.0 44 | -2.0 1.0 2.0 2.0 1.0 45 | -0.5 1.0 2.0 0.5 1.0 46 | -0.5 0.0 2.0 0.5 0.0 47 | 48 | // B2 49 | 50 | 2.0 1.0 2.0 2.0 1.0 51 | 2.0 0.0 2.0 2.0 0.0 52 | 0.5 0.0 2.0 0.5 0.0 53 | 2.0 1.0 2.0 2.0 1.0 54 | 0.5 1.0 2.0 0.5 1.0 55 | 0.5 0.0 2.0 0.5 0.0 56 | 57 | // C1 58 | 59 | -2.0 1.0 -2.0 0.0 1.0 60 | -2.0 0.0 -2.0 0.0 0.0 61 | -2.0 0.0 -0.5 1.5 0.0 62 | -2.0 1.0 -2.0 0.0 1.0 63 | -2.0 1.0 -0.5 1.5 1.0 64 | -2.0 0.0 -0.5 1.5 0.0 65 | 66 | // C2 67 | 68 | -2.0 1.0 2.0 2.0 1.0 69 | -2.0 0.0 2.0 2.0 0.0 70 | -2.0 0.0 0.5 0.5 0.0 71 | -2.0 1.0 2.0 2.0 1.0 72 | -2.0 1.0 0.5 0.5 1.0 73 | -2.0 0.0 0.5 0.5 0.0 74 | 75 | // D1 76 | 77 | 2.0 1.0 -2.0 0.0 1.0 78 | 2.0 0.0 -2.0 0.0 0.0 79 | 2.0 0.0 -0.5 1.5 0.0 80 | 2.0 1.0 -2.0 0.0 1.0 81 | 2.0 1.0 -0.5 1.5 1.0 82 | 2.0 0.0 -0.5 1.5 0.0 83 | 84 | // D2 85 | 86 | 2.0 1.0 2.0 2.0 1.0 87 | 2.0 0.0 2.0 2.0 0.0 88 | 2.0 0.0 0.5 0.5 0.0 89 | 2.0 1.0 2.0 2.0 1.0 90 | 2.0 1.0 0.5 0.5 1.0 91 | 2.0 0.0 0.5 0.5 0.0 92 | 93 | // Upper hallway - L 94 | -0.5 1.0 -3.0 0.0 1.0 95 | -0.5 0.0 -3.0 0.0 0.0 96 | -0.5 0.0 -2.0 1.0 0.0 97 | -0.5 1.0 -3.0 0.0 1.0 98 | -0.5 1.0 -2.0 1.0 1.0 99 | -0.5 0.0 -2.0 1.0 0.0 100 | 101 | // Upper hallway - R 102 | 0.5 1.0 -3.0 0.0 1.0 103 | 0.5 0.0 -3.0 0.0 0.0 104 | 0.5 0.0 -2.0 1.0 0.0 105 | 0.5 1.0 -3.0 0.0 1.0 106 | 0.5 1.0 -2.0 1.0 1.0 107 | 0.5 0.0 -2.0 1.0 0.0 108 | 109 | // Lower hallway - L 110 | -0.5 1.0 3.0 0.0 1.0 111 | -0.5 0.0 3.0 0.0 0.0 112 | -0.5 0.0 2.0 1.0 0.0 113 | -0.5 1.0 3.0 0.0 1.0 114 | -0.5 1.0 2.0 1.0 1.0 115 | -0.5 0.0 2.0 1.0 0.0 116 | 117 | // Lower hallway - R 118 | 0.5 1.0 3.0 0.0 1.0 119 | 0.5 0.0 3.0 0.0 0.0 120 | 0.5 0.0 2.0 1.0 0.0 121 | 0.5 1.0 3.0 0.0 1.0 122 | 0.5 1.0 2.0 1.0 1.0 123 | 0.5 0.0 2.0 1.0 0.0 124 | 125 | 126 | // Left hallway - Lw 127 | 128 | -3.0 1.0 0.5 1.0 1.0 129 | -3.0 0.0 0.5 1.0 0.0 130 | -2.0 0.0 0.5 0.0 0.0 131 | -3.0 1.0 0.5 1.0 1.0 132 | -2.0 1.0 0.5 0.0 1.0 133 | -2.0 0.0 0.5 0.0 0.0 134 | 135 | // Left hallway - Hi 136 | 137 | -3.0 1.0 -0.5 1.0 1.0 138 | -3.0 0.0 -0.5 1.0 0.0 139 | -2.0 0.0 -0.5 0.0 0.0 140 | -3.0 1.0 -0.5 1.0 1.0 141 | -2.0 1.0 -0.5 0.0 1.0 142 | -2.0 0.0 -0.5 0.0 0.0 143 | 144 | // Right hallway - Lw 145 | 146 | 3.0 1.0 0.5 1.0 1.0 147 | 3.0 0.0 0.5 1.0 0.0 148 | 2.0 0.0 0.5 0.0 0.0 149 | 3.0 1.0 0.5 1.0 1.0 150 | 2.0 1.0 0.5 0.0 1.0 151 | 2.0 0.0 0.5 0.0 0.0 152 | 153 | // Right hallway - Hi 154 | 155 | 3.0 1.0 -0.5 1.0 1.0 156 | 3.0 0.0 -0.5 1.0 0.0 157 | 2.0 0.0 -0.5 0.0 0.0 158 | 3.0 1.0 -0.5 1.0 1.0 159 | 2.0 1.0 -0.5 0.0 1.0 160 | 2.0 0.0 -0.5 0.0 0.0 -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | ------------------------------------------------------------------ 2 | The official maintained repository for this project is now 3 | https://github.com/tparisi/webgl-lessons -- please fork from 4 | and send pull requests to there rather than here. 5 | ------------------------------------------------------------------ 6 | 7 | 8 | Some lessons in WebGL 9 | --------------------- 10 | 11 | This repository contains a series of simple lessons in WebGL, plus some 12 | related examples. 13 | 14 | The folders named lesson01, lesson02, and so on are a sequential tutorial and 15 | are best understood using the explanatory text at: 16 | 17 | 18 | 19 | The form of the first ten lessons is *very* loosely based on NeHe Productions' 20 | well-known OpenGL tutorial, which can be found here: 21 | 22 | 23 | 24 | The lessons from 11 onwards are not related to the NeHe ones. 25 | 26 | The folders named example01 etc are example code for interesting stuff outside 27 | the scope of the tutorial, and have their own README.txt files with details. 28 | 29 | 30 | Problems seeing the lessons? 31 | ---------------------------- 32 | 33 | When experimenting with the lessons later than #5 you may encounter errors 34 | resulting from "cross-origin" file access. This is caused by the browsers' 35 | security systems: 36 | 37 | * Browsers want to stop pages from one server ("origin") from gaining access 38 | to data from another origin except under closely-controlled circumstances. 39 | (For example, imagine if a hostile website tried to gain access to data 40 | from the online banking window you had open in another tab.) 41 | * Unfortunately, when files are loaded from the filesystem, the browser sees 42 | each file as a separate origin. So when one of these examples tries to 43 | load, say, a texture to display on a cube, it will fail. 44 | 45 | There are two ways you can work around this. The best, safest way is to use 46 | a local webserver, but an alternative if you're careful about it is to 47 | temporarily disable the cross-origin restrictions. 48 | 49 | The dangerous way 50 | ~~~~~~~~~~~~~~~~~ 51 | 52 | Switch off the same-origin policy. This is perfectly safe if you're only 53 | going to use the browser for testing your own code, but isn't a good idea 54 | in general (it's all too easy to casually browse over to an internet site 55 | without thinking about it). Still, if you want to do this: 56 | 57 | * Firefox: set the security.fileuri.strict_origin_policy setting in 58 | about: config to "false". 59 | 60 | * Chrome: use the the --allow-file-access-from-files and 61 | --disable-web-security switches command-line options (ideally just the 62 | first). If you're using a Mac, Stuart Carnie has written a convenient 63 | application bundle for this here: 64 | 65 | 66 | 67 | The safe way 68 | ~~~~~~~~~~~~ 69 | 70 | Here are instructions on how to run a local web server to host these 71 | lessons using Apache under Mac OS X; GNU/Linux will be similar. If you're 72 | on Windows, check out Xampp at 73 | 74 | 75 | 1) Add an entry for webgl-lessons.local in /etc/hosts. 76 | 77 | This will need to be done as the root user using your preferred editor: 78 | 79 | $ sudo /etc/hosts 80 | 81 | Add the following line and save the file: 82 | 83 | 127.0.0.1 webgl-lessons.local 84 | 85 | Tell the operating system to flush and reload the local DNS cache: 86 | 87 | dscacheutil -flushcache 88 | 89 | Test to see if http://webgl-lessons.local/ is working: 90 | 91 | $ dscacheutil -q host -a name http://webgl-lessons.local/ 92 | name: http://webgl-lessons.local/ 93 | ip_address: 94 | 95 | 2) Add an Apache vhost configuration: 96 | 97 | This will need to be done as the root user using your preferred editor: 98 | 99 | $ sudo /private/etc/apache2/extra/httpd-vhosts.conf 100 | 101 | Add the following vhost configuration replacing with 102 | the actual path on your filesystem: 103 | 104 | 105 | ServerName webgl-lessons 106 | DocumentRoot / 107 | > 108 | Options +Indexes +FollowSymLinks +MultiViews +Includes 109 | AllowOverride All 110 | Order allow,deny 111 | Allow from all 112 | DirectoryIndex index.html 113 | 114 | 115 | 116 | After making the change in the Apache vhost configuration first confirm the 117 | syntax for the Apache configuration is still correct: 118 | 119 | $ apachectl configtest 120 | Syntax OK 121 | 122 | If the syntax is OK then restart Apache: 123 | 124 | $ sudo apachectl restart 125 | 126 | Now you can open the webgl-lessons in any local browser at this url: 127 | 128 | -------------------------------------------------------------------------------- /lesson16/ObjToJSON.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /lesson01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Learning WebGL — lesson 1 5 | 6 | 7 | 8 | 9 | 16 | 17 | 27 | 28 | 29 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | << Back to Lesson 1
190 | 191 | 192 | 193 |
194 | << Back to Lesson 1
195 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /example02/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson03/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson04/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson05/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson06/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson07/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson08/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson09/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson10/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson11/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson12/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson13/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson14/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson15/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson16/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.requestAnimFrame(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 | '' + 71 | '
' + 72 | '
' + 73 | '
' + msg + '
' + 74 | '
' + 75 | '
'; 76 | }; 77 | 78 | /** 79 | * Mesasge for getting a webgl browser 80 | * @type {string} 81 | */ 82 | var GET_A_WEBGL_BROWSER = '' + 83 | 'This page requires a browser that supports WebGL.
' + 84 | 'Click here to upgrade your browser.'; 85 | 86 | /** 87 | * Mesasge for need better hardware 88 | * @type {string} 89 | */ 90 | var OTHER_PROBLEM = '' + 91 | "It doesn't appear your computer can support WebGL.
" + 92 | 'Click here for more information.'; 93 | 94 | /** 95 | * Creates a webgl context. If creation fails it will 96 | * change the contents of the container of the 97 | * tag to an error message with the correct links for WebGL. 98 | * @param {Element} canvas. The canvas element to create a 99 | * context from. 100 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 101 | * creation attributes you want to pass in. 102 | * @param {function:(msg)} opt_onError An function to call 103 | * if there is an error during creation. 104 | * @return {WebGLRenderingContext} The created context. 105 | */ 106 | var setupWebGL = function(canvas, opt_attribs, opt_onError) { 107 | function handleCreationError(msg) { 108 | var container = canvas.parentNode; 109 | if (container) { 110 | var str = window.WebGLRenderingContext ? 111 | OTHER_PROBLEM : 112 | GET_A_WEBGL_BROWSER; 113 | if (msg) { 114 | str += "

Status: " + msg; 115 | } 116 | container.innerHTML = makeFailHTML(str); 117 | } 118 | }; 119 | 120 | opt_onError = opt_onError || handleCreationError; 121 | 122 | if (canvas.addEventListener) { 123 | canvas.addEventListener("webglcontextcreationerror", function(event) { 124 | opt_onError(event.statusMessage); 125 | }, false); 126 | } 127 | var context = create3DContext(canvas, opt_attribs); 128 | if (!context) { 129 | if (!window.WebGLRenderingContext) { 130 | opt_onError(""); 131 | } 132 | } 133 | return context; 134 | }; 135 | 136 | /** 137 | * Creates a webgl context. 138 | * @param {!Canvas} canvas The canvas tag to get context 139 | * from. If one is not passed in one will be created. 140 | * @return {!WebGLContext} The created context. 141 | */ 142 | var create3DContext = function(canvas, opt_attribs) { 143 | var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; 144 | var context = null; 145 | for (var ii = 0; ii < names.length; ++ii) { 146 | try { 147 | context = canvas.getContext(names[ii], opt_attribs); 148 | } catch(e) {} 149 | if (context) { 150 | break; 151 | } 152 | } 153 | return context; 154 | } 155 | 156 | return { 157 | create3DContext: create3DContext, 158 | setupWebGL: setupWebGL 159 | }; 160 | }(); 161 | 162 | /** 163 | * Provides requestAnimationFrame in a cross browser way. 164 | */ 165 | window.requestAnimFrame = (function() { 166 | return window.requestAnimationFrame || 167 | window.webkitRequestAnimationFrame || 168 | window.mozRequestAnimationFrame || 169 | window.oRequestAnimationFrame || 170 | window.msRequestAnimationFrame || 171 | function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 172 | window.setTimeout(callback, 1000/60); 173 | }; 174 | })(); 175 | 176 | -------------------------------------------------------------------------------- /lesson02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Learning WebGL — lesson 2 5 | 6 | 7 | 8 | 9 | 18 | 19 | 33 | 34 | 35 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | << Back to Lesson 2
230 | 231 | 232 | 233 |
234 | << Back to Lesson 2
235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /example01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Learning WebGL — Mandelbrot shader example 5 | 6 | 7 | 71 | 72 | 83 | 84 | 85 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | << Back to the blog
264 | 265 | 266 | 267 |

Inputs

268 |
269 |

270 | Zoom target:
271 | X 272 | Y 273 | 274 |

275 | 276 |

277 | 278 |

Current state (read-only)

279 |
280 |

281 | Current center:
282 | X Y 283 | 284 |

285 | Zoom: 286 |

287 | 288 |
289 | << Back to the blog
290 | 291 | 292 | 293 | -------------------------------------------------------------------------------- /example03/particles-01-noenable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Particles 5 | 6 | 7 | 8 | 25 | 26 | 51 | 52 | 53 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | -------------------------------------------------------------------------------- /example03/particles-01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Particles 5 | 6 | 7 | 8 | 25 | 26 | 51 | 52 | 53 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | -------------------------------------------------------------------------------- /lesson03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Learning WebGL — lesson 3 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 | 34 | 35 | 36 | 279 | 280 | 281 | 282 | 283 | 284 | << Back to Lesson 3
285 | 286 | 287 | 288 |
289 | << Back to Lesson 3
290 | 291 | 292 | 293 | -------------------------------------------------------------------------------- /example03/particles-02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Particles 5 | 6 | 7 | 8 | 26 | 27 | 57 | 58 | 59 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | -------------------------------------------------------------------------------- /lesson05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Learning WebGL — lesson 5 5 | 6 | 7 | 8 | 9 | 10 | 21 | 22 | 37 | 38 | 39 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | << Back to Lesson 5
357 | 358 | 359 | 360 |
361 | << Back to Lesson 5
362 | 363 | 364 | 365 | -------------------------------------------------------------------------------- /example03/particles-03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Particles 5 | 6 | 7 | 8 | 26 | 27 | 57 | 58 | 59 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | -------------------------------------------------------------------------------- /example02/glMatrix-0.9.5.min.js: -------------------------------------------------------------------------------- 1 | // glMatrix v0.9.5 2 | glMatrixArrayType=typeof Float32Array!="undefined"?Float32Array:typeof WebGLFloatArray!="undefined"?WebGLFloatArray:Array;var vec3={};vec3.create=function(a){var b=new glMatrixArrayType(3);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2]}return b};vec3.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];return b};vec3.add=function(a,b,c){if(!c||a==c){a[0]+=b[0];a[1]+=b[1];a[2]+=b[2];return a}c[0]=a[0]+b[0];c[1]=a[1]+b[1];c[2]=a[2]+b[2];return c}; 3 | vec3.subtract=function(a,b,c){if(!c||a==c){a[0]-=b[0];a[1]-=b[1];a[2]-=b[2];return a}c[0]=a[0]-b[0];c[1]=a[1]-b[1];c[2]=a[2]-b[2];return c};vec3.negate=function(a,b){b||(b=a);b[0]=-a[0];b[1]=-a[1];b[2]=-a[2];return b};vec3.scale=function(a,b,c){if(!c||a==c){a[0]*=b;a[1]*=b;a[2]*=b;return a}c[0]=a[0]*b;c[1]=a[1]*b;c[2]=a[2]*b;return c}; 4 | vec3.normalize=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=Math.sqrt(c*c+d*d+e*e);if(g){if(g==1){b[0]=c;b[1]=d;b[2]=e;return b}}else{b[0]=0;b[1]=0;b[2]=0;return b}g=1/g;b[0]=c*g;b[1]=d*g;b[2]=e*g;return b};vec3.cross=function(a,b,c){c||(c=a);var d=a[0],e=a[1];a=a[2];var g=b[0],f=b[1];b=b[2];c[0]=e*b-a*f;c[1]=a*g-d*b;c[2]=d*f-e*g;return c};vec3.length=function(a){var b=a[0],c=a[1];a=a[2];return Math.sqrt(b*b+c*c+a*a)};vec3.dot=function(a,b){return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]}; 5 | vec3.direction=function(a,b,c){c||(c=a);var d=a[0]-b[0],e=a[1]-b[1];a=a[2]-b[2];b=Math.sqrt(d*d+e*e+a*a);if(!b){c[0]=0;c[1]=0;c[2]=0;return c}b=1/b;c[0]=d*b;c[1]=e*b;c[2]=a*b;return c};vec3.lerp=function(a,b,c,d){d||(d=a);d[0]=a[0]+c*(b[0]-a[0]);d[1]=a[1]+c*(b[1]-a[1]);d[2]=a[2]+c*(b[2]-a[2]);return d};vec3.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+"]"};var mat3={}; 6 | mat3.create=function(a){var b=new glMatrixArrayType(9);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9]}return b};mat3.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];return b};mat3.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=1;a[5]=0;a[6]=0;a[7]=0;a[8]=1;return a}; 7 | mat3.transpose=function(a,b){if(!b||a==b){var c=a[1],d=a[2],e=a[5];a[1]=a[3];a[2]=a[6];a[3]=c;a[5]=a[7];a[6]=d;a[7]=e;return a}b[0]=a[0];b[1]=a[3];b[2]=a[6];b[3]=a[1];b[4]=a[4];b[5]=a[7];b[6]=a[2];b[7]=a[5];b[8]=a[8];return b};mat3.toMat4=function(a,b){b||(b=mat4.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=0;b[4]=a[3];b[5]=a[4];b[6]=a[5];b[7]=0;b[8]=a[6];b[9]=a[7];b[10]=a[8];b[11]=0;b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b}; 8 | mat3.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+"]"};var mat4={};mat4.create=function(a){var b=new glMatrixArrayType(16);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=a[12];b[13]=a[13];b[14]=a[14];b[15]=a[15]}return b}; 9 | mat4.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=a[12];b[13]=a[13];b[14]=a[14];b[15]=a[15];return b};mat4.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=0;a[5]=1;a[6]=0;a[7]=0;a[8]=0;a[9]=0;a[10]=1;a[11]=0;a[12]=0;a[13]=0;a[14]=0;a[15]=1;return a}; 10 | mat4.transpose=function(a,b){if(!b||a==b){var c=a[1],d=a[2],e=a[3],g=a[6],f=a[7],h=a[11];a[1]=a[4];a[2]=a[8];a[3]=a[12];a[4]=c;a[6]=a[9];a[7]=a[13];a[8]=d;a[9]=g;a[11]=a[14];a[12]=e;a[13]=f;a[14]=h;return a}b[0]=a[0];b[1]=a[4];b[2]=a[8];b[3]=a[12];b[4]=a[1];b[5]=a[5];b[6]=a[9];b[7]=a[13];b[8]=a[2];b[9]=a[6];b[10]=a[10];b[11]=a[14];b[12]=a[3];b[13]=a[7];b[14]=a[11];b[15]=a[15];return b}; 11 | mat4.determinant=function(a){var b=a[0],c=a[1],d=a[2],e=a[3],g=a[4],f=a[5],h=a[6],i=a[7],j=a[8],k=a[9],l=a[10],o=a[11],m=a[12],n=a[13],p=a[14];a=a[15];return m*k*h*e-j*n*h*e-m*f*l*e+g*n*l*e+j*f*p*e-g*k*p*e-m*k*d*i+j*n*d*i+m*c*l*i-b*n*l*i-j*c*p*i+b*k*p*i+m*f*d*o-g*n*d*o-m*c*h*o+b*n*h*o+g*c*p*o-b*f*p*o-j*f*d*a+g*k*d*a+j*c*h*a-b*k*h*a-g*c*l*a+b*f*l*a}; 12 | mat4.inverse=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=a[3],f=a[4],h=a[5],i=a[6],j=a[7],k=a[8],l=a[9],o=a[10],m=a[11],n=a[12],p=a[13],r=a[14],s=a[15],A=c*h-d*f,B=c*i-e*f,t=c*j-g*f,u=d*i-e*h,v=d*j-g*h,w=e*j-g*i,x=k*p-l*n,y=k*r-o*n,z=k*s-m*n,C=l*r-o*p,D=l*s-m*p,E=o*s-m*r,q=1/(A*E-B*D+t*C+u*z-v*y+w*x);b[0]=(h*E-i*D+j*C)*q;b[1]=(-d*E+e*D-g*C)*q;b[2]=(p*w-r*v+s*u)*q;b[3]=(-l*w+o*v-m*u)*q;b[4]=(-f*E+i*z-j*y)*q;b[5]=(c*E-e*z+g*y)*q;b[6]=(-n*w+r*t-s*B)*q;b[7]=(k*w-o*t+m*B)*q;b[8]=(f*D-h*z+j*x)*q; 13 | b[9]=(-c*D+d*z-g*x)*q;b[10]=(n*v-p*t+s*A)*q;b[11]=(-k*v+l*t-m*A)*q;b[12]=(-f*C+h*y-i*x)*q;b[13]=(c*C-d*y+e*x)*q;b[14]=(-n*u+p*B-r*A)*q;b[15]=(k*u-l*B+o*A)*q;return b};mat4.toRotationMat=function(a,b){b||(b=mat4.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b}; 14 | mat4.toMat3=function(a,b){b||(b=mat3.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[4];b[4]=a[5];b[5]=a[6];b[6]=a[8];b[7]=a[9];b[8]=a[10];return b};mat4.toInverseMat3=function(a,b){var c=a[0],d=a[1],e=a[2],g=a[4],f=a[5],h=a[6],i=a[8],j=a[9],k=a[10],l=k*f-h*j,o=-k*g+h*i,m=j*g-f*i,n=c*l+d*o+e*m;if(!n)return null;n=1/n;b||(b=mat3.create());b[0]=l*n;b[1]=(-k*d+e*j)*n;b[2]=(h*d-e*f)*n;b[3]=o*n;b[4]=(k*c-e*i)*n;b[5]=(-h*c+e*g)*n;b[6]=m*n;b[7]=(-j*c+d*i)*n;b[8]=(f*c-d*g)*n;return b}; 15 | mat4.multiply=function(a,b,c){c||(c=a);var d=a[0],e=a[1],g=a[2],f=a[3],h=a[4],i=a[5],j=a[6],k=a[7],l=a[8],o=a[9],m=a[10],n=a[11],p=a[12],r=a[13],s=a[14];a=a[15];var A=b[0],B=b[1],t=b[2],u=b[3],v=b[4],w=b[5],x=b[6],y=b[7],z=b[8],C=b[9],D=b[10],E=b[11],q=b[12],F=b[13],G=b[14];b=b[15];c[0]=A*d+B*h+t*l+u*p;c[1]=A*e+B*i+t*o+u*r;c[2]=A*g+B*j+t*m+u*s;c[3]=A*f+B*k+t*n+u*a;c[4]=v*d+w*h+x*l+y*p;c[5]=v*e+w*i+x*o+y*r;c[6]=v*g+w*j+x*m+y*s;c[7]=v*f+w*k+x*n+y*a;c[8]=z*d+C*h+D*l+E*p;c[9]=z*e+C*i+D*o+E*r;c[10]=z* 16 | g+C*j+D*m+E*s;c[11]=z*f+C*k+D*n+E*a;c[12]=q*d+F*h+G*l+b*p;c[13]=q*e+F*i+G*o+b*r;c[14]=q*g+F*j+G*m+b*s;c[15]=q*f+F*k+G*n+b*a;return c};mat4.multiplyVec3=function(a,b,c){c||(c=b);var d=b[0],e=b[1];b=b[2];c[0]=a[0]*d+a[4]*e+a[8]*b+a[12];c[1]=a[1]*d+a[5]*e+a[9]*b+a[13];c[2]=a[2]*d+a[6]*e+a[10]*b+a[14];return c}; 17 | mat4.multiplyVec4=function(a,b,c){c||(c=b);var d=b[0],e=b[1],g=b[2];b=b[3];c[0]=a[0]*d+a[4]*e+a[8]*g+a[12]*b;c[1]=a[1]*d+a[5]*e+a[9]*g+a[13]*b;c[2]=a[2]*d+a[6]*e+a[10]*g+a[14]*b;c[3]=a[3]*d+a[7]*e+a[11]*g+a[15]*b;return c}; 18 | mat4.translate=function(a,b,c){var d=b[0],e=b[1];b=b[2];if(!c||a==c){a[12]=a[0]*d+a[4]*e+a[8]*b+a[12];a[13]=a[1]*d+a[5]*e+a[9]*b+a[13];a[14]=a[2]*d+a[6]*e+a[10]*b+a[14];a[15]=a[3]*d+a[7]*e+a[11]*b+a[15];return a}var g=a[0],f=a[1],h=a[2],i=a[3],j=a[4],k=a[5],l=a[6],o=a[7],m=a[8],n=a[9],p=a[10],r=a[11];c[0]=g;c[1]=f;c[2]=h;c[3]=i;c[4]=j;c[5]=k;c[6]=l;c[7]=o;c[8]=m;c[9]=n;c[10]=p;c[11]=r;c[12]=g*d+j*e+m*b+a[12];c[13]=f*d+k*e+n*b+a[13];c[14]=h*d+l*e+p*b+a[14];c[15]=i*d+o*e+r*b+a[15];return c}; 19 | mat4.scale=function(a,b,c){var d=b[0],e=b[1];b=b[2];if(!c||a==c){a[0]*=d;a[1]*=d;a[2]*=d;a[3]*=d;a[4]*=e;a[5]*=e;a[6]*=e;a[7]*=e;a[8]*=b;a[9]*=b;a[10]*=b;a[11]*=b;return a}c[0]=a[0]*d;c[1]=a[1]*d;c[2]=a[2]*d;c[3]=a[3]*d;c[4]=a[4]*e;c[5]=a[5]*e;c[6]=a[6]*e;c[7]=a[7]*e;c[8]=a[8]*b;c[9]=a[9]*b;c[10]=a[10]*b;c[11]=a[11]*b;c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15];return c}; 20 | mat4.rotate=function(a,b,c,d){var e=c[0],g=c[1];c=c[2];var f=Math.sqrt(e*e+g*g+c*c);if(!f)return null;if(f!=1){f=1/f;e*=f;g*=f;c*=f}var h=Math.sin(b),i=Math.cos(b),j=1-i;b=a[0];f=a[1];var k=a[2],l=a[3],o=a[4],m=a[5],n=a[6],p=a[7],r=a[8],s=a[9],A=a[10],B=a[11],t=e*e*j+i,u=g*e*j+c*h,v=c*e*j-g*h,w=e*g*j-c*h,x=g*g*j+i,y=c*g*j+e*h,z=e*c*j+g*h;e=g*c*j-e*h;g=c*c*j+i;if(d){if(a!=d){d[12]=a[12];d[13]=a[13];d[14]=a[14];d[15]=a[15]}}else d=a;d[0]=b*t+o*u+r*v;d[1]=f*t+m*u+s*v;d[2]=k*t+n*u+A*v;d[3]=l*t+p*u+B* 21 | v;d[4]=b*w+o*x+r*y;d[5]=f*w+m*x+s*y;d[6]=k*w+n*x+A*y;d[7]=l*w+p*x+B*y;d[8]=b*z+o*e+r*g;d[9]=f*z+m*e+s*g;d[10]=k*z+n*e+A*g;d[11]=l*z+p*e+B*g;return d};mat4.rotateX=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[4],g=a[5],f=a[6],h=a[7],i=a[8],j=a[9],k=a[10],l=a[11];if(c){if(a!=c){c[0]=a[0];c[1]=a[1];c[2]=a[2];c[3]=a[3];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[4]=e*b+i*d;c[5]=g*b+j*d;c[6]=f*b+k*d;c[7]=h*b+l*d;c[8]=e*-d+i*b;c[9]=g*-d+j*b;c[10]=f*-d+k*b;c[11]=h*-d+l*b;return c}; 22 | mat4.rotateY=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[0],g=a[1],f=a[2],h=a[3],i=a[8],j=a[9],k=a[10],l=a[11];if(c){if(a!=c){c[4]=a[4];c[5]=a[5];c[6]=a[6];c[7]=a[7];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[0]=e*b+i*-d;c[1]=g*b+j*-d;c[2]=f*b+k*-d;c[3]=h*b+l*-d;c[8]=e*d+i*b;c[9]=g*d+j*b;c[10]=f*d+k*b;c[11]=h*d+l*b;return c}; 23 | mat4.rotateZ=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[0],g=a[1],f=a[2],h=a[3],i=a[4],j=a[5],k=a[6],l=a[7];if(c){if(a!=c){c[8]=a[8];c[9]=a[9];c[10]=a[10];c[11]=a[11];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[0]=e*b+i*d;c[1]=g*b+j*d;c[2]=f*b+k*d;c[3]=h*b+l*d;c[4]=e*-d+i*b;c[5]=g*-d+j*b;c[6]=f*-d+k*b;c[7]=h*-d+l*b;return c}; 24 | mat4.frustum=function(a,b,c,d,e,g,f){f||(f=mat4.create());var h=b-a,i=d-c,j=g-e;f[0]=e*2/h;f[1]=0;f[2]=0;f[3]=0;f[4]=0;f[5]=e*2/i;f[6]=0;f[7]=0;f[8]=(b+a)/h;f[9]=(d+c)/i;f[10]=-(g+e)/j;f[11]=-1;f[12]=0;f[13]=0;f[14]=-(g*e*2)/j;f[15]=0;return f};mat4.perspective=function(a,b,c,d,e){a=c*Math.tan(a*Math.PI/360);b=a*b;return mat4.frustum(-b,b,-a,a,c,d,e)}; 25 | mat4.ortho=function(a,b,c,d,e,g,f){f||(f=mat4.create());var h=b-a,i=d-c,j=g-e;f[0]=2/h;f[1]=0;f[2]=0;f[3]=0;f[4]=0;f[5]=2/i;f[6]=0;f[7]=0;f[8]=0;f[9]=0;f[10]=-2/j;f[11]=0;f[12]=-(a+b)/h;f[13]=-(d+c)/i;f[14]=-(g+e)/j;f[15]=1;return f}; 26 | mat4.lookAt=function(a,b,c,d){d||(d=mat4.create());var e=a[0],g=a[1];a=a[2];var f=c[0],h=c[1],i=c[2];c=b[1];var j=b[2];if(e==b[0]&&g==c&&a==j)return mat4.identity(d);var k,l,o,m;c=e-b[0];j=g-b[1];b=a-b[2];m=1/Math.sqrt(c*c+j*j+b*b);c*=m;j*=m;b*=m;k=h*b-i*j;i=i*c-f*b;f=f*j-h*c;if(m=Math.sqrt(k*k+i*i+f*f)){m=1/m;k*=m;i*=m;f*=m}else f=i=k=0;h=j*f-b*i;l=b*k-c*f;o=c*i-j*k;if(m=Math.sqrt(h*h+l*l+o*o)){m=1/m;h*=m;l*=m;o*=m}else o=l=h=0;d[0]=k;d[1]=h;d[2]=c;d[3]=0;d[4]=i;d[5]=l;d[6]=j;d[7]=0;d[8]=f;d[9]= 27 | o;d[10]=b;d[11]=0;d[12]=-(k*e+i*g+f*a);d[13]=-(h*e+l*g+o*a);d[14]=-(c*e+j*g+b*a);d[15]=1;return d};mat4.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+", "+a[9]+", "+a[10]+", "+a[11]+", "+a[12]+", "+a[13]+", "+a[14]+", "+a[15]+"]"};quat4={};quat4.create=function(a){var b=new glMatrixArrayType(4);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3]}return b};quat4.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];return b}; 28 | quat4.calculateW=function(a,b){var c=a[0],d=a[1],e=a[2];if(!b||a==b){a[3]=-Math.sqrt(Math.abs(1-c*c-d*d-e*e));return a}b[0]=c;b[1]=d;b[2]=e;b[3]=-Math.sqrt(Math.abs(1-c*c-d*d-e*e));return b};quat4.inverse=function(a,b){if(!b||a==b){a[0]*=1;a[1]*=1;a[2]*=1;return a}b[0]=-a[0];b[1]=-a[1];b[2]=-a[2];b[3]=a[3];return b};quat4.length=function(a){var b=a[0],c=a[1],d=a[2];a=a[3];return Math.sqrt(b*b+c*c+d*d+a*a)}; 29 | quat4.normalize=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=a[3],f=Math.sqrt(c*c+d*d+e*e+g*g);if(f==0){b[0]=0;b[1]=0;b[2]=0;b[3]=0;return b}f=1/f;b[0]=c*f;b[1]=d*f;b[2]=e*f;b[3]=g*f;return b};quat4.multiply=function(a,b,c){c||(c=a);var d=a[0],e=a[1],g=a[2];a=a[3];var f=b[0],h=b[1],i=b[2];b=b[3];c[0]=d*b+a*f+e*i-g*h;c[1]=e*b+a*h+g*f-d*i;c[2]=g*b+a*i+d*h-e*f;c[3]=a*b-d*f-e*h-g*i;return c}; 30 | quat4.multiplyVec3=function(a,b,c){c||(c=b);var d=b[0],e=b[1],g=b[2];b=a[0];var f=a[1],h=a[2];a=a[3];var i=a*d+f*g-h*e,j=a*e+h*d-b*g,k=a*g+b*e-f*d;d=-b*d-f*e-h*g;c[0]=i*a+d*-b+j*-h-k*-f;c[1]=j*a+d*-f+k*-b-i*-h;c[2]=k*a+d*-h+i*-f-j*-b;return c};quat4.toMat3=function(a,b){b||(b=mat3.create());var c=a[0],d=a[1],e=a[2],g=a[3],f=c+c,h=d+d,i=e+e,j=c*f,k=c*h;c=c*i;var l=d*h;d=d*i;e=e*i;f=g*f;h=g*h;g=g*i;b[0]=1-(l+e);b[1]=k-g;b[2]=c+h;b[3]=k+g;b[4]=1-(j+e);b[5]=d-f;b[6]=c-h;b[7]=d+f;b[8]=1-(j+l);return b}; 31 | quat4.toMat4=function(a,b){b||(b=mat4.create());var c=a[0],d=a[1],e=a[2],g=a[3],f=c+c,h=d+d,i=e+e,j=c*f,k=c*h;c=c*i;var l=d*h;d=d*i;e=e*i;f=g*f;h=g*h;g=g*i;b[0]=1-(l+e);b[1]=k-g;b[2]=c+h;b[3]=0;b[4]=k+g;b[5]=1-(j+e);b[6]=d-f;b[7]=0;b[8]=c-h;b[9]=d+f;b[10]=1-(j+l);b[11]=0;b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b};quat4.slerp=function(a,b,c,d){d||(d=a);var e=c;if(a[0]*b[0]+a[1]*b[1]+a[2]*b[2]+a[3]*b[3]<0)e=-1*c;d[0]=1-c*a[0]+e*b[0];d[1]=1-c*a[1]+e*b[1];d[2]=1-c*a[2]+e*b[2];d[3]=1-c*a[3]+e*b[3];return d}; 32 | quat4.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+"]"}; 33 | --------------------------------------------------------------------------------