Jump to content

[SOLVED] light reflecting inverse, is it possible?


Recommended Posts

Maybe I have to explain it a bit more: I have a mesh-model (laptop screen) and I wish to see NO reflections looking in the normal of the surface but the more I turn the laptop, the more reflections should appear. Is this possible?

Greetings and thank  you

Link to comment
Share on other sites

Hi guys.  This is an interesting challenge, and I don't think Fresnel ops are going to solve this.  (Sorry).

I think this challenge will require... constantly changing the material.reflectionTexture.level... dependent-upon camera -> laptop angle.  :)

I guess, what, Babylon.Ray stuff... to determine viewing angle?   Or do we have camera.getDirectionTo(laptopMesh) ?  :)

Or perhaps similar code to DirectionalLight.setDirectionToTarget... a subtraction of the two positions?

Yep, me thinks this is a renderLoop/texture.level thing.  :)  But, you know, I'm wrong a lot.  Party on.

Link to comment
Share on other sites

hi again 

in github : 


documentation : 


you can find the shader in BABYLON.Effect.ShaderStore



Link to comment
Share on other sites

This might sound ego-centric, but I'm proud of my "for kids"-level ShaderBulder intro... here:)

There's one thing to keep in mind, all the time.  ShaderBuilder is a piece-by-piece shader code assembly assistant.  It will not make you a genius at writing shader code, but it can DEFINITELY help "see" the important parts of shader code.  It's good for "breaking it down".  MOST of the "magic" you see in ShaderBuilder demos... happens because Naz is damned good at shader coding.  He's a pro... top of the line.  Soon he'll be earning 6-fig income, just because he knows shaders, speak nothing of writing a cool assembling assistant, based upon "Fluent" coding format.  He's just THAT cool.

Once I asked "Naz" ( @NasimiAsl )... HOW to VIEW the final shader code (and maybe NOT compile it or install it in engine.programs, etc etc).  Instead, he sent me the shader code for the project we were working-on (blending materials).  hehe.  He pasted the pixel and frag code... right into the forum post!  What a guy!  Just giving away his coolest shader code... for all to steal!  :)

But, what I really wanted... was for him to add another layer to the .build()...  like .displayOnly().  Shaderbuilder would then, somehow, display the end result... the "big strings", and perhaps automatically put in some quotes and \n for us.  If you have ever used CYOS shader editor, and used "get .zip" from there, you'll see what I mean.  It puts the shaders into Babylon.ShadersStore format...  big string.  Sometimes folks need them with \n line separators, sometimes not.

If .displayOnly option is available, users can use shaderBuilder for building, testing, experimenting, but if they need the final shader code in .fx files, they can easily use .displayOnly or .fileOnly .build options. 

Not sure if it is possible.  But... it would also be easy to "see" what shaderBuilder builds, too.  Folks might understand shaderBuilder better, if they can see the big end result.  Not sure how to display, either.  Perhaps just hand them array of strings, and let user fig how to display?  *shrug*  A bit off-topic, sorry.

Link to comment
Share on other sites

@Wingnut Hi Wingnut, I fighted against ShaderBuilder, I'm not sure if it's "blessing or curse" :( , to show the shader code I did it in this way:


  var ps = BABYLON.Effect.ShadersStore["ShaderBuilder_1PixelShader"];
  var vs = BABYLON.Effect.ShadersStore["ShaderBuilder_1VertexShader"];

That means, after building something, assign 2 vars, stop with the chrome debugger and clip the txt to clipboaard and save it.

But then comes the interesting part: UNDERSTAND THIS CODE :(

But anyway, I reached my goal, a building with walls and windows where only the windows are reflecting: PG: wall with windows

To see, you must press run twice or switch from https to http...seems to be a problem with ShaderBuilder-script as external ref..

@NasimiAsl can you have a look at this PG if this is ok. thank you

Greetings to all

Link to comment
Share on other sites


   // make your color map
                .Map({ path: "https://rawgit.com/androdlang/clonerjs/master/assets/glass1.png" })
                // keep this map in reference number 1

               // make your current material
                .Map({ path: "https://rawgit.com/androdlang/clonerjs/master/assets/glass.jpg", alpha: true }, 1.)
                // chose your color in refrence 
                // for this window is white
                // replace your white colore in refrence with
                // your owned material
                .White(1, // your reference number
                // always start sub material whit Babylonx.Helper()

                // your material for white colore is here
                 .Reflect({ normal: 'nrm', path: '/textures/TropicalSunnyDay' }, 1.) 

                .InLine('              \n\
                    mat4 m4  = mat4(1.,0.,0.,0.,0.,1.,0.,0.,0.,0.,1.,0.,0.,0.,0.,1.);\n\
                    vec3 direction = normalize(pos*3.141592*length(camera-pos)*0.1-camera);\n\
                    vec3 coords = reflect(direction,nrm) ;\n\
                    vec3 cubeUV = vec3(m4*vec4(coords,0.));\n\
                    result = textureCube(cubeRef_0,cubeUV,0.);\n\

              // finish sub Part with Build method
                    // between 0.5 and -0.5 help to control color range 
                    // -0.5 if use full step
                     rangeStep :   -0.48 ,
                     // control power of your sub material 
                    // -0.5 make it lower and 0.5 make it high
                     rangePower :  0.0


Link to comment
Share on other sites


you most make 2 mesh (inside glass and glass )

and my recommendation make one other mesh (non transparency ) for your main object ( and make it back face enable )  

notic this part :

reflectSize  is spetial and we cant calculate that in webgl so you most define that yours

but if you have large object this parameter is low

1 => reflectSize :0.1

10 => reflectSize :0.01 ..

 vec3 direction = normalize(pos*3.141592*length(camera-pos)* reflectSize  -camera);\



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.

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.


  • Recently Browsing   0 members

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