WebGL 2.0 and Engine release notes v0.207 [22.02.16]

Announcements
1

WebGL 2.0

Added WebGL 2.0 initial support, which is enabled by default on platforms which support WebGL 2.0 (stats: http://webglstats.com/webgl2)

This is just a beginning of WebGL 2.0 support. We will be adding more features, some of which helped to make After the Flood demo.

Engine is fully backwards compatible to WebGL 1.0, although some cases with custom shaders might get affected due to new keywords being added and some keywords been renamed in GLSL 3.0. Shaders that are changed using shader chunks will auto-rename methods to ensure backwards-compatibility between both WebGL versions.

Renamed build-in functions:

texture2D, textureCube > texture
texture2DProj > textureProj

Standarized extensions as built-in functions:

dFdx, dFdy, fwidth

Standarized extensions as built-in functions with renaming:

texture2DLodEXT, textureCubeLodEXT > textureLod
texture2DProjLodEXT > textureProjLod
texture2DGradEXT, textureCubeGradEXT > textureGrad
texture2DProjGradEXT > textureProjGrad

List of new GLSL 3.0 keywords that if you used as variable names might lead to compilation errors:

layout, centroid, flat, smooth, switch, case, default, mat2x2, mat2x3, mat2x4, mat3x2, mat3x3,
mat3x4, mat4x2, mat4x3, mat4x4, uint, uvec2, uvec3, uvec4, sampler3D, sampler2DShadow,
samplerCubeShadow, sampler2DArray, sampler2DArrayShadow, isampler2D, isampler3D, isamplerCube,
isampler2DArray, usampler2D, usampler3D, usamplerCube, usampler2DArray, coherent, volatile,
restrict, readonly, writeonly, resource, atomic_uint, noperspective, patch, sample, subroutine,
common, partition, active, asm, class, union, enum, typedef, template, this, goto, inline,
noinline, public, static, extern, external, interface, long, short, double, half, fixed,
unsigned, superp, input, output, hvec2, hvec3, hvec4, dvec2, dvec3, dvec4, fvec2, fvec3, fvec4,
sampler3DRect, filter, image1D, image2D, image3D, imageCube, iimage1D, iimage2D, iimage3D,
iimageCube, uimage1D, uimage2D, uimage3D, uimageCube, image1DArray, image2DArray,
iimage1DArray, iimage2DArray, uimage1DArray, uimage2DArray, imageBuffer, iimageBuffer,
uimageBuffer, sampler1D, sampler1DShadow, sampler1DArray, sampler1DArrayShadow, isampler1D,
isampler1DArray, usampler1D, usampler1DArray, sampler2DRect, sampler2DRectShadow,
isampler2DRect, usampler2DRect, samplerBuffer, isamplerBuffer, usamplerBuffer, sampler2DMS,
isampler2DMS, usampler2DMS, sampler2DMSArray, isampler2DMSArray, usampler2DMSArray, sizeof,
cast, namespace, using, sinh, cosh, tanh, asinh, acosh, atanh, trunc, round, roundEven, modf,
isnan, isinf, floatBitsToInt, floatBitsToUint, intBitsToFloat, uintBitsToFloat, packSnorm2x16,
unpackSnorm2x16, packUnorm2x16, unpackUnorm2x16, packHalf2x16, unpackHalf2x16, outerProduct,
transpose, determinant, inverse, textureSize, texelFetch, texelFetchOffset, textureOffset,
textureProjOffset, textureLodOffset, textureGardOffset, textureProjLodOffset,
textureProjGradOffset

Change Log:

  • Added preferWebGl2 option to Application arguments to enforce WebGL 1.0 context over WebGL 2.0
  • Added autoRender and renderNextFrame to Application to allow disabling auto rendering and providing auto-disable toggle (renderNextFrame) so it can be set to true to render next frame once
  • Added WebGL 2.0 new texture formats
  • Pass asset.file as third parameter to assets handler.load so custom handlers can get file object information within handlers implementation (thanks for PR #693 by @aidinabedi)
  • Vec2, Vec3, Vec4, Color, Mat3, Mat4, Quat now accept arays of values as constructor argument (thanks for PR #846 by @aidinabedi)
  • Added pc.OrientedBox which is same as pc.BoundingBox but with rotation
  • Added `pc.BoundingBox.intersectsBoundingSphere(sphere)’ method to check if bounding box intersects with bounding sphere
  • Added pc.BoundingSphere.intersectsBoundingSphere(sphere) method to check if bounding sphere intersects with another bounding sphere
  • Added to /extras/camera orbit-camera input files for mouse & touch, as well as easing to orbit-camera motion
  • Added workaround for WebVR to work in Firefox Nightly
  • Added documentation to events.once method
  • Added shader chunks ensuring backwards compatibility between WebGL 2.0 and 1.0
  • Improved reference for texture options
  • Improved reference for Application.setCanvasResolution
  • More features, fixes and improvements to ongoing 2D API
  • [FIX] orbit-camera to find shortest path on the yaw axis
  • [FIX] clamp particles emitter state texture to prevent particles warping
  • [FIX] typo in rollOffFactor for positional audio
  • [FIX] clear reference to material when destroying mesh, used to prevent GC’ing mesh instance
  • [FIX] auto attribute collection for shader chunks
  • [FIX] stencil properties construction
  • [FIX] shadows update respecting more shadowUpdateMode
  • [FIX] profiler rendering stats
  • [FIX] static light for meshes with more than 65,535 indices
  • [FIX] runtime lightmap blending
  • [FIX] static lights certain behaviours
  • [FIX] ambient was added to runtime lightmaps when there was static lightmap available
  • [FIX] depth render target was always rendering with screen resolution
  • [FIX] receiveShadow was not respected in some scenarios for shader generation
  • [FIX] multi-changes to material could lead to shader of a material not being update
2

Hi,

How do we access the GLSL 3.0 keywords that you advise against using as variable names?

I.e. how can I implement these functions in my shader files? Currently I’m getting errors that the functions don’t exist.

Many Thanks

3

You have to add to the top of your shader:
#version 300 es
So to ensure it uses GLSL 3 version.

Remember to test with WebGL 1 and make a fallback functionality, as it won’t work on WebGL 1.

1 Like
4

I added that to the top of my vertex shader, and added the necessary #definitions to deal with illegal naming.

And now my fragment shader is throwing the same error:
ERROR: 0:67: 'texelFetch' : no matching overloaded function found

Thanks for your help! :slight_smile:

5

Have you added it to fragment shader as well?

6

It doesn’t like it when I do that:
ERROR: 0:2: 'version' : #version directive must occur before anything else, except for comments and white space

I did try that before, and assumed because the shader files are concatenated (I think?) by pc.Shader, it doesn’t allow double-declarations.

For context, I have two .glsl files (vertex + fragment) that are compiled by a new pc.Shader

7

You would need to post a simple example project that replicates an issue.
And you did looked at this tutorial? https://developer.playcanvas.com/en/tutorials/custom-shaders/

8

I have, that’s what I’ve been loosely basing my implementation off’f.

For some reason, this is getting injected at the top of my fragment shader:
1: precision highp float;

Which is causing the version to go underneath.

I’ll try replicating it!

9

Okay, rather than doing my own project, I just forked the Custom Shader project — you can view my fork here:
https://playcanvas.com/project/481342/overview/customshader--fork

All I did was add #version 300 es to the top of the fragment shader only — and it’s throwing the same error*. Because the float is being prepended to the file at runtime.

1:	precision highp float;
2:	#version 300 es

Is this a part of the pc.Shader compilation?

** ERROR: 0:2: 'version' : #version directive must occur before anything else, except for comments and white space

10

Sorry to bump again, but I just digged-into the surface of the engine code and found a ‘forceFragmentPrecision’ call in the fragment shader generation code:

and the offending line here:

11

I’ve now tried with pc.BasicMaterial, which doesn’t have the forceFragmentPrecision parameter, and it works!

Only thing is, it’s also completely blank, haha. I’m not familiar with all the extra setup to get a BasicMaterial working. It would’ve been nice to use StandardMaterial — so perhaps this code-injection can be fixed somehow?

12

StandardMaterial actually should add ES3 define it self.

13

Are you referring to this line?

It’s not happening on Chrome (webGL2 enabled and forced) for me. Should I report it as an issue?

14

My app.graphicsDevice returns true for webgl2 in the console, btw.

15

Looking @Mr_f to conversation.

1 Like
16

Hey @rorz, have you tried using pc.shaderChunks.createShaderFromCode(device, vsCode, psCode, name)?

17

Sorry only just getting round to trying this — will update soon! Thank you for help.

19

Hey @Mr_F, I’m having troubles using ES3 on my shaders, just found this thread and tried creating the shader with pc.shaderChunks.createShaderFromCode but it fails to compile with the following error:

ERROR: 0:3: ‘pc_fragColor’ : must explicitly specify all locations when using multiple fragment outputs

edit: Nevermind it was obviously my fault I fixed it not having the uv output, I’ll see how to fix that.

But still I’m getting the same errors about attributes not being mapped, which for two of them (aPosition and aUv0) it’s correct, but the gl_VertexID variable I’m using is not an attribute, but a builtin GLSL 3.0 variable… don’t know what to do with this.

Here’s the project I’m testing on (public): https://playcanvas.com/editor/scene/705508