solved Texture not Binding to Shader?

[Pryme8]

Ok so I have my little animated atlas shader and I am to the point where I want to add 'sub-layers' or overlays to each plane with the shader on it.

So everything works, except the texture bound to the overlayA does not ever seem to display the correct data.  If I just try to output the overlayA as well it just seems to load up the atlas texture which I do not understand at all!

Here is the working example with no overlay added https://pryme8.github.io/TileMaster/dev/demo.html

Then here is the one with the overlay added: https://pryme8.github.io/TileMaster/dev/demo_broke.html

As far as I can tell I am handling the textures the same way.
Maybe Im missing something...
https://github.com/Pryme8/TileMaster/blob/gh-pages/dev/demo.html
^Source.
There may be some bugs and things because I have been tearing down and re arranging the code trying to figure out what the heck is going on.
 

[GameMonetize]

Can you just point me to the place where you enable the overlay?

[Pryme8]

https://github.com/Pryme8/TileMaster/blob/gh-pages/dev/demo_broke.html#L446

then the rest is handled in the shader.
 

[GameMonetize]

Can you try to set the list of samplers at compilation time?

https://github.com/Pryme8/TileMaster/blob/gh-pages/dev/demo_broke.html#L412

[Pryme8]

		this.shader = new BABYLON.ShaderMaterial("basicShader", this.parent.scene, {
			vertex: "basic",
			fragment: "basic",
			},{
			attributes: ["position", "normal", "uv"],
			uniforms: ["world",
			"worldView", 
			"worldViewProjection",
			"view", "viewOffset",
			"viewportSize",
			"inverseTileTextureSize",
			"inverseSpriteTextureSize","layerHeight",
			"tileSize", "time", "projection",
			"globalLight", "fps",
			"sprites", "tiles", "animationMap", "overlayA"]
		});

effectively that did nothing, did I do it correctly?

[GameMonetize]

you can add a samplers: [] with the list of samplers you need

[Pryme8]

That fixed it thanks @Deltakosh, your constantly my favorite person on the internet.

Now what happens when I do not use all the shaders i added to the list, do I need to bind a blank texture to them or something to prevent the webGL error?

the demo should be working now I know its not impressive because of my lack of ability at pixl art but its getting there as far as what I was creating it for.

[GameMonetize]

The best option is to play with #define to not compile what is not required (and use the defines property of the constructor to set what you need)

[Pryme8]

hmmm, could you explain that idea a little farther if you have some time? please and thank you!

[GameMonetize]

Look here:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/default.fragment.fx#L46

the #if DIFFUSE will allow the shader to expect a diffuse texture only if I call the Shader compilation with a defines string set to "#define DIFFUSE"

 

The defines string is part of the ShaderMaterial options that you can set in the constructor (where you already set up the samplers for instance)

[Pryme8]

so like:

this.shader = new BABYLON.ShaderMaterial("basicShader", this.parent.scene, {
			vertex: "basic",
			fragment: "basic",
			},{
			attributes: ["position", "normal", "uv"],
			uniforms: ["world",
			"worldView", 
			"worldViewProjection",
			"view", "viewOffset",
			"viewportSize",
			"inverseTileTextureSize",
			"inverseSpriteTextureSize","layerHeight",
			"tileSize", "time", "projection",
			"globalLight", "fps"],
            samplers:["sprites", "tiles", "animationMap", "overlayA"],
            defines:["ANIMATED", "OVERA"]
		});

?

[GameMonetize]

nope defines is a string so more like defines: "#define ANIMATED; #define OVERA"

[Pryme8]

ah semi colon separated? gotcha.

and so do like #define ANIMATED;

and then I can do in the shader

#if ANIMATED
do animation stuff
#endif

ect...

can I change defines after creation of the shader? or do I need to rebind the whole thing?

[GameMonetize]

you need to rebuild the shader (recreate a new one) as it will involve a new compilation

[Pryme8]

Ok cool, which wont really come into effect with my final product because everything will be loaded from a serialized file and so by the time it comes to compiling the shader everything will effectively be known.

Thanks for your help!

Last question, how when I bind textures would I bind for a texture array?
this.shader.setTexture('overlays[0]', this._overlays[0]);

[GameMonetize]

this.shader.setTextureArray

[Pryme8]

and then pass an array of textures so like:

in glsl:
uniform sampler2d overlays[4];

then in js:
shader.setTextureArray('overlays', [tex1, tex2, tex3, tex4]);

?

[GameMonetize]

yes sir!

[Pryme8]

When I did the define string:

var defines = "#define LAYERS "+parseInt(this.layers.length)+";";		
		
		this.shader = new BABYLON.ShaderMaterial("basicShader", this._core.scene, {
			vertex: "editor",
			fragment: "editor",
			},{
			attributes: ["position", "normal", "uv"],
			defines: defines,
			uniforms: ["world",
			"worldView", 
			"worldViewProjection",
			"view", "viewOffset",
			"viewportSize",
			"time", "spriteSize"]
			});

It did something really weird here is a copy from the console output on the error that drops:

BJS - [12:17:56]: Vertex shader: editor
1    #
2    d
3    e
4    f
5    i
6    n
7    e
8     
9    L
10    A
11    Y
12    E
13    R
14    S
15     
16    0
17    ;

looks like it splits the string up into separate lines and of course that messes up the shader.

[MarianG]

Hi, I'm not sure if this will fix your problem, but defines must be array. like 

var defines = ["#define LAYERS "+parseInt(this.layers.length)+";"];

edit , more simplified version 

var defines = ["#define LAYERS "+parseInt(this.layers.length)];

 

[Pryme8]

That would prolly be it, I was just under the impression it was a string from what delta said on prior posts.  But I’ll give wrapping it as a single item array a shot.

[Pryme8]

is there a better way to do this:
 

var defines = []	
defines.push("#define LAYERS"+this.layers.length);

In the setting up of the defines
and then in the shader:
 

#ifdef LAYERS0
const int layerCount = 0;
#endif
#ifdef LAYERS1
const int layerCount = 1;
uniform sampler2d sprites[1];
#endif
#ifdef LAYERS2
const int layerCount = 2;
uniform sampler2d sprites[2];
#endif
#ifdef LAYERS3
const int layerCount = 3;
uniform sampler2d sprites[3];
#endif
#ifdef LAYERS4
const int layerCount = 4;
uniform sampler2d sprites[4];
#endif

 

[Pryme8]

I am having trouble assigning a texture array:

I have tried:
uniform sampler2DArray sprites;
and 
uniform sampler2DArray sprites[4];

But I keep getting:
 

1	#version 300 es
2	#define LAYERS 0
3	#define NUM_BONE_INFLUENCERS 0
4	precision highp float;
5	#define pU 0.00392156862
6	
7	uniform float time;
8	uniform float fps;
9	uniform vec2 viewOffset;
10	uniform vec2 viewportSize;
11	uniform float spriteSize;
12	
13	uniform sampler2DArray sprites;
14	uniform sampler2DArray layers;
15	
16	in vec3 vPosition;
17	in vec2 vUV;
18	in vec2 pixelCoord;
19	in vec2 texCoord;
20	
21	
22	out vec4 glFragColor;
23	void main(){
24	vec2 spriteCoord = mod(pixelCoord, spriteSize);
25	vec3 color = vec3(spriteCoord.x,1.0,spriteCoord.y);
26	if((texCoord.x > 1.0  || texCoord.x < 0.0 || texCoord.y > 1.0 || texCoord.y < 0.0)){color = vec3(0.0); }
27	float alpha = 1.0;
28	
29	glFragColor =  vec4(color, alpha);
30	}
31	

'sampler2DArray' : No precision specified
ERROR: 0:14: 'sampler2DArray' : No precision specified

No clue what I am doing wrong...

Is it because "precision highp float;" is not the first line?


**EDIT*
uniform highp sampler2DArray sprites[4];

^^ got it