Skip to content

Instantly share code, notes, and snippets.

@8Observer8
Last active April 1, 2021 21:22
Show Gist options
  • Save 8Observer8/444fb31157fb99ca0a99eb13f2652341 to your computer and use it in GitHub Desktop.
Save 8Observer8/444fb31157fb99ca0a99eb13f2652341 to your computer and use it in GitHub Desktop.
Examples from the book on JSFiddle: https://sites.google.com/site/webglbook/
Chapter 02. Your First Step with WebGL<br>
ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/<br>
ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/<br>
ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/<br>
ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/<br>
ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/<br>
Chapter 03. Drawing and Transforming Triangles<br>
ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/<br>
ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/<br>
ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/<br>
ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/<br>
ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/<br>
ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/<br>
ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/<br>
ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/<br>
ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/<br>
ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/<br>
ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/<br>
Chapter 04. More Transformations and Basic Animation<br>
ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/<br>
ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/<br>
ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/<br>
ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/<br>
ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/<br>
ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/<br>
Chapter 05. Using Colors and Texture Images<br>
ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/<br>
ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/<br>
ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/<br>
ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/<br>
ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/<br>
ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/<br>
ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/<br>
ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/<br>
ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/<br>
Chapter 07. Toward the 3D World<br>
ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/<br>
ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/<br>
ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/<br>
ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/<br>
ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/<br>
ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/<br>
ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/<br>
ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/<br>
ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/<br>
ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/<br>
ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/<br>
ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/<br>
ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/<br>
ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/<br>
ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/<br>
ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/<br>
Chapter 08. Lighting Objects<br>
ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/<br>
ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/<br>
ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/<br>
ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/<br>
ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/<br>
ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/<br>
ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/<br>
ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/<br>
ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/<br>
ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/<br>
Chapter 09. Hierarchical Objects<br>
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/<br>
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/<br>
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/<br>
Chapter 10. Advanced Techniques<br>
ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/<br>
ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/<br>
ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/<br>
ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/<br>
ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/<br>
ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/<br>
ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/<br>
ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/<br>
ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/<br>
ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/<br>
ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/<br>
ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/<br>
ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/<br>
ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/<br>
ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/<br>
ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/<br>
ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/<br>
Gifts<br>
gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/<br>
gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/<br>
gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/<br>
gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/<br>
gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/<br>
gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/<br>
gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/<br>
appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/<br>
Appendix<br>
appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/<br>
appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/<br>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment