Shadertoy to PlayCanvas: River

Hi,

Shadertoy to PlayCanvas: https://www.shadertoy.com/view/MsSGWK

Project: https://playcanvas.com/project/677852/overview/a-river--by-raymarching
Build: https://playcanv.as/p/rYEgeDRo/

Feel free to fork.

Regards,
Saad

5 Likes

Thanks for sharing @Saad_Haider, nice work!

1 Like

Yes, really great job porting that to PlayCanvas! There’s a lot of great code to grab on Shadertoy!

1 Like

Hmm… The Shadertoy link works on my iPhone XS, but the PlayCanvas build does not. I guess some techniques were used in PlayCanvas that are not supported by the phone?

@Excess Hmmm, interesting. You’re right. But it does work if you enabled WebGL 2.0 on the iPhone XS:

Somebody would have to remote debug in Safari on macOS to figure out what the problem is. I only have a PC unfortunately.

Well, here are the errors thrown if I play through the editor. Don’t know if that’s of any use:

ERROR: 0:98: 'texture' : no matching overloaded function found
ERROR: 0:98: 'xyz' : field selection requires structure or vector on left hand side
ERROR: 0:98: '=' : dimension mismatch
ERROR: 0:98: '=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'
ERROR: 0:100: 'texture' : no matching overloaded function found
ERROR: 0:100: 'xyz' : field selection requires structure or vector on left hand side
ERROR: 0:100: '=' : dimension mismatch
ERROR: 0:100: '=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'
ERROR: 0:102: 'texture' : no matching overloaded function found
ERROR: 0:102: 'xyz' : field selection requires structure or vector on left hand side
ERROR: 0:102: '=' : dimension mismatch
ERROR: 0:102: '=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'
ERROR: 0:152: 'texture' : no matching overloaded function found
ERROR: 0:152: 'xyz' : field selection requires structure or vector on left hand side
ERROR: 0:152: '=' : dimension mismatch
ERROR: 0:152: '=' : cannot convert from 'highp float' to 'highp 3-component vector of float'

Error in material "New Material" with flags 65548

null is not an object (evaluating 'shader.samplers')

Okay, problem solved:
https://playcanvas.com/project/677902/overview/a-river--ios-fix

Apparently, texture is not recognized as the proper syntax in WebGL1 so I simply changed all occurrences of it to texture2D and the shader started working on my phone.

1 Like

Wow, @Excess, nice detective work there!! :tada:

1 Like