3 ms·

Any good resources for getting started with WebGL? I'm going to start transitioning a large amount of slow <canvas> drawing to WebGL, and I'd love any pointers

Any good resources for getting started with WebGL? I'm going to start transitioning a large amount of slow <canvas> drawing to WebGL, and I'd love any pointers for someone getting started without any experience in graphics and gaming (which seems to be the starting point most tutorials use).

rjkaplan 11y ago
I recently got started with WebGL so I hope that others post more/better resources, but... - I found this to be a good starting point for WebGL as a whole: https://webglfundamentals.org/ https://webglfundamentals.org/ - This is a great resource for learning about GLSL and shaders (writing code that runs on the GPU): http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/ - As a starting point for implementing the Jump Flood Algorithm (which is what I used to implement the Voronoi Diagram demos) I found it helpful to read Chris Wellon's articles on GPGPU programming. Here's the first one: http://nullprogram.com/blog/2014/06/10/ http://nullprogram.com/blog/2014/06/10/
mattdesl 11y ago
Usually I recommend PIXI or ThreeJS, but here's some links for low level WebGL/GLSL things. :) https://github.com/stackgl/shader-school https://github.com/stackgl/shader-school https://github.com/stackgl/webgl-workshop https://github.com/stackgl/webgl-workshop https://github.com/stackgl/learning-webgl-01 https://github.com/stackgl/learning-webgl-01 https://github.com/stackgl/learning-webgl-02 https://github.com/stackgl/learning-webgl-02 http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/
Zecc 11y ago
> http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/ is also available as the more memorable: http://thebookofshaders.com/ http://thebookofshaders.com/

rjkaplan 11y ago

I recently got started with WebGL so I hope that others post more/better resources, but... - I found this to be a good starting point for WebGL as a whole: https://webglfundamentals.org/ https://webglfundamentals.org/ - This is a great resource for learning about GLSL and shaders (writing code that runs on the GPU): http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/ - As a starting point for implementing the Jump Flood Algorithm (which is what I used to implement the Voronoi Diagram demos) I found it helpful to read Chris Wellon's articles on GPGPU programming. Here's the first one: http://nullprogram.com/blog/2014/06/10/ http://nullprogram.com/blog/2014/06/10/

mattdesl 11y ago

Usually I recommend PIXI or ThreeJS, but here's some links for low level WebGL/GLSL things. :) https://github.com/stackgl/shader-school https://github.com/stackgl/shader-school https://github.com/stackgl/webgl-workshop https://github.com/stackgl/webgl-workshop https://github.com/stackgl/learning-webgl-01 https://github.com/stackgl/learning-webgl-01 https://github.com/stackgl/learning-webgl-02 https://github.com/stackgl/learning-webgl-02 http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/

Zecc 11y ago

> http://patriciogonzalezvivo.com/2015/thebookofshaders/ http://patriciogonzalezvivo.com/2015/thebookofshaders/ is also available as the more memorable: http://thebookofshaders.com/ http://thebookofshaders.com/