Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/olange/learning-webgl

Learning using WebGL, Three.js and Babylon.js – articles, useful resources, courseware, personal notes
https://github.com/olange/learning-webgl

code-retreat gongfuio learning-notes shaders threejs webgl

Last synced: about 1 month ago
JSON representation

Learning using WebGL, Three.js and Babylon.js – articles, useful resources, courseware, personal notes

Awesome Lists containing this project

README 

        
# Learning WebGL, GLSL and Three.js



Articles, useful resources, courseware, personal notes



[![Join the chat at https://gitter.im/olange/learning-webgl](https://badges.gitter.im/olange/learning-webgl.svg)](https://gitter.im/olange/learning-webgl?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)



## Workshops



* [Shader Programming Primer: Real-Time Animation and Effects with GLSL](workshops/shaders-primer/README.md)  

  Mapping Festival 2019 / Workshop 6 · 23.05.2019 10h–19h  

  by [Leander Herzog](https://www.shadertoy.com/user/lennyjpg) · Fonderie Kugler, Genève



## Codelabs



* [Texturing a video with a moire pattern · ShaderToy](https://www.shadertoy.com/view/WlBGzW) by Olivier Lange, Leander Herzog & Nicola Papale

* [First steps with WebGL and Three.js](codelabs/intro-to-webgl) _first steps and experiments, inspired by the slides  

  of David Lyons (see [tutorials](#tutorials) hereafter)_



## Experiments



* [01 · Three and Web Components](experiments/01-webgl-component/) Three.js animation in a web component

* [02 · Three and embedded Web Components](experiments/02-webgl-subcomponent) Three.js animations in embedded web components

* [03 · Three and plane layers](experiments/03-webgl-layers) Three.js animation of plane layers, with holes, rotating over each other



## Tutorials



* [The Book of Shaders](https://thebookofshaders.com) by Patricio Gonzalez Vivo and Jen Lowe

* [OpenGL Introduction](https://open.gl/introduction) by Alexander Overvoorde

* [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html) (Greggman, 2012–2018 ongoing) _comprehensive collection of articles about WebGL, explained step by step_

  - [x] [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)

  - [x] [WebGL How It Works](https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html)

  - [x] [WebGL Shaders and GLSL](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html)

  - [x] [WebGL Image Processing](https://webglfundamentals.org/webgl/lessons/webgl-image-processing.html)

  - [x] [WebGL Image Processing Continued](https://webglfundamentals.org/webgl/lessons/webgl-image-processing-continued.html)

  - [x] [WebGL - Less Code, More Fun](https://webglfundamentals.org/webgl/lessons/webgl-less-code-more-fun.html)

  - [x] [WebGL - Scene Graph](https://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html)

  - [x] [WebGL 3D Geometry - Lathe](https://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-lathe.html)

  - [x] [WebGL Resizing the Canvas](https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html)

  - [x] [WebGL and Alpha](https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html)

  - [x] [WebGL - Rasterization vs 3D libraries](https://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html)

  - [x] [WebGL Anti-Patterns](https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html)

  - [x] [TWGL, A tiny WebGL helper library › Examples](http://twgljs.org/#examples)

* [WebGL2 Fundamentals](https://webgl2fundamentals.org) (Greggman, 2012–2018 ongoing) _the same recipe as WebGL Fundamental: comprehensive, high-quality articles, well explained, learning step by step_

* [Intro to WebGL with Three.js](http://davidscottlyons.com/threejs-intro/) (David Lyons, 10-11.2014)  

  [slides](http://davidscottlyons.com/threejs-intro/) | [vidéo 10.2014](https://youtu.be/6eLl8yQnxHQ) 18mn. | [vidéo 11.2014](https://youtu.be/-L6WWbKthvw) 43mn. | [sources](https://github.com/davidlyons/threejs-intro)

  

## Books



* [Programming 3D Applications with HTML5 and WebGL — 3D Animation and Visualization for Web Pages](https://www.amazon.de/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966/) by Tony Parisi, O'Reilly, 2014



## Articles



* [ECMAScript modules in browsers](https://jakearchibald.com/2017/es-modules-in-browsers/) (Jake Archibald, 02.05.2017)

* [A Primer on Bézier Curves](https://pomax.github.io/bezierinfo/) _A free, online book for when you really need to know how to do Bézier things_

* [Nvidia Developer › GPU Gems 3 › Chapter 25. Rendering Vector Art on the GPU](https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html) (Charles Loop & Jim Blinn, 

Microsoft Research) _Presents a method for accelerating the rendering of vector representations on the GPU_

* [Wikipedia › Octree](https://en.m.wikipedia.org/wiki/Octree) _An octree is a tree data structure in which each internal node has exactly eight children. Octrees are most often used to partition a three-dimensional space by recursively subdividing it into eight octants. […]_



## Useful resources



* [Shadertoy](https://www.shadertoy.com/) _A curated collection of shaders from all around the world – source, textures, editor and preview_  

  (and a [vintage version 0.4](https://www.iquilezles.org/apps/shadertoy/index2.html)?)

* [The Book of Shaders Editor](http://editor.thebookofshaders.com) _An online GLSL editor, similar to ShaderToy_



## Interesting examples



* [Three examples › CSS3D › Periodic table](https://threejs.org/examples/#css3d_periodictable) ([Source](https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js)) Three.js coupled to a CSS 3D renderer

* [Tendrils - epok | Trust - Max Cooper](https://epok.tech/work/tendrils/) _Forms in motion, interact spontaneously, knitting emergent interconnections; interactive music visuals for Max Cooper's Emergence project._