SSRPass : fixed MAX_STEP

[ycw]

• make sure taht MAX_STEP is always float like according to

  three.js/examples/jsm/shaders/SSRShader.js

  Line 166 in be6a7db

  for(float i=0.;i<MAX_STEP;i++){

• and overwrite the SSRShader.defines 's one by correct value in correct order.

[Mugen87]

/ping @gonnavis

[gonnavis]

@ycw Thanks!

1. There indeed that this.width and this.height should be used instead of window.innerXXX to keep code consistency and let the application level control the width and height.

2. And I tested if MAX_STEP happens to be an integer, it will indeed cause shader errors.
   Could you please add toFixed(1) at here too?
   

   three.js/examples/jsm/postprocessing/SSRPass.js

   Line 642 in be6a7db

   this.ssrMaterial.defines.MAX_STEP = Math.sqrt( width * width + height * height );

   
   I think that usually, the MAX_STEP here will overwrite the initial setting, so it is more important.

3. EDIT: Oh, get it, What matters is the order, not the form. Don't mind the following question.
   Also out of curiosity, whether according to convention, this form

Object.assign( {}, SSRShader.defines, {
    MAX_STEP: abc,
}),

should be used instead of

Object.assign( {
    MAX_STEP: abc,
}, SSRShader.defines )

?

[gonnavis]

Should be multiplication sign here? this.height * this.height

[mrdoob]

How about doing this instead?

for(float i=0.0,l=float(MAX_STEP);i<l;i++){

[ycw]

Object.assign( {}, SSRShader.defines, {
    MAX_STEP: abc,
}),

should be used instead of

Object.assign( {
    MAX_STEP: abc,
}, SSRShader.defines )

?

const his = { x : 1 }
const her = { x : 2 }
Object.assign( his, her ) // { x : 2 } ( the 1st par is mutated )
his.x === 2 // true

implies SSRShader.defines.MAX_STEP (if any will replace MAX_STEP: abc .

---

btw, i also found one here

three.js/examples/jsm/objects/ReflectorForSSRPass.js

Lines 111 to 113 in be6a7db

	defines: Object.assign({
	useDepthTexture: useDepthTexture
	}, Reflector.ReflectorShader.defines),

[gonnavis]

How about doing this instead?

for(float i=0.0,l=float(MAX_STEP);i<l;i++){

@mrdoob @ycw Oh, this modification looks ok, but in actual use, I found that it will cause my browser and even the system to crash. 😨
I'm using Win10Pc and Chrome88.

[mrdoob]

@mrdoob @ycw Oh, this modification looks ok, but in actual use, I found that it will cause my browser and even the system to crash. 😨

That's very surprising... Could you test the PR in your system?

[gonnavis]

@mrdoob I have been keep testing the PR code and there is only a little need to be modified no big problem.
But with this change for(float i=0.0,l=float(MAX_STEP);i<l;i++){, I tested three times, two browser crashes and one system crash.

I remember that it may because glsl can't use dynamic variable in for loop. But why just crash not throw error, I have no idea~~.
I'm keep trying.

[mrdoob]

@gonnavis but for(float i=0.;i<float(MAX_STEP);i++){ works?

[gonnavis]

@gonnavis but for(float i=0.;i<float(MAX_STEP);i++){ works?

Yes, and

float max_step=float(MAX_STEP);
for(float i=0.;i<max_step;i++){

float max_step=50.;
for(float i=0.;i<max_step;i++){

uniform float max_step;
...
for(float i=0.;i<max_step;i++){

work too, very surprising.

I really remember that can't use variable and even can't use uniform in for loop, this is why I used defines for MAX_STEP. EDIT: This should be IOS and WebGL1 related.

[gonnavis]

@mrdoob @ycw Turned out that on IOS WebGL1 all these

float max_step=float(MAX_STEP);
for(float i=0.;i<max_step;i++){

float max_step=50.;
for(float i=0.;i<max_step;i++){

uniform float max_step;
...
for(float i=0.;i<max_step;i++){

for(float i=0.0,l=float(MAX_STEP);i<l;i++){

will cause error ERROR: 0:230: 'i' : Loop index cannot be compared with non-constant expression and loss the whole SSR effect.

Just for(float i=0.;i<float(MAX_STEP);i++){ works. Should because this just convert, not declare new variable.
But I am worried that there will be a little performance loss when writing this way.
So I personally suggest to use the toFixed method of @ycw at the beginning.

[mrdoob]

So I personally suggest to use the toFixed method of @ycw at the beginning.

I think that solution is fragile. We're likely to bump into that issue again if we rewrite.

I think using float(MAX_STEP) is more robust. At least the solution sits right where the problem starts.

@zeux Any insights about the best thing to do here? Is it a bad idea to cast a define right in the for loop?

for(float i=0.;i<float(MAX_STEP);i++){

[ycw]

@mrdoob @ycw Turned out that on IOS WebGL1 all these

will cause error ERROR: 0:230: 'i' : Loop index cannot be compared with non-constant expression and loss the whole SSR effect.

what if ..

const float l = float(MAX_STEP);
for (float i=0.; i<l;  ...

?

[gonnavis]

Excellent! it works on my iphone6sp WebGL1.

[zeux]

@mrdoob fwiw outside of WebGL & GLSLES I wouldn't worry about this; in WebGL1/ESSL specifically shaders have extra restrictions to enforce loop termination, see https://www.khronos.org/registry/webgl/specs/latest/1.0/#SUPPORTED_GLSL_CONSTRUCTS:

for loops must conform to the structural constraints in Appendix A.

https://www.khronos.org/registry/OpenGL/specs/es/2.0/GLSL_ES_Specification_1.00.pdf, Appendix A:

The for statement has the form:
for ( init-declaration ; condition ; expression ) statement
• init-declaration has the form:
type-specifier identifier = constant-expression
Consequently the loop variable cannot be a global variable.
• condition has the form
loop_index relational_operator constant_expression
where relational_operator is one of: > >= < <= == or !=

Noteworthy is that float(MAX_PASS) is a constant expression per ESSL specification. If the loop bound is a separate variable it must be declared with const float instead of float for the shader to conform. Once that's done, all of these forms should be equivalent in performance.

[gonnavis]

@ycw Many thanks!

Hello @Mugen87 @mrdoob , I think this pr is ok, and tested no problems.

[mrdoob]

@zeux Thanks! 🙏

[mrdoob]

Thanks!