-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathwebgl.html
More file actions
259 lines (238 loc) · 17.9 KB
/
webgl.html
File metadata and controls
259 lines (238 loc) · 17.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>WebGL/three.js Resources</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="rtr4.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="rtr3-header-image">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#10304B">
<td>
<a href="https://www.realtimerendering.com/blog/">
<img src="rtr-header.png" alt="Header image" width="410" height="106"/>
</a>
</td>
</tr>
</table>
</div>
<div id="navigation" class="clearfix">
<ul class="primary">
<li><a href="https://www.realtimerendering.com/blog/" rel="home">Blog</a></li>
<li><a title="Recommended books" href="books.html">Graphics Books</a></li>
<li><a title="Object / object intersection page" href="intersections.html">Intersections</a></li>
<li><a title="Sites we like" href="portal.html">Portal</a></li>
<li><a title="Ray Tracing Resources" href="raytracing.html">Ray tracing</a></li>
<li><a title="Main resources page" href="index.html">Resources</a></li>
<li><a title="USD and glTF Resources" href="usd_gltf.html">USD & glTF</a></li>
<li><a class="nav-current" title="WebGL/three.js Resources" href="webgl.html">WebGL</a></li>
</ul>
</div>
</div>
<div id="content" class="clearfix">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="pageName">WebGL/WebGPU/three.js Resources</td>
</tr>
<tr>
<td valign="top"><img src="spacer.gif" alt="" height="6" border="0"/><br/>
</tr>
<tr>
<td class="bodyText">
<div class="metadata">
Last changed: December 6, 2024
</div>
<div>
Eric runs across WebGL resources and then tend to lose track of them, so he made this page. Feel free to <a href="mailto:erich@acm.org">send him suggestions</a>.
<h2>Browser-related</h2>
<P>
Does this browser support WebGL? Test <a href="https://get.webgl.org/">here</a>.
<br>
What WebGL extensions does this browser support? Test <a href="https://webglreport.com/">here</a>, and <a href="https://registry.khronos.org/webgl/sdk/tests/extra/webgl-info.html">here</a>, and <a href="https://alteredqualia.com/tools/webgl-features/">here</a>.
<br>
What browser versions support WebGL? Find out <a href="https://caniuse.com/#feat=webgl">here</a>.
<br>
How do I start up my browser for local development? Chrome: <b>--allow-file-access-from-files</b> else check the <a href="https://threejs.org/docs/#manual/introduction/How-to-run-thing-locally">three.js page</a>.
<br>
What's my GPU info on Chrome? Paste in this URL: chrome://gpu/
<br>
How do I use native OpenGL instead of ANGLE for Windows Chrome and Firefox? Find out <a href="https://www.geeks3d.com/20130611/webgl-how-to-enable-native-opengl-in-your-browser-windows/">here</a>.
<br>
What other command line options are there for Chrome? Find out <a href="https://peter.sh/experiments/chromium-command-line-switches/">here</a>.
<br>
You just want eye candy? Try <a href="https://experiments.withgoogle.com/search?q=WebGL">here</a> for starters.
<br>
<h2>Reference Pages</h2>
Khronos <a href="https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf">Reference card</a>
<br>
<a href="https://www.khronos.org/webgl/wiki/Main_Page">Khronos Wiki</a>.
<br>
<a href="https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists">Blacklist</a> of GPUs that don't run WebGL.
<h2>Forums and News</h2>
<a href="https://groups.google.com/forum/#!forum/webgl-dev-list">WebGL Dev List</a> on Google Groups
<br>
Twitter: <a href="https://twitter.com/search?q=%23threejs&src=typd">#threejs</a>, <a href="https://twitter.com/search?q=%23webgl&src=typd">#webgl</a>
<br>
Reddit: <a href="https://www.reddit.com/r/threejs">three.js</a>, <a href="https://www.reddit.com/r/webgl/">WebGL</a>
<h2>Tools</h2>
There are lots of Javascript development resources. At a minimum, I recommend putting <a href="https://www.w3schools.com/js/js_strict.asp">"use strict";</a> at the top of your programs.
<br>
Use <a href="https://jshint.com/">JSHint</a> to check your code.
<br>
To develop locally you'll need to use a local servers. Easy ways to start one are <a href="https://greggman.github.io/servez/">ServeZ</a> on the PC, <a href="https://www.mamp.info/">MAMP</a> on Mac.
<br>
A debugger is built into the browser, <a href="https://developer.chrome.com/docs/devtools/javascript">e.g., Chrome</a>. Other graphics-specific tools follow.
<br>
<a href="https://spector.babylonjs.com/">Spector.js</a> for examining renders and state. <a href="https://www.realtimerendering.com/blog/debugging-webgl-with-spectorjs/">Documentation</a>.
<br>
<a href="https://www.html5rocks.com/en/tutorials/games/abouttracing/">about:tracing</a> in Google Chrome, for examining GPU and CPU usage.
<br>
<a href="https://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/">Debuggers and profilers</a>, <a href="https://cesium.com/blog/2014/12/01/webgl-profiling-tips/">profiling tips</a>, <a href="https://www.realtimerendering.com/blog/webgl-browser-editors/">browser editors</a>, <a href="https://www.realtimerendering.com/blog/webgl-resources/">Cozzi's list</a> (old)
<br>
<a href="https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/">Firefox Canvas Debugger</a>
<br>
<a href="https://toji.github.io/shader-perf/">Shader compile/link performance</a>
<br>
<a href="https://toji.github.io/texture-tester/">Texture Format Tester</a>
<br>
<a href="https://google.github.io/tracing-framework/analyzing-traces.html">Analyzing traces</a>
<h2>Three.js</h2>
<b><a href="https://threejs.org">Homepage</a></b> (which includes so very much), <a href="https://stemkoski.github.io/Three.js/">Lee Stemkoski's demos</a>, <a href="https://yomotsu.github.io/threejs-examples/">Yomotsu examples</a>, Udacity <a href="http://www.realtimerendering.com/udacity/?load=demo/unit7-view-pipeline.js">demos</a> and <a href="https://github.com/udacity/cs291">code</a>
<br>
<a href="https://discoverthreejs.com/book/introduction/">Introductory tutorial</a> from an <a href="https://discoverthreejs.com/book/">free book</a>, with coding inside the browser.
<br>
<a href="https://www.staunsholm.dk/THREE/jsdoc/">API</a>, <a href="https://github.com/mrdoob/three.js/wiki">wiki docs</a>, <a href="http://ushiroad.com/3j/">object overview</a>, (old) <a href="https://web.archive.org/web/20181127124920/https://www.udacity.com/wiki/cs291/threejs-reference">quick reference</a> (archived),
<br>
<a href="https://www.realtimerendering.com/threejs/">Thumbnails of examples</a>
<br>
<a href="https://threejs.org/docs/#manual/introduction/Useful-links">useful links page</a>
<br>
More demos: beyond <a href="https://threejs.org/">three.js's</a>, find more at <a href="https://edankwan.com/">Edan Kwan</a>, <a href="https://fractalfantasy.net/#/4/uncannyvalley">Fractal Fantasy</a>, and <a href="https://viewer-rocks.autodesk.io/">Autodesk Forge</a>.
<br>
<a href="https://github.com/mrdoob/three.js/releases">Source code</a>
<br>
<a href="https://threejs.org/editor/">Editor</a>
<br>
<a href="https://fhtr.org/BasicsOfThreeJS/#1">Intro "live" slideset</a> (and <a href="https://www.realtimerendering.com/basics3js/#1">my own fork</a>), <a href="https://aerotwist.com/tutorials/getting-started-with-three-js/">basics article</a>.
<h2>Courses and Tutorials for WebGL and Three.js</h2>
<a href="https://webglfundamentals.org">WebGL Fundamentals</a> and <a href="https://webgl2fundamentals.org/">WebGL2 Fundamentals</a> have numerous articles on getting started and specific subjects.
<br>
The <a href="https://threejs.org/">three.js homepage</a> links to
<UL>
<LI><a href="https://threejs.org/manual/#en/fundamentals">Three.js Fundamentals</a>
<LI><a href="https://threejs-journey.com/">Three.js Journey</a>, this last one costs money (recommended by at least <a href="https://www.reddit.com/r/threejs/comments/o615a2/help_with_threejs/h2psiy7?utm_source=share&utm_medium=web2x&context=3">one person</a>)
</UL>
The book <i><a href="https://discoverthreejs.com/book/introduction/">Discover Three.js</a></i> has an extensive introduction to three.js online for free.
<br>
<a href="https://www.udacity.com/course/interactive-3d-graphics--cs291">Udacity three.js MOOC course signup</a>, <a href="https://web.archive.org/web/20181122143134/https://www.udacity.com/wiki/cs291">resources</a> (archived), and <a href="https://web.archive.org/web/20181122152240/https://www.udacity.com/wiki/cs291/syllabus">syllabus</a> (archived) - quite old, but the graphics lectures and general three.js knowledge is still valid (I admit a bias, as I designed it).
<br>
<a href="https://www.futurelearn.com/courses/3d-graphics-web-programmers">Barcelona WebGL MOOC course homepage</a>
<br>
<a href="https://github.com/Jam3/jam3-lesson-webgl-shader-threejs">WebGL Lessons: Three.js Shaders</a> on github
<br>
Steven Wittens' <a href="https://acko.net/files/fullfrontal/fullfrontal/webglmath/online.html">lovely computer graphics lessons</a> using Three.js, and <a href="https://acko.net/blog/on-webgl/">WebGL intro</a> demofest
<br>
Tarek Sherif's <a href="https://tsherif.github.io/khronos-webgl-workshop1/#/">tutorial slide presentation</a> and <a href="https://github.com/tsherif/khronos-webgl-workshop1">repository</a>.
<br>
<a href="https://www.youtube.com/watch?v=tgVLb6fOVVc&feature=youtu.be">SIGGRAPH University introduction to WebGL</a>
<h2>WebGL 2</h2>
Khronos <a href="https://www.khronos.org/files/webgl20-reference-guide.pdf">Reference card</a>
<br>
<a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/">Specification</a>, related <a href="https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf">OpenGL ES 3.0 specification</a>
<br>
<a href="https://github.com/shrekshao/MoveWebGL1EngineToWebGL2/blob/master/Move-a-WebGL-1-Engine-To-WebGL-2-Blog-1.md">How to start using WebGL 2.</a>
<br>
<a href="https://github.com/shrekshao/MoveWebGL1EngineToWebGL2/blob/master/Move-a-WebGL-1-Engine-To-WebGL-2-Blog-2.md">New features in WebGL 2.</a>
<br>
<a href="https://github.com/WebGLSamples/WebGL2Samples">Samples</a> and <a href="https://github.com/tsherif/webgl2examples">examples</a>, and <a href="https://github.com/tsherif/webgl2bugs">bugs</a>.
<br>
<a href="https://tsherif.github.io/picogl.js/">PicoGL.js</a> - a minimal WebGL 2 rendering library; <a href="https://tsherif.wordpress.com/2017/07/26/webgl-2-development-with-picogl-js/">tutorial</a>
<br>
<a href="https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF">Fun with WebGL 2.0</a> - short tutorial videos, <a href="https://github.com/sketchpunk/FunWithWebGL2">code repository</a>, and <a href="https://sketchpunklabs.tumblr.com/">blog</a>
<br>
SIGGRAPH WebGL BOF videos: <a href="https://www.youtube.com/watch?v=0eWUzCa_M0E">2016</a>, <a href="https://www.youtube.com/watch?v=dAtdE4LQCSc">2017</a>, <a href="https://www.youtube.com/watch?v=FCAM-3aAzXg&t=3474s">2018</a>
<br>
<a href="https://blog.tojicode.com/2013/09/whats-coming-in-webgl-20.html">Brandon Jones' blog</a>
<br>
How Cesium creates <a href="https://github.com/CesiumGS/cesium/blob/master/Source/Renderer/Context.js">a WebGL 2 context</a>
<br>
Many more articles can be found at <a href="https://www.jendrikillner.com/article_database/">Jendrik Ullner's site</a> - search on "webgl"
<h2>File Formats</h2>
<a href="https://github.com/KhronosGroup/glTF">glTF</a>
<h2>WebVR</h2>
<a href="https://webvr.info/">WebVR info page</a>
<h2>WebGPU</h2>
<a href="https://gpuweb.github.io/gpuweb/">WebGPU spec</a><br>
<a href="https://developer.chrome.com/blog/webgpu-release">Chrome ships WebGPU</a><br>
Will Usher's tutorials: <a href="https://www.willusher.io/graphics/2023/04/10/0-to-gltf-triangle/">Hello world triangle</a>, <a href="https://www.willusher.io/graphics/2023/04/11/0-to-gltf-bind-groups/">bind groups</a> and (many!) <a href="https://www.willusher.io/projects/">projects</a><br>
<a href="https://toji.dev/webgpu-best-practices/error-handling">WebGPU Error Handling best practices</a><br>
Many more articles can be found at <a href="https://www.jendrikillner.com/article_database/">Jendrik Ullner's site</a> - search on "webgpu"<br>
<h2>Other Frameworks</h2>
<a href="https://www.shadertoy.com/">Shadertoy</a> - play with, test, and share procedural shaders<br>
<a href="https://www.babylonjs.com/">babylon.js</a><br>
<a href="https://github.com/glslify/glslify">glslify</a> - for shaders<br>
<a href="https://polygonjs.com/">Polygonjs</a> - node-based shaders and more<br>
<a href="https://playcanvas.com/">PlayCanvas</a><br>
<a href="https://webglstudio.org/">WebGLStudio.js</a><br>
<a href="https://aframe.io/">A-FRAME</a> - for VR, built atop three.js<br>
<a href="https://cesium.com/platform/cesiumjs/">CesiumJS</a> - for globes and maps<br>
<a href="https://hackernoon.com/five-ways-to-build-webgl-apps-4c7eb541d193">Still more options</a><br>
<a href="https://en.wikipedia.org/wiki/List_of_WebGL_frameworks">Wikipedia list</a>
<h2>Compression</h2>
<a href="https://github.com/KhronosGroup/glTF/wiki/Open-3D-Graphics-Compression">Open3DGC</a>
<br>
<a href="https://sourceforge.net/projects/openctm/">OpenCTM</a>
<br>
<a href="https://github.com/google/draco">Draco</a>
<h2>More Links</h2>
Just can't get enough? <a href="https://github.com/terkelg/awesome-creative-coding#shaders--opengl--webgl">Here are more</a> on WebGL and many other subjects.
<a NAME="books">
<h2>Books</h2></a>
An undifferentiated listing of what I've found out there, though not exhaustive - I avoid "web technology" compendiums ("Learn Three.js, WebGL, HTML 5, and everything else in 24 Hours!") and books with no ratings and little information about them. Books are newest to oldest, and those older than five years old have been removed. Some books do come with free sample chapters and code samples (or the whole volume!), and some have extensive samples on Amazon or Google Books, linked.
<P>
<table>
<tr><td>
<a href="https://smile.amazon.com/Real-Time-Graphics-WebGL-interactive-applications-ebook/dp/B07GVNQLH5?tag=realtimerenderin">
<img src="AmazonImages/RealTime3DGraphicsWithWebGL2.jpg" alt="cover" height="50" align=left border=0></a>
<img src="spacer.gif" alt="" height="50" width="12" align=left border=0>
<b><a href="https://smile.amazon.com/Real-Time-Graphics-WebGL-interactive-applications-ebook/dp/B07GVNQLH5?tag=realtimerenderin">Real-Time 3D Graphics with WebGL 2, Second Edition</a></b>, by Farhad Ghayour and Diego Cantor, Packt Publishing, October 2018 (<a href="https://www.packtpub.com/product/real-time-3d-graphics-with-webgl-2-second-edition/9781788629690">Table of Contents</a>, <a href="https://books.google.com/books?id=Qel1DwAAQBAJ&printsec=frontcover">Google Books sample</a>).
</td></tr>
<tr><td>
<a href="https://smile.amazon.com/Learn-Three-js-Programming-animations-visualizations/dp/1788833287?tag=realtimerenderin">
<img src="AmazonImages/LearnThreejs3rd_SL50_.jpg" alt="cover" height="50" align=left border=0></a>
<img src="spacer.gif" alt="" height="50" width="12" align=left border=0>
<b><a href="https://smile.amazon.com/Learn-Three-js-Programming-animations-visualizations/dp/1788833287?tag=realtimerenderin">Learn Three.js, Third Edition</a></b>, by Jos Dirksen, Packt Publishing, August 2018 (<a href="https://www.packtpub.com/product/learn-three-js-third-edition/9781788833288">Table of Contents</a>, <a href="https://github.com/josdirksen/learning-threejs-third">code repository</a>, <a href="https://www.google.com/books/edition/Learn_Three_js/cPFsDwAAQBAJ?hl=en&gbpv=1">Google Books sample</a>).
</td></tr>
<tr><td>
<a href="https://smile.amazon.com/dp/B071JKN1XH?tag=realtimerenderin">
<img src="AmazonImages/WebGLGems.jpg" alt="cover" height="50" align=left border=0></a>
<img src="spacer.gif" alt="" height="50" width="12" align=left border=0>
<b><a href="https://smile.amazon.com/dp/B071JKN1XH?tag=realtimerenderin">WebGL Gems</a></b>, by Greg Sidelnikov, Learning Curve, June 2017.
</td></tr>
<tr><td>
<a href="https://smile.amazon.com/WebGL-Insights-Patrick-Cozzi/dp/1498716075?tag=realtimerenderin"><img src="AmazonImages/51FPoi7JfuL._SL50_.jpg" alt="cover" height="50" align=left border=0></a>
<img src="spacer.gif" alt="" height="55" width="14" align=left border=0>
<a href="https://github.com/WebGLInsights/WebGLInsights.github.io/releases/download/v1.0/WebGL.Insights.-.Patrick.Cozzi.pdf"><img src="download_for_free_sm.png" alt="download for free" align=left border=0></a>
<img src="spacer.gif" alt="" height="55" width="12" align=left border=0>
<b><a href="https://smile.amazon.com/WebGL-Insights-Patrick-Cozzi/dp/1498716075?tag=realtimerenderin">WebGL Insights</a></b>, edited by Patrick Cozzi, CRC Press, July 2015 (<a href="https://webglinsights.blogspot.com/">blog</a>), <a href="https://github.com/WebGLInsights/WebGLInsights.github.io/releases/download/v1.0/WebGL.Insights.-.Patrick.Cozzi.pdf">download for free</a>.
</td></tr>
<tr><td>
<a href="https://smile.amazon.com/Interactive-Computer-Graphics-WebGL-Edition/dp/0133574849?tag=realtimerenderin"><img src="AmazonImages/51oD%2BbLq1mL._SL50_.jpg" alt="cover" height="50" align=left border=0></a>
<img src="spacer.gif" alt="" height="50" width="12" align=left border=0>
<b><a href="https://smile.amazon.com/Interactive-Computer-Graphics-WebGL-Edition/dp/0133574849?tag=realtimerenderin">Interactive Computer Graphics with WebGL (Seventh Edition)</a></b>, by Edward Angel and Dave Shreiner, Addison-Wesley, March 2014 (<a href="https://www.pearson.com/us/higher-education/product/ANGEL-Interactive-Computer-Graphics-A-Top-Down-Approach-with-Web-GL-7th-Edition/9780133574845.html">more info</a>, <a href="https://www.cs.unm.edu/~angel/BOOK/INTERACTIVE_COMPUTER_GRAPHICS/SEVENTH_EDITION/">figures and source code</a>).
</td></tr>
</table>
</div>
<P>
<i>Thanks to <a href="https://www.linkedin.com/in/patrickcozzi/">Patrick Cozzi</a> for <a href="https://github.com/pjcozzi/Articles/blob/master/RTR/MoreWebGLTools/index.html">collecting many of the links to tools</a>.</i>
<HR>
<div>
Contact: <a href="mailto:erich@acm.org">Eric Haines</a>
</div>
</body>
</html>