Good question! When it comes to geometry shaders or other shader types, WebGL , OpenGL ES , and OpenGL 2.1/3.x are equipped differently. Here's a detailed look:
1. Vertex and fragment shaders: Standard in WebGL
2. Geometry shaders: Only in OpenGL 3.2 and higher
3. Tessellation shaders and compute shaders
4. Workarounds for missing shaders in WebGL
5. Conclusion
1.) Vertex and fragment shaders: Standard in WebGL
- WebGL 1.0 (based on OpenGL ES 2.0) only supports two shader types :
- Vertex shaders (processing geometry per vertex)
- Fragment shaders (calculating pixel or fragment color)
- WebGL 2.0 (based on OpenGL ES 3.0) remains limited to the vertex and fragment shader , but offers extended features:
- Transform feedback for processing geometry without geometry shaders.
- Improved support for Uniform Buffer Objects (UBOs) and instancing .
2.) Geometry shader: Only in OpenGL 3.2 and higher
- Geometry shaders allow the creation of new geometry (points, lines, or triangles) from existing primitives.
- They are executed between the vertex shader and the rasterizer .
OpenGL 2.1 (GLSL 120): No geometry shader
- Geometry shaders are not available in OpenGL 2.1 (and GLSL 120) . - Geometry shaders were introduced with OpenGL 3.2 and GLSL 150.
WebGL: No geometry shader support
- WebGL 1.0 and WebGL 2.0 do not support geometry shaders .
- You can only generate new geometry indirectly, e.g., via instancing or transform feedback in WebGL 2.0.
3.) Tessellation shaders and compute shaders
- Tessellation shaders (for geometry subdivision) and compute shaders (for GPU calculations) are only available in OpenGL 4.0+ .
- WebGL 1.0 and 2.0 do not support these shader types .
| Shader type | OpenGL 2.1 (GLSL 120) | OpenGL 3.2+ | WebGL 1.0 | WebGL 2.0 |
|---|---|---|---|---|
| Vertex shader | ✅ | ✅ | ✅ | ✅ |
| Fragment shader | ✅ | ✅ | ✅ | ✅ |
| Geometry shader | ❌ | ✅ (from GLSL 150) | ❌ | ❌ |
| Tessellation shader | ❌ | ✅ (OpenGL 4.0+) | ❌ | ❌ |
| Compute shader | ❌ | ✅ (OpenGL 4.3+) | ❌ | ❌ |
4.) Workarounds for missing shaders in WebGL
You can also achieve similar effects without geometry shaders or tessellation shaders in WebGL:
1. Instancing (WebGL 2.0):
- Repeating geometry with instanced arrays .
- For example, many copies of a triangle can be generated and moved.
2. Vertex shaders for procedural geometry :
- In a vertex shader, you can dynamically calculate vertex positions to change geometry.
3. Transform feedback (WebGL 2.0) :
- Calculations from the vertex shader can be written to a buffer object and reused.
4. GPU particle systems :
- Use vertex and fragment shaders to simulate complex particle effects without geometry shaders.
5.) Conclusion
- Geometry shaders, tessellation shaders, and compute shaders are not part of WebGL or OpenGL 2.1 (GLSL 120) .
- In WebGL, you are limited to vertex shaders and fragment shaders .
- For advanced geometry manipulation in WebGL 2.0, you can use workarounds such as instancing or transform feedback .
