Questions about ES2/GL3 shaders

[Ats]

Sorry, I didn't see that you uploaded the changes to GitHub. I'm on it!

Edit: All right, everything's fine on Android. I manually tried libGLESv1_CM.so and then libGLESv2.so

Here's the new libzgeandroid.so
Maybe I could directly make a PR on gihtub with the new lib next time?

[VilleK]

Thanks. I now also committed a fix for the ANDROID constant.

[Ats]

All right, it's perfect now. Just one very little detail, here's the repro:

• Put nothing (or libGLESv1_CM.so) in ZExternalLibrary.ModuleName and ZExternalLibrary.BeforeInitExp needs to have the automatic detection code:

  

  ModuleName01.png (8 KiB) Viewed 18405 times

• Run the app in preview mode
• ZExternalLibrary.ModuleName is now opengl32, but in the project tree, the name isn't updated:

  

  ModuleName02.png (7.72 KiB) Viewed 18405 times

It's not a breaking problem, but it's a bit weird when ZExternalLibrary isn't selected, and I was wondering how it was able to work since it wasn't updates to opengl32

[Ats]

I'm back at discovering shaders. I managed to make the vertex color one:

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

uniform mat4 modelViewProjectionMatrix;
attribute vec3 position; // vertex position
attribute vec3 color;    // vertex color

varying vec4 v_Color;

void main()
{
  v_Color = vec4(color, 1.0);
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
}

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

varying vec4 v_Color;

void main()
{
    gl_FragColor = v_Color;
}

By the way, is " #ifdef GL_ES precision mediump float; #endif " mandatory in both, or at all?

Edit:
I just realized that position and color are vec4 in the ZGameEditor Help...
So maybe that is better?? But it's not working on Android, while the previous vec3 one is... ???

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

uniform mat4 modelViewProjectionMatrix;
attribute vec4 position; // vertex position
attribute vec4 color;    // vertex color

varying vec4 v_Color;

void main()
{
  v_Color = color;
  gl_Position = modelViewProjectionMatrix * position;
}

Looks like I'm not the only one who is perplexed: https://stackoverflow.com/questions/189 ... c4-or-vec3
"I suppose this is why most tutorials never touch on this topic."


--

I'm also struggling to convert Kjell phong light shader to ES2/GL3. I made something that seems to work, but it's not taking account material colors, and gives different results on preview, build and android

Here's the Vertex Shader from compatible:

Code: Select all

varying vec3 N;
varying vec3 v;

void main(void)
{
   v = vec3(gl_ModelViewMatrix * gl_Vertex);
   N = normalize(gl_NormalMatrix * gl_Normal);
   gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
   gl_FrontColor = gl_Color;
}

to ES2/GL3:

Code: Select all

#ifdef GL_ES
  precision mediump float;
#endif

uniform mat4 modelViewMatrix;
uniform mat4 modelViewProjectionMatrix;
uniform mat3 normalMatrix;

attribute vec3 position; // vertex position
attribute vec3 normal;   // vertex normal

varying vec3 N;
varying vec3 v;

void main(void)
{
  v = vec3(modelViewMatrix * vec4(position, 1.0));
  N = normalize(normalMatrix * normal);
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
  gl_FrontColor = gl_Color;
}

But I don't see what to change in the Fragment Shader:

Code: Select all

//

varying vec3 N;
varying vec3 v;

void main (void)
{
   vec3 L = normalize(gl_LightSource[0].position.xyz - v);
   vec3 E = normalize(-v); // we are in Eye Coordinates, so EyePos is (0,0,0)
   vec3 R = normalize(-reflect(L,N));

   //calculate Ambient Term:
   vec4 Iamb = gl_FrontLightProduct[0].ambient;

   //calculate Diffuse Term:
   vec4 Idiff = gl_Color * gl_FrontLightProduct[0].diffuse * max(dot(N,L), 0.0);
   Idiff = clamp(Idiff, 0.0, 1.0);

   // calculate Specular Term:
   vec4 Ispec = gl_FrontLightProduct[0].specular
                * pow(max(dot(R,E),0.0),0.3*gl_FrontMaterial.shininess);
   Ispec = clamp(Ispec, 0.0, 1.0);

   // write Total Color:
   gl_FragColor = gl_FrontLightModelProduct.sceneColor + Iamb + Idiff + Ispec;
}

[Kjell]

Hi Ats,

By the way, is " #ifdef GL_ES precision mediump float; #endif " mandatory in both, or at all?

It's not required, but by default floats are set to precision highp and not every mobile GPU supports that. And i guess if your shader doesn't define any floating-point variables, it's not needed either ( but that's probably pretty rare ).

I just realized that position and color are vec4 in the ZGameEditor Help...
So maybe that is better?? But it's not working on Android, while the previous vec3 one is... ???

It should work. Did you only change "attribute vec3 color" into vec4? Because then the "vec4(color, 1.0);" line is incorrect.

Looks like I'm not the only one who is perplexed: https://stackoverflow.com/questions/189 ... c4-or-vec3

It's entirely up to the engine creator to decide that. It doesn't really matter though.

I'm also struggling to convert Kjell phong light shader to ES2/GL3. I made something that seems to work, but it's not taking account material colors, and gives different results on preview, build and android

You can't use gl_FrontColor in ES2/GL3. Keep in mind that on desktop GL3 has backwards-compatibility, so if you accidentally use deprecated features they still work.

But I don't see what to change in the Fragment Shader:

You need to get rid of everything that uses a "gl_" prefix aside from gl_FragColor. Unfortunately ZGE doesn't pass any light values to your shader automatically, so you need to do that yourself using ShaderVariable components.

K

[Ats]

Thanks for the explanations

It should work. Did you only change "attribute vec3 color" into vec4? Because then the "vec4(color, 1.0);" line is incorrect.

I just verified again:

Code: Select all

uniform mat4 modelViewProjectionMatrix;
attribute vec3 position, color;
varying vec4 v_Color;

void main()
{
  v_Color = vec4(color, 1.0);
  gl_Position = modelViewProjectionMatrix * vec4(position, 1.0);
}

is working on PC and Android:

Screenshot_20210616-160451.png (60.01 KiB) Viewed 18286 times

Code: Select all

//
uniform mat4 modelViewProjectionMatrix;
attribute vec4 position, color;
varying vec4 v_Color;

void main()
{
  v_Color = color;
  gl_Position = modelViewProjectionMatrix * position;
}

is working on PC but not on Android:

Screenshot_20210616-160348.png (51.32 KiB) Viewed 18286 times

Edit:
Got it!!!
The problem was coming from meshes vertex color alpha not set to "C.A = 1;", again...
VilleK, since the results on Android are never the same as on computer because of this, why isn't it already set like this in the source code of ZGE instead of having to manually configure it every time in all projects?

[Ats]

Also, the updated beta with inheritance in classes broke the BitmapCell:

Capture d’écran (251).png (46.74 KiB) Viewed 18279 times

Unless the new beta is a fork from before the merge between Classes and the other fixes?

[VilleK]

Unless the new beta is a fork from before the merge between Classes and the other fixes?

It is a fork but should still work. I found the problem with bitmapcells and will fix it.

About the missing alpha in vertex colors, I could initialize this to 1.0 but I also want to understand why this is not needed on desktop. @Kjell: Do you have any theory?

[Kjell]

Hi Ville,

About the missing alpha in vertex colors, I could initialize this to 1.0 but I also want to understand why this is not needed on desktop.

I'm not entirely sure, but i suspect that a Android Activity has a white background by default and any pixel of your front-buffer that isn't fully opaque automatically gets "blended" with that background color ( just like WebGL ). On desktop this behavior doesn't happen by default. Could be something else though ..

K

[Ats]

So I'm discovering the shader UniformVariables to remove the gl_ things, and I have a little question, just to be sure:

gl_FrontLightModelProduct.sceneColor is the ambient colour of the scene, so App.AmbientLightColor

But what about those three?
gl_FrontLightProduct[0].ambient
gl_FrontLightProduct[0].diffuse
gl_FrontLightProduct[0].specular

Are they the material Color, SpecularColor and EmissionColor?

[Kjell]

Hi Ats,

All of those built-in variables are actually pre-calculated using various parameters by the OpenGL driver.

gl_FrontLightModelProduct = Material.EmissionColor + Material.AmbientColor * App.AmbientLightColor
gl_FrontLightProduct[0].ambient = Material.AmbientColor * Light0.AmbientColor
gl_FrontLightProduct[0].diffuse = Material.Color * Light0.Color
gl_FrontLightProduct[0].specular = Material.SpecularColor * Light0.SpecularColor

However, the Material / Light components in ZGE don't have properties for all of these values ( i marked those red ) .. so unless you're using OpenGL calls to set them ( which you can't in ES2/GL3 because all of this has been removed ) these values are always their default.

K

[Ats]

Ok... But how does compatible works then if those values doesn't exist in ZGE? If they have default values, then I shouldn't be worried not using them in the ES2/GL3 shader, right? (not sure)

Anyway, I'm already struggling to pass the App.AmbientLightColor to the shader in a simple test... It should be the color of the "sun" but everything is black instead. Am I doing something wrong?

Code: Select all

<Shader Name="LightAmbiantShader">
<VertexShaderSource>
<![CDATA[//
uniform mat4 modelViewProjectionMatrix;

attribute vec4 position, color; // vertex position

void main(void)
{
  gl_Position = modelViewProjectionMatrix * position;
}]]>
</VertexShaderSource>
<FragmentShaderSource>
<![CDATA[//
uniform vec4 lightAmbientColor;

void main (void)
{
   gl_FragColor = lightAmbientColor;
}]]>
</FragmentShaderSource>
<UniformVariables>
<ShaderVariable VariableName="lightAmbientColor" ValuePropRef="App.AmbientLightColor"/>
</UniformVariables>
</Shader>

[Kjell]

Hi Ats,

But how does compatible works then if those values doesn't exist in ZGE?

Just because ZGE doesn't use certain OpenGL features that doesn't mean they don't exist. OpenGL is basically a state machine.

If they have default values, then I shouldn't be worried not using them in the ES2/GL3 shader, right?

Most of the built-in light & material features were removed in ES2/GL3 .. and non-existing variables can't have a default value obviously.

Anyway, I'm already struggling to pass the App.AmbientLightColor to the shader in a simple test... It should be the color of the "sun" but everything is black instead. Am I doing something wrong?

The ShaderVariable component is pretty limited and a bit confusing. You can only use individual floats ( no vec2/3/4 or mat4 ) or arrays. For your specific situation / shader i'd just use a array of mat4 and transfer all the variables that way. For example:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" AmbientLightColor="1 0.5 0.25 1" FileVersion="2">
  <OnRender>
    <ZExpression>
      <Expression>
<![CDATA[//

DemoData[0][0,0] = App.AmbientLightColor.R;
DemoData[0][0,1] = App.AmbientLightColor.G;
DemoData[0][0,2] = App.AmbientLightColor.B;]]>
      </Expression>
    </ZExpression>
    <UseMaterial Material="DemoMaterial"/>
    <RenderNet/>
  </OnRender>
  <Content>
    <Array Name="DemoData" Type="5" SizeDim1="1"/>
    <Shader Name="DemoShader">
      <VertexShaderSource>
<![CDATA[//

void main()
{
  gl_Position = gl_Vertex;
}]]>
      </VertexShaderSource>
      <FragmentShaderSource>
<![CDATA[//

uniform mat4 data;

void main()
{
  gl_FragColor = vec4(data[0][0], data[0][1], data[0][2], 1.0);
}]]>
      </FragmentShaderSource>
      <UniformVariables>
        <ShaderVariable VariableName="data" ValueArrayRef="DemoData" ArrayKind="1"/>
      </UniformVariables>
    </Shader>
    <Material Name="DemoMaterial" Shading="1" Light="0" ZBuffer="0" Shader="DemoShader"/>
  </Content>
</ZApplication>

K

[Ats]

Hahaha each time you help me, everything is multiplied per 3
So what if I render several materials at the same time. Would it be better to have an array per shader, or reuse the same array before rendering each material?

[Kjell]

Hi Ats,

So what if I render several materials at the same time. Would it be better to have an array per shader, or reuse the same array before rendering each material?

That's difficult to answer. It really depends on a bunch of factors .. but in general it's probably most convenient to just reuse the same array.

K