Jump to content

Shader and Texture Combination


DylanD
 Share

Recommended Posts

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 :D 

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.

Link to comment
Share on other sites

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 :D 

 

hehehe. :D 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

13 minutes ago, Pryme8 said:

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

Link to comment
Share on other sites

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...?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...