[SOLVED] Version of latest operational shader language (ESSL)

Referring to the tut:
https://developer.playcanvas.com/en/tutorials/custom-shaders/
As I have read a bit on ESSL; https://developer.playcanvas.com/en/api/pc.Shader.html
(cf "The language of the code is GLSL (or more specifically ESSL, the OpenGL ES Shading Language). " part) + having a bit educational experience, I have found that there is a version limitation within the compiler.
For instance writing/declaring:

in vec3 normal

will be too new for the PC compiler
instead it requires:

vec3 normal

which is an older ESSL version, but which?

PS: I am currently trying out a ESSL course by ebook - which one of these will best as latest fit to the PC ESSL version?

If you plan to support WebGL1 in your app, which you should since iOS/Safari still only have experimental WebGL2 support then you are targeting OpenGL ES 2.0.

Playcanvas/WebGL2 supports the newer GLSL 3.0 version and it can compile to it given a special directive, just make sure you have fallbacks for browsers not supporting this.

Ok, thanks … will make som checks on my Mac-devices as well (funny though - my mom’s iPhone 6 will go into fullscreen automatically when turning a PC-website from portrait to landscape [at least they do something positive for us])

1 Like

Final thing - why this effect?
This is taken from two different projects:
image

image

Cannot force WebGL1 on project 1?

Ah, never seen that but I imagine some feature detection makes the switch disabled.

@will or @vaios may be able to comment on this.

I can’t reproduce that issue in any of my projects. Can you show me an example of this happening or explain how I can reproduce?

I think I know what’s going on, if you go to settings -> rendering and switch off Prefer WebGL 2.0 then the result is the above. Which makes sense since the project always runs in WebGL 1.0.

actually it looks to be sort of a weird double toggle, meaning:
A) If both are turned off, one can click “Prefer WebGL2” in the rendering IF
B) Then “Prefer WebGL1” can be clicked, at the Play button
C) Turn off “Prefer WebGL2” and you end up with ‘Forced WebGL1’ (it seems):

NB-PS: I am still scrambling to learn a functional version of ESSL (I have tried examples from ten OpenGL ES 2 books + numerous websites and youtube-tuts that all fails at compile). Does anyone knows what book or online material they used to make After The Flood Demo?

PPS: And yes I am aware of this needed PC.JS-bridge (cf https://developer.playcanvas.com/en/tutorials/custom-shaders/):

var shaderDefinition = {
    attributes: {
        aPosition: pc.SEMANTIC_POSITION,
        vertex: pc.SEMANTIC_POSITION,
        uv1: pc.SEMANTIC_POSITION,
        aUv0: pc.SEMANTIC_TEXCOORD0
    },
    vshader: vertexShader,
    fshader: fragmentShader
};

I don’t have a book or tutorial to recommend specifically for ES 2.0, usually I study OpenGL tutorials and try to keep in mind the limitations / small differences with the ES 2.0 version.

A good starting place is, instead of writing new shaders for scratch, try to override existing shader chunks of the Playcanvas engine. It’s a great learning resource since you have small and easily understood pieces of code that you can tweak/change.

Here is an example:

https://developer.playcanvas.com/en/tutorials/warp-a-sprite-with-glsl/

And here is the full list of shader chunks: