Demystifying shaders
Download as PPTX, PDF0 likes306 views
The document explains the basics of WebGL shaders, specifically in GLSL ES, which is a high-level shading language with a C-like syntax. It describes the process of transforming vertex coordinates from model space to clip space using vertex and fragment shaders, including setting necessary variables. Resources for further reading on shaders and rendering are also provided.
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