Demystifying shaders
?Download as PPTX, PDF?
0 likes?298 views
These are the slides that accompanied Bruno's talk on the basics of shaders and GLSL given at Devhub in Toronto on 2016-05-26. A briefing: "Have you used Three.js to create basic scenes using the built-in shaders, but without real knowledge of what they were doing? This talk is for you! You'll learn what you need to know to start using shaders to create dynamic and interesting 3D scenes. We'll use a simple example using Three.js to demonstrate what Vertex and Fragment shaders do, the OpenGL Shading Language and basic texturing and lighting."
Demystifying shaders
- 2. - WebGL Shaders are written in GLSL-ES - High level shading language - C like syntax - Strongly typed! - We pass them in as strings to our application Open GL Shading Language (GLSL)
- 4. The simplest quad These coordinates are in Model Space They are defined to the model¡¯s own origin system Our vertex shader must transform these coordinates to clip space
- 5. Our Goal:
- 8. - Vertex Shader acts on each vertex to transform our points into clip space: - model space -> view space -> clip space - must set vec4 gl_Position; - Fragment Shader sets the color of each pixel/fragment - must set vec4 gl_FragColor; - We use uniforms, attributes and varyings to calculate these values Summary
- 9. - Shader School - https://github.com/stackgl/shader- school - www.thebookofshaders.com by Patricio Gonzalez Vivo - www.clicktorelease.com/blog/ by Jaume Sanchez - www.shadertoy.com - Figures taken from: - Real Time Rendering by Adenine-Moller et al - Wikipedia - http://www.codinglabs.net/ - OpenGL Documentation Resources and Further Reading