FragmentShader for filter

I am trying to make a shader in GLSL to give my scene a hand drawn look.
Like this: Browse (1) - Shadertoy BETA
The problem is that it works in Chrome and Firefox but only gives a blank page in Edge and Safari/IOS.

I made a simple example wich only turns the scene green but gives the same problem.
https://playground.babylonjs.com/#SW9AZ9#1

Am I doing something wrong or do the browsers just not support it?

Your PG does work for me in Edge.

What is the problem you are seing? Do you have something in the console log?

Works for me in Chrome, but seeing this in Safari

[Error] WebGL: ERROR: 0:9: 'texture' : no matching overloaded function found
	compileShader
	(anonymous function) (babylon.js:16:389498)
	(anonymous function) (babylon.js:16:390012)
	(anonymous function) (babylon.js:16:133292)
	(anonymous function) (babylon.js:16:391553)
	(anonymous function) (babylon.js:16:23497)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] WebGL: ERROR: 0:9: '=' : dimension mismatch
	compileShader
	(anonymous function) (babylon.js:16:389498)
	(anonymous function) (babylon.js:16:390012)
	(anonymous function) (babylon.js:16:133292)
	(anonymous function) (babylon.js:16:391553)
	(anonymous function) (babylon.js:16:23497)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] WebGL: ERROR: 0:9: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'
	compileShader
	(anonymous function) (babylon.js:16:389498)
	(anonymous function) (babylon.js:16:390012)
	(anonymous function) (babylon.js:16:133292)
	(anonymous function) (babylon.js:16:391553)
	(anonymous function) (babylon.js:16:23497)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Unable to compile effect:
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25066)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Uniforms:  scale, textureSampler
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25105)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Attributes:  position
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25181)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Defines:

	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25241)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Vertex code:
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25545)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: #define SHADER_NAME vertex:postprocess
precision highp float;

attribute vec2 position;
uniform vec2 scale;

varying vec2 vUV;
const vec2 madd=vec2(0.5,0.5);
void main(void) {
vUV=(position*madd+madd)*scale;
gl_Position=vec4(position,0.0,1.0);
}
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25571)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Fragment code:
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25827)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: #define SHADER_NAME fragment:Test

precision highp float;
uniform sampler2D textureSampler;
varying vec2 vUV;

void main(void){

    vec4 color = texture(textureSampler, vUV);
    color.g = 1.;
	gl_FragColor = color;

}

	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25855)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Offending line [9] in fragment code:     vec4 color = texture(textureSampler, vUV);
	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25889)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] BJS - [16:55:14]: Error: FRAGMENT SHADER ERROR: 0:9: 'texture' : no matching overloaded function found
ERROR: 0:9: '=' : dimension mismatch
ERROR: 0:9: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'

	(anonymous function) (babylon.js:16:92539)
	(anonymous function) (babylon.js:16:25902)
	(anonymous function) (babylon.js:16:24555)
	(anonymous function) (babylon.js:16:19869)
	(anonymous function) (babylon.js:16:19301)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19245)
	(anonymous function) (babylon.js:16:2989094)
	(anonymous function) (babylon.js:16:2993603)
	(anonymous function) (babylon.js:16:2989037)
	(anonymous function) (babylon.js:16:19179)
	(anonymous function) (babylon.js:16:21861)
	(anonymous function) (babylon.js:16:19133)
	(anonymous function) (babylon.js:16:21861)
	e (babylon.js:16:19092)
	(anonymous function) (babylon.js:16:389000)
	(anonymous function) (babylon.js:16:1114511)
	e (babylon.js:16:1111722)
	createScene (Script Element 1:46)
	Global Code (Script Element 1:59)
	appendChild
	fastEval (main.js:1:387)
	(anonymous function) (main.js:1:2355)
	promiseReactionJob
[Error] WebGL: INVALID_OPERATION: useProgram: program not valid
	useProgram
	(anonymous function) (babylon.js:16:406556)
	(anonymous function) (babylon.js:16:406667)
	(anonymous function) (babylon.js:16:392360)
	(anonymous function) (babylon.js:16:1118014)
	(anonymous function) (babylon.js:16:691139)
	(anonymous function) (babylon.js:16:252874)
	(anonymous function) (babylon.js:16:253202)
	(anonymous function) (babylon.js:16:258364)
	(anonymous function) (main.js:1:3176)
	(anonymous function)
	(anonymous function) (babylon.js:16:130386)
	(anonymous function) (babylon.js:16:130584)
	(anonymous function)
[Error] TypeError: undefined is not an object (evaluating 'this._attributes[e]')
	(anonymous function) (babylon.js:16:20450)
	(anonymous function) (babylon.js:16:382434)
	(anonymous function) (babylon.js:16:384373)
	(anonymous function) (babylon.js:16:691228)
	(anonymous function) (babylon.js:16:252874)
	(anonymous function) (babylon.js:16:253202)
	(anonymous function) (babylon.js:16:258364)
	(anonymous function) (main.js:1:3176)
	(anonymous function)
	(anonymous function) (babylon.js:16:130386)
	(anonymous function) (babylon.js:16:130584)
	(anonymous function)

Perhaps try using texture2D?

1 Like

@Raggar is right :smiley: It works with texture2D in Safari

https://playground.babylonjs.com/#SW9AZ9#2

Using texture2D makes it work in my Edge browser. (using an older version of edge without the chromium engine) (thnx Raggar)
But my IOS safari still refuses to play. Is it posible to get it to work on an IOS device. I do see some complex shaders work on shadertoy on my iPad so it should be posible?

@notMe, hmm strange, seems to work for me on iPhone X iOS Safari.

You are correct. During testing I turned on WegGL2.0 and WebGPU in the advanced>Experimental features in Safari. I turned those off again and now it works perfectly.
I am very happy :smile:

Thanks for your help people

1 Like