shaderMaterial and 300es imports in MRT

Glad you made it work!

You can improve the shadows by using poisson filtering:
https://playground.babylonjs.com/#8RU8Q3#30

Or PCF:
https://playground.babylonjs.com/#8RU8Q3#31

At low resolution poisson helps but i’d rather raise the resolution or better narrow the frustum of the shadow map (still have to test that)
PCF doesn’t work, I suspect it to be v5.

You seem to sell me v5 a lot, since it’s a personal project not in critical prod so I might use it if you tell me it’s stable enough to be used.

I have also to take the angle from the light to the normal of the face to vary a bit the color.

Hmm gotta admit I have issues getting the infos I need.
Do you know how I could get the angle between the normal of the face and the direction of the light in the fragment?

Yes, I think using 5.0 is a safe bet in your case!

1 Like

By taking the dot product of the normal and the direction of the light (dot(n, l)). That will give you the cos(angle) if n and l are normalized. Note that you may need to use -l instead of l.

that’s what I did in here:
https://playground.babylonjs.com/#8RU8Q3#26
but there I see I can get the light through the helpers like light0.something to have the vector while I hardcoded the position of the light in my example.

Your PG does not work for me:

https://playground.babylonjs.com/#8RU8Q3#32
Lesson of the day: chrome fail when you don’t output on all outputs while firefox just warns you and does the job ^^.

as for the 5.0.0-40 I got a shitload of

BREAKING CHANGE: The request ‘./Misc/computePressure’ failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a '.js’ file where the package.json contains ‘“type”: “module”’).
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I’ll take time to solve it but later cause I feel it’ll be a lot of hassle.
Worked on tree shaking improvement for the v5?

With 5.0 you will need this PR if you use Firefox (or alternatively use Firefox nightly build):

Adding @SahilTara regarding the ComputePressure error.

1 Like

webgpu is usable on firefox nightly?

Some things were working and not others, but with the latest update (of Firefox) even the basic PG does not work anymore.

Strange error… hmm I’ll look into it when i get back home!

Hey @Mikael, first off so sorry you’re running into this issue! I’m having a bit of trouble reproducing the error “The request ‘./Misc/computePressure’ failed to resolve only because it was resolved as fully specified…” :frowning: does it only happen with compute pressure specifically, or are there any other files that also get hit by this error?

What I found about the error online: webpack 5.0.0-beta.30 Module not found: Error: Can’t resolve ‘…/…/core-js/object/define-property’ · Issue #11467 · webpack/webpack (github.com). I wonder if anything on this issue thread is useful for resolving the error, such as the following block added to the modules.rules in webpack:

{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false
  }
}

Which would be a temp fix I think (if it works).

it doesn’t.
It’s more like change

import { Vector3, Color3 } from "@babylonjs/core/Maths/math";

to

import { Vector3, Color3 } from "@babylonjs/core/Maths/math.js";
1 Like

shadows-orientation
So I removed the shadows to test the faces orientation.
Of course I hardcoded the light orientation and the instance matrix seem to rotate it, dunno if there’s a way to get the light direction.

vertex:

precision highp float;

uniform vec3 diffuse;
uniform vec3 specular;
uniform mat4 normalMat;
uniform mat4 modelViewMatrix;

varying vec3 vDiffuse;
varying vec3 vSpecular;
varying vec3 vPosition;
varying vec3 vPositionW;
varying vec4 vNormal;

// Attributes
attribute vec3 position;
attribute vec4 normal;

// Uniforms

uniform mat4 viewProjection;

#include<instancesDeclaration>
#include<__decl__lightFragment>[0]

void main(void) {
    #include<instancesVertex>   
    vDiffuse = diffuse;
    vSpecular = specular;
    vPosition = position;
    vec4 worldPos = finalWorld * vec4(position, 1.0);

    gl_Position = viewProjection * finalWorld * vec4(position, 1.0);

    #include<shadowsVertex>[0]
    vNormal = normalize(normal);
}

fragment:

precision highp float;      

#extension GL_EXT_draw_buffers : require

layout(location = 0) out highp vec4 glFragData[2];

varying vec3 vDiffuse;
varying vec3 vSpecular;
varying vec3 vPositionW;
varying vec4 vNormal;

#include<helperFunctions>
#include<__decl__lightFragment>[0]
#include<shadowsFragmentFunctions>

void main(void) {
    // float shadow = computeShadow(vPositionFromLight0, vDepthMetric0, shadowSampler0, light0.shadowsInfo.x, light0.shadowsInfo.w);    
    float shadow = computeShadowWithPoissonSampling(vPositionFromLight0, vDepthMetric0, shadowSampler0, light0.shadowsInfo.y, light0.shadowsInfo.x, light0.shadowsInfo.w);
    // float shadow = computeShadowWithPCF3(vPositionFromLight0, vDepthMetric0, shadowSampler0, light0.shadowsInfo.yz, light0.shadowsInfo.x, light0.shadowsInfo.w);
    // float shadow = 1.0;
    float level = sin(dot(vNormal, vec4(0.5,0.5,1.0, 0.0)));    
    glFragData[0] = vec4(mix(vDiffuse, vSpecular, level) ,1.0);  
}

Dunno if there’s a documentation for all the helpers I can get from those includes.

Note that your light vector (1,1,0) is not normalized.

In these PGs (https://playground.babylonjs.com/#8RU8Q3#30), you can get the light direction from light0.vLightData.xyz (not normalized).

No, those are internal implementation details that are not meant to be used by end users.

Ohh okay so it’s happening with other files other than ComputePressure as well? Just want to confirm that with you!

If it is only with compute pressure I can try adding the “.js” on our end on the problematic import and see if that breaks anything on our end, and assuming nothing breaks I’ll PR the change. If it is also happening with other files it might be something that might not be caused by compute pressure specifically.

And there it is:


Of course I’ll tweak the colors and their mixing, playing with the shaders and all but most of the missing undocumented parts are there.

So the final version for documentation is:

vertex:

precision highp float;

uniform vec3 diffuse;
uniform vec3 specular;
uniform mat4 viewProjection;

varying vec3 vDiffuse;
varying vec3 vSpecular;
varying vec3 vPosition;
varying vec3 vPositionW;
varying vec3 vNormal;

attribute vec3 position;
attribute vec3 normal;

#include<instancesDeclaration>
#include<__decl__lightFragment>[0]

void main(void) {
    #include<instancesVertex>   
    vDiffuse = diffuse;
    vSpecular = specular;
    vPosition = position;
    vec4 worldPos = finalWorld * vec4(position, 1.0);

    gl_Position = viewProjection * finalWorld * vec4(position, 1.0);
    vNormal = normalize(vec3(finalWorld * vec4(normal, 0.0)));
    #include<shadowsVertex>[0]
}

fragment:

precision highp float;      

#extension GL_EXT_draw_buffers : require

layout(location = 0) out highp vec4 glFragData[2];

varying vec3 vDiffuse;
varying vec3 vSpecular;
varying vec3 vPositionW;
varying vec3 vNormal;

#include<helperFunctions>
#include<__decl__lightFragment>[0]
#include<shadowsFragmentFunctions>

void main(void) {
    // float shadow = computeShadow(vPositionFromLight0, vDepthMetric0, shadowSampler0, light0.shadowsInfo.x, light0.shadowsInfo.w);    
    float shadow = computeShadowWithPoissonSampling(vPositionFromLight0, vDepthMetric0, shadowSampler0, light0.shadowsInfo.y, light0.shadowsInfo.x, light0.shadowsInfo.w);
    // float shadow = computeShadowWithPCF3(vPositionFromLight0, vDepthMetric0, shadowSampler0, light0.shadowsInfo.yz, light0.shadowsInfo.x, light0.shadowsInfo.w);
    float level = clamp(sin(dot(-vNormal, normalize(light0.vLightData.xyz))), 0.0,1.0);    
    glFragData[0] = vec4(mix(vDiffuse, vSpecular, level * shadow) ,1.0);  
}

SahilTara
I have an error count of more than 200 so it might not just be that one.

No, those are internal implementation details that are not meant to be used by end users.

Could worth supporting that kind of usage maybe in a certain future.

Adding @RaananW who might be interested with the module import issues.

1 Like