solved Shader and Texture Combination

[DylanD]

Hello everyone,

 I have an image on a plane right now, and I want to make the plane to slowly fade away, any ideas how I could do that?

I was wondering is there a way to put a shader and a texture together, because that would work.  I could make the shader just reduce the a value as x or z increase.

But I dont know how I could go about that...

I bet @Pryme8 knows where I should start  

So I really just need to know how I can put the two together I can probably finish on my own, just need to figure out how to use them together.

[Pryme8]

I think you could use https://doc.babylonjs.com/babylon101/animations
with visibility.

[DylanD]

9 minutes ago, Pryme8 said:

I think you could use https://doc.babylonjs.com/babylon101/animations
with visibility.

That would change the whole box uniformly as far as I know at least.   I want to change the alpha, based on the plane.  so one side of the plane is at alpha 1 and the opposite side is at alpha 0, slowly the middle being 0.5.

Not only that but I need it like that permanently, it will never change once its made(as in not based off of frames, just the vuv.x of the plane).  I cannot change the opacity of the texture either it needs to stay the exact same too.

Which is why I think putting a shader onto a texture would be the way to go, just not sure if thats even a thing, but to quote you  

 

hehehe.  

[DylanD]

I think I found out how

should be this.

ar amigaTexture = new BABYLON.Texture("amiga.jpg", scene);
myShaderMaterial.setTexture("textureSampler", amigaTexture);

 

[Pryme8]

Oh, just have an alpha value for the color and make sure when you make your customShader Constructor it has the argument for needsAlphaPass or what ever it is.

[DylanD]

2 minutes ago, Pryme8 said:

Oh, just have an alpha value for the color and make sure when you make your customShader Constructor it has the argument for needsAlphaPass or what ever it is.

sweet thanks!

I believe you mean 

needAlphaBlending: true

 

[DylanD]

this seems to be the shader half, now just to add it in very carefully.

https://playground.babylonjs.com/#411D8A

[DylanD]

and it didn't work... not sure why, here is my go at it.

https://playground.babylonjs.com/#411D8A#1

so I load up the texture, into the variable bean, then I put bean in the shader and then the shader onto the plane.  

any ideas?

oh I didnt declare it correctly, still doesn't work... yet

https://playground.babylonjs.com/#411D8A#2

 

didn't add it to the colour, duhhhh, still doesn't work yet:

https://playground.babylonjs.com/#411D8A#3

[Pryme8]

https://playground.babylonjs.com/#411D8A#4
?

[DylanD]

13 minutes ago, Pryme8 said:

https://playground.babylonjs.com/#411D8A#4
?

the texture still is not showing up in that one  , this shader is separate from the other shaders you helped me with.

It only needs the alpha, the texture, and vuv.x

look at this one I think its the closest to working:

 

https://playground.babylonjs.com/#411D8A#3

 I already have the fade working as intended the texture just doesn't seem to work yet.

I'm trying to add the texture like its done in this playground:

https://www.babylonjs-playground.com/#0854IT#6

but flat, no 3d

[Pryme8]

https://playground.babylonjs.com/#411D8A#6

[Guest]

Fixed here: https://playground.babylonjs.com/#411D8A#7 (Please just check the console to get compilation error)

 

(Edit: @Pryme8 was faster than me :))

[DylanD]

1 minute ago, Deltakosh said:

Fixed here: https://playground.babylonjs.com/#411D8A#7 (Please just check the console to get compilation error)

 

(Edit: @Pryme8 was faster than me :))

Sorry, I often forget that the console even exist when using the playground.  ?

However looking at it now Im not sure I would have solved it.  Still should have looked...?

[Guest]

(I added .rgb in the texture2D() line)

[DylanD]

53 minutes ago, Deltakosh said:

(I added .rgb in the texture2D() line)

I saw that.  I meant I wouldn't have been able to figure out all of the errors meant I was missing the .rgb

Also your fix only got the colour of the texture,  pryme8's got the whole texture(but doesn't load properly ??? not sure whats up with that playground) ? ,thanks though.

the correct fix was this playground:

https://playground.babylonjs.com/#411D8A#8

a mix of both