Built with
Hey 👋
Welcome to the last day of WebGL month.
This article won't cover any new topics, but rather summarize previous 30 days
Previuos tutorials:
Day 1. Intro
This article doesn't cover any WebGL topics, but rather explains what WebGL does under the hood. TL;DR: it calculates colors of each pixel it has to draw
Day 2. Shaders and points
Introduction to WebGL API and GLSL shaders with the simpliest possible primitive type – point
Day 3. Shader uniforms, lines and triangles
This article covers more ways of passing data to shaders and uses more complex primitives to render
Day 4. Shader varying
Passing data from vertex to fragment shader with varyings
Day 5. Interleaved buffers
Alternative ways of storing and passing vertex data to shaders
Day 6. Indexed buffer
A technique which helps reduce number of duplicate vertices
Day 7. Cleanup and tooling
WebGL is fun, but it requires a bit of tooling when your project grows. Luckily we have awesome tools like webpack
Day 8. Textures
Intro to textures
Day 9. Image filters
Taking advantage of fragment shader to implement simple image "filters" (inverse, black and white, sepia)
Day 10. Multiple textures
How to use multiple textures in a single webgl program
Day 11. Reducing WebGL boilerplate
Implementation of some utility classes and functions to reduce WebGL boilerplate
Day 12. Highdpi displays and WebGL viewport
How to handle retina displays with canvas and use webgl viewport
Day 13. Simple animation
All previous examples where static images, this article will add some motion to the scene
Day 14. Intro to 3D
Theory of 3D compuatations required for 3D rendering. No code
Day 15. Rendering a cube
3D theory applied on practice to render 3D cube
Day 16. Depth buffer. Cube faces colors
This article contains fixes for previous example and adds more colors
Day 17. OBJ format
Implementing simple parser for OBJ format
Day 18. Flat shading
Implementation of flat shading
Day 19. Rendering multiple objects
A typical 3D scene consists of multiple objects, this tutorial will teach you how to render more than 1 object
Day 20. Rendering a minecraft dirt cube
Texturing 3D object with Blender and WebGL
Day 21. Rendering a minecraft terrain
We've learned how to render multiple objects. How to render 10000 of objects?
Day 22. Reducing number of webgl calls by 5000 times
Previous example worked, but wasn't really performance. This article explains instancing (a technique which helps to improve performance when rendering a large amount of same objects)
Day 23. Skynox
Adding "environment" to the scene
Day 24. Combining terrain and skybox
How to use multiple WebGL programs together
Day 25. Mipmaps
A technique which improves performance of shaders reading data from textures
Day 26. Rendering to texture
Rendering to texture allows to apply some "post-effects" and might be used for a variety of use-cases
Day 27. Click detection. Part I
Day 28. Click detection. Part II
Detecting object under the cursor might seem a tough task, but it might be done without complex 3d math in JS
Day 29. Fog
Improving scene with fog
Day 30. Text rendering in WebGL
An overview of text rendering techniques in WebGL
Useful links
I've started working with WebGL only a year and a half ago. My WebGL journey started with an awesome resource – https://webglfundamentals.org/
One more important thing to understand: WebGL is just a wrapper of OpenGL, so almost everything from OpenGL tutorials might be used in WebGL as well: https://learnopengl.com/
Exploring more glsl stuff: https://thebookofshaders.com/
Codepen for shaders: https://www.shadertoy.com/
Getting started with WebGL tutorial on MDN
Thanks!
Thanks for joining WebGL month. Hope this articles helped you learn WebGL! 😉
Feel free to submit questions, suggestions, improvements to github repo, get in touch with me via email or twitter
Top comments (1)
We are looking for: 3D WEBGL ENGINEER (USD 5000-8000)(remote) link drive.google.com/file/d/1qzWmBQ22D... . Candidate are interested PLS send CV to Email/Skype: trungnguyenaah@gmail.com . Ph: +840979093300, Thank