Shader - Cut box at top and bottom

[NasimiAsl]

9 hours ago, royibernthal said:

@NasimiAsl

that is like My Name  what can i do

[royibernthal]

You've yet to tackle the shader I'm trying to create  Notice it's different than what you did in the old "Real 3D Mask" topic.

 

On 9/16/2016 at 1:53 AM, royibernthal said:

This topic is a bit similar to an old topic of mine "Real 3D Mask", only this time I know a little more what I need and how I need it.

 

I created a box mesh.

 

I'd like to create a shader in which I can specify the y of 2 lines:

-top line - nothing above it is drawn

-bottom line - nothing below it is drawn

 

The areas above the top line or below the bottom line should be "cut" in a 3d way, a 2d mask or anything of the sort will have a bad looking result.

 

I added a sketch to demonstrate how the result should look like.

Second picture from the left - Red parts are either above top line or below bottom line and shouldn't be drawn, green part should be drawn.

 

From what I understood from the previous topic ("Real 3D Mask"), it should be pretty simple, just check in a vertex shader if the current pixel is above the top line or below the bottom line, and if so, discard it.

As simple as it is, I have no idea how to do it, as I'm clueless when it comes to shaders.

Here's a link to the old Playground (by @NasimiAsl), please don't use it, it's just to remind you of a similar solution so we don't start from scratch.

http://www.babylonjs-playground.com/#QHMT1#7

 

For this topic I created a new playground:

http://www.babylonjs-playground.com/#1IUU00#0

 

Can you please help me write this shader? I'd be twice more grateful if you'll help me understand what you write.

[NasimiAsl]

ok  let look that step by step

this is a simple shader but have Mathematical Stuff ( that make it compilicated )

step 1 : setup ShaderBuilder ---------------------------------------------------------------------------------------------------

line 1,2,3,4  : Add ShaderBuilder js

line 38         : wait to load SB.js

**** in real sample you dont need wait

line 39 : BABYLONX.ShaderBuilder.InitializeEngine();  // initialize some script ShaderBuilder need to Create ShaderMaterial from BABYLON.JS

**** for use the ShaderBuilder you Most be Initialize That

line 82-87 : this put default information about scene to Shader like Camera position , ... per each render

 

step 2 : make CustomShader From ShaderBuilder ------------------------------------------------------------------------ 

line 40 : make a new mesh array

line 51 - 66 : make on 4 box and add in to the array and calculate 3 const uniforms

line 59,60  :     minh , maxh : minimum  and maximum height (we don't access  to this part in shader so we need send that for shader)

line 61 :            steph : all box have some space between we can calculate that in javascript easly so add this like const uniform too

line 116 : start making Shader    material =   new BABYLONX.ShaderBuilder()

line 117 : .Solid({ b: 1 }) : //no matter  just set the blue color for first shade

line 118 : 

          // me : current instance

           .Func(function (me) {  // this method let us to change some parameter like setting inside the fluent pattern
                  me.Setting.FragmentWorld  = true; // enable wordviewMatrix for fragment shader this let shader now about world poistion
                  return me; // back to current state
            })  

line 112 :

inline let you make your wanted code inside the shaderBuilder generated you can do anything you do in main method in shader

              .InLine('   vec3 wpos =  vec3(world * vec4(pos,1.));') // calculate world position

line 123 : define a new uniform 'maskHeight' this is main position all box is cut

line 124,125 , 126 : define ather uniforms

line 127 : .VertexShader : this help you to make Vertex Shader (other line  make a fragment shader )

math part :

// this condition choose all top 4 vertex on all box becase top position have positive value in y 

if(nrm.y>0.)                keep x pos                                                                        keep z pos

   result =  vec4(vec3( pos.x ,             max(minh,min(maxh,maskHeight))-steph    , pos.z ) ,1.);

*****    max(minh,min(maxh,maskHeight))-steph :  choose between minh and maxh and step and dont let this go more than  maskHeight     

// this condition choose all bottom 4 vertex on all box

else result = vec4(pos,1.); // keep defult position

.Map({path:'http://jerome.bousquie.fr/BJS/images/spriteAtlas.png'  }) // texture box

.InLine('if((nrm.y<=0. && wpos.y > maskHeight ) ||  maskHeight < minh ) discard;') // hide other position

line 132 : make your final shader

this function called 4 times  

line 74 - 79 : this part set special Uniform "maskHeight" in shader per each render

line 69 :   var maskH =  Math.sin(time*0.01)*3.+3.;  make animation per time for maskHieght

 

see this is simple :DDD 

 

ps : http://www.babylonjs-playground.com/#QHMT1#7
          

 

 

 

[adam]

Here is another good example:

http://babylonjs-playground.com/#QO7CR

http://babylonjs-playground.com/#QO7CR#3

[adam]

http://babylonjs-playground.com/#QO7CR#4

http://babylonjs-playground.com/#QO7CR#6

[royibernthal]

NasimiAsl - thank you very much for the detailed explanation. Did you go over the old playground in that explanation or is it a modified solution according to this topic?

 

adam - thank you, looks nice and simple. Is there a way to display the fill of the box along with the cut top and bottom faces as well? At the moment only the surface is displayed.

You can see what I mean in this picture:

Here's another example, if we were to cut only the top part of a 3d triangle it'd look something like that:

[adam]

8 minutes ago, royibernthal said:

Is there a way to display the fill of the box along with the cut top and bottom faces as well?

study this:

http://babylonjs-playground.com/#QO7CR

[royibernthal]

When using a Sphere instead of a box this is what I get:

http://babylonjs-playground.com/#QO7CR#7

I might not have mentioned this very important detail - this shader will later on be applied to much more complex loaded 3d models. It should be a dynamic 3d mask for any given 3d shape / model.

In addition, the above playground only cuts the top and doesn't cut bottom - but I think once we figure out the idea it won't be a problem to add this.

By the way, such a feature would also be a nice addition to the bjs core in my opinion. Hopefully I'm not asking for too much.

[NasimiAsl]

wow nice i think i retired in version 1 and i started sb v2 this have geometry Builder too 

[royibernthal]

Sorry, can you rephrase? Do you mean it won't be possible to do with the current version of ShaderBuilder?

[NasimiAsl]

no version 2 support all version 1

and have more tools for make shader 

i think this version of ShaderBuilder is complete 90 percet for make shader from source just i make a wizard for make shader

[royibernthal]

Good to know, however you didn't really answer any of my questions (or maybe you did and I didn't understand), would you like me to rephrase perhaps?