This forum post will serve as preliminary documentation for the new support for WebGL 2 shader variants now supported in r321.
To get started, download the latest effect SDK files from the Addon SDK manual. This now includes a sample WebGL 2 effect, which just renders red with WebGL 1 and green with WebGL 2 to demonstrate which variant is in use.
Compatibility
All existing WebGL 1 shaders are compatible with both WebGL 1 and WebGL 2. There is no need to write a WebGL 2 variant of a shader unless you need specific features only available with WebGL 2.
If you do write a WebGL 2 shader, we strongly recommend still providing a WebGL 1 shader. Do whatever you can to support WebGL 1, whether it's a low quality version, glitchy, or even just output transparency so it doesn't render. If you don't provide a WebGL 1 shader at all, then any project using your shader will cause an error on devices that still only support WebGL 1, with the project failing to load and just displaying a blank screen. There are some details below on using WebGL 1 extensions to support more devices.
Providing a WebGL 2 shader variant
To provide a WebGL 2 shader variant, add the following property to addon.json:
"supported-renderers": ["webgl", "webgl2"]
This tells Construct to look for both a WebGL 1 and WebGL 2 shader for your addon.
The WebGL 1 shader is still in the file effect.fx as before. If enabled then the file effect.webgl2.fx specifies the shader to load for WebGL 2.
Writing WebGL 2 shaders
Our documentation doesn't cover the full details of writing WebGL shaders - there are lots of other resources across the web covering that. However some key points to note when writing a WebGL 2 shader are:
- A WebGL 2 shader MUST start with the line
#version 300 es. This must be the first line - no comments or other lines are allowed before it. - Change
varying to in for the vTex declaration.
gl_FragColor is not used in WebGL 2 shaders. Instead declare out lowp vec4 outColor; at the top level and assign the result color to that.- The
texture2D() function for sampling a texture is now just texture() with WebGL 2.
Once adapted you can then make use of WebGL 2 shader features, such as dFdx(), dFdy() and textureGrad().
Using WebGL 1 extensions
When only WebGL 1 is supported, Construct r321+ unconditionally activates the following extensions if supported:
- EXT_frag_depth
- OES_standard_derivatives
- EXT_shader_texture_lod
If your WebGL 2 shader uses equivalent features, this means you can sometimes support WebGL 1 too by activating them in your WebGL 1 shader, e.g.:
#extension GL_EXT_frag_depth : enable
#extension GL_EXT_shader_texture_lod : enable
#extension GL_OES_standard_derivatives : enable
// now you can use gl_FragDepthEXT, dFdx, dFdy, texture2DGradEXT etc.
Note however Construct currently doesn't support any way to provide an alternative WebGL 1 shader when these extensions are not supported. Either WebGL 2 or WebGL 1 with some extensions should be widely supported, but it is difficult to find good quality data on this. This approach lets you support more devices though, as instead of requiring WebGL 2, your shader could work with WebGL 1 too if the necessary extensions are available.
Testing
Construct r321+ now provides a setting to force the editor and preview to run with WebGL 1. This can help you test your shader variants with both WebGL 1 and WebGL 2 (assuming your device supports WebGL 2). Note this option exists for shader testing only - exported projects will continue to use WebGL 2 when available regardless of the editor setting.
Conclusion
Effect addons in Construct r321+ can now take advantage of WebGL 2 shader features by providing a WebGL 2 shader variant. However the shader must be written with updated syntax for GLSL ES 3.0. It is sometimes possible to use WebGL 2 shader features with WebGL 1 using extensions, which will broaden support for your shader.