{"id":15389043,"url":"https://github.com/olange/learning-webgl","last_synced_at":"2025-10-07T12:34:11.329Z","repository":{"id":38450945,"uuid":"136375077","full_name":"olange/learning-webgl","owner":"olange","description":"Learning using WebGL, Three.js and Babylon.js – articles, useful resources, courseware, personal notes","archived":false,"fork":false,"pushed_at":"2023-01-26T16:41:25.000Z","size":7235,"stargazers_count":39,"open_issues_count":21,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-05T13:12:16.201Z","etag":null,"topics":["code-retreat","gongfuio","learning-notes","shaders","threejs","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olange.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-06T19:11:20.000Z","updated_at":"2024-09-05T08:14:10.000Z","dependencies_parsed_at":"2023-02-05T01:46:23.116Z","dependency_job_id":null,"html_url":"https://github.com/olange/learning-webgl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-webgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-webgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-webgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olange%2Flearning-webgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olange","download_url":"https://codeload.github.com/olange/learning-webgl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219918565,"owners_count":16568993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-retreat","gongfuio","learning-notes","shaders","threejs","webgl"],"created_at":"2024-10-01T14:58:57.181Z","updated_at":"2025-10-07T12:34:11.236Z","avatar_url":"https://github.com/olange.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learning WebGL, GLSL and Three.js\n\nArticles, useful resources, courseware, personal notes\n\n[![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\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n## Workshops\n\n* [Shader Programming Primer: Real-Time Animation and Effects with GLSL](workshops/shaders-primer/README.md)  \n  Mapping Festival 2019 / Workshop 6 · 23.05.2019 10h–19h  \n  by [Leander Herzog](https://www.shadertoy.com/user/lennyjpg) · Fonderie Kugler, Genève\n\n## Codelabs\n\n* [Texturing a video with a moire pattern · ShaderToy](https://www.shadertoy.com/view/WlBGzW) by Olivier Lange, Leander Herzog \u0026 Nicola Papale\n* [First steps with WebGL and Three.js](codelabs/intro-to-webgl) _first steps and experiments, inspired by the slides  \n  of David Lyons (see [tutorials](#tutorials) hereafter)_\n\n## Experiments\n\n* [01 · Three and Web Components](experiments/01-webgl-component/) Three.js animation in a web component\n* [02 · Three and embedded Web Components](experiments/02-webgl-subcomponent) Three.js animations in embedded web components\n* [03 · Three and plane layers](experiments/03-webgl-layers) Three.js animation of plane layers, with holes, rotating over each other\n\n## Tutorials\n\n* [The Book of Shaders](https://thebookofshaders.com) by Patricio Gonzalez Vivo and Jen Lowe\n* [OpenGL Introduction](https://open.gl/introduction) by Alexander Overvoorde\n* [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html) (Greggman, 2012–2018 ongoing) _comprehensive collection of articles about WebGL, explained step by step_\n  - [x] [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)\n  - [x] [WebGL How It Works](https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html)\n  - [x] [WebGL Shaders and GLSL](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html)\n  - [x] [WebGL Image Processing](https://webglfundamentals.org/webgl/lessons/webgl-image-processing.html)\n  - [x] [WebGL Image Processing Continued](https://webglfundamentals.org/webgl/lessons/webgl-image-processing-continued.html)\n  - [x] [WebGL - Less Code, More Fun](https://webglfundamentals.org/webgl/lessons/webgl-less-code-more-fun.html)\n  - [x] [WebGL - Scene Graph](https://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html)\n  - [x] [WebGL 3D Geometry - Lathe](https://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-lathe.html)\n  - [x] [WebGL Resizing the Canvas](https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html)\n  - [x] [WebGL and Alpha](https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html)\n  - [x] [WebGL - Rasterization vs 3D libraries](https://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html)\n  - [x] [WebGL Anti-Patterns](https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html)\n  - [x] [TWGL, A tiny WebGL helper library › Examples](http://twgljs.org/#examples)\n* [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_\n* [Intro to WebGL with Three.js](http://davidscottlyons.com/threejs-intro/) (David Lyons, 10-11.2014)  \n  [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)\n  \n## Books\n\n* [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\n\n## Articles\n\n* [ECMAScript modules in browsers](https://jakearchibald.com/2017/es-modules-in-browsers/) (Jake Archibald, 02.05.2017)\n* [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_\n* [Nvidia Developer › GPU Gems 3 › Chapter 25. Rendering Vector Art on the GPU](https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html) (Charles Loop \u0026 Jim Blinn, \nMicrosoft Research) _Presents a method for accelerating the rendering of vector representations on the GPU_\n* [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. […]_\n\n## Useful resources\n\n* [Shadertoy](https://www.shadertoy.com/) _A curated collection of shaders from all around the world – source, textures, editor and preview_  \n  (and a [vintage version 0.4](https://www.iquilezles.org/apps/shadertoy/index2.html)?)\n* [The Book of Shaders Editor](http://editor.thebookofshaders.com) _An online GLSL editor, similar to ShaderToy_\n\n## Interesting examples\n\n* [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\n* [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._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folange%2Flearning-webgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folange%2Flearning-webgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folange%2Flearning-webgl/lists"}