[SOLVED] light reflecting inverse, is it possible?

[javalang]

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

[GameMonetize]

Yes sir

we call it fresnel. Here is an example for you:

http://www.babylonjs-playground.com/#17QZMR

As you can see reflection is only visible on edges. But you can also do the opposite:

http://www.babylonjs-playground.com/#17QZMR#1

[javalang]

thank you sir, I will have a look

[GameMonetize]

And please note that fresnel can be used with specular and emissive as well:

http://doc.babylonjs.com/tutorials/how_to_use_fresnelparameters

[Wingnut]

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.

[NasimiAsl]

i have a shader Condition in shaderBuilder i don't know that is exact answer for this

http://www.babylonjs-playground.com/#1ODVTX#23 

if you can make color map ( with special color for screen you can make it reflective )

http://www.babylonjs-playground.com/#1ODVTX#24

http://www.babylonjs-playground.com/#1ODVTX#25

[javalang]

@NasimiAsl You make me crazy with your ShaderBuilder, so cool, any chance to have a bit more information about?

[NasimiAsl]

hi again 

in github : 

https://github.com/BabylonJS/Extensions/tree/master/ShaderBuilder

documentation : 

http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

you can find the shader in BABYLON.Effect.ShaderStore

BABYLON.Effect.ShadersStore["ShaderBuilder_1PixelShader"]

BABYLON.Effect.ShadersStore["ShaderBuilder_1VertexShader"]

[Wingnut]

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.

[javalang]

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

...           
 .BuildMaterial(demo.scene);

  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

[NasimiAsl]

https://www.babylonjs-playground.com/#DNWJEQ#4

   // make your color map
                .Map({ path: "https://rawgit.com/androdlang/clonerjs/master/assets/glass1.png" })
                // keep this map in reference number 1
                .Reference(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()
                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
              .Build()
                
                ,{
                    // 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
                
                 })

 

[NasimiAsl]

https://www.babylonjs-playground.com/#G67XLZ#1

see this sample for find final fragment and vertex shader with shaderBuilder

and notic that shaderBuilder just is string builder 

[javalang]

@NasimiAsl Thank you very much, that helps a LOT!!!!!

And btw., you had an so exiting example of a glass bottle http://185.88.152.45/eash/pub/preview#30304 but the link is down, can you reactivate it? I asked in "demo and projects" already.

Many, many thanks and greetings

[NasimiAsl]

i loss that data but can make it  

wanna make it with this sample?

 

[javalang]

@NasimiAsl Yess, you are the king! I have Forgotten to ask another question: in the cube/mirror example above, is it easy to change the UV's for the left/right side to be in the same orientation with front/back with ShaderBuilder?

[NasimiAsl]

https://www.babylonjs-playground.com/#DNWJEQ#6

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);\

 

https://www.babylonjs-playground.com/#DNWJEQ#8

[javalang]

OK, that looks so cool!! Time for a Demo ShaderBuilder and ClonerSystem

Thank you

 

here it is: ClonerSystem and ShaderBuilder (several hundred clones)

and machine-friendly here