Shader - Cut box at top and bottom

[royibernthal]

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

 

I'd like to save the shaders via ShadersStore, please no ShaderBuilder or anything else.

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

[NasimiAsl]

you can save that from shaderStore if you build that from shaderBuilder

[royibernthal]

I tried, with no success. If I recall correctly I had problems translating things like worldViewProjection since you use slightly different names in ShaderBuilder. It might sound a bit stupid but for some reason I couldn't make it happen.

Regardless, what I'm trying to do now is a bit different.

[NasimiAsl]

hi

that is why i build shaderBuilder because it is hard to debug shader and you wanna use it without shaderBuilder script

so you most notice the uniforms on the shade and set it

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

i think this is good example for why you most chose shaderBuilder 

[royibernthal]

Hi

My main reason for not using ShaderBuilder is that I'm using typescript, and ShaderBuilder doesn't have a .d.ts file. Other than that I think it's great.

[NasimiAsl]

We have .Ts File

https://github.com/BabylonJS/Extensions/blob/master/ShaderBuilder/Babylonx.ShaderBuilder.ts

and you welcome

[royibernthal]

Yeah a .ts file but not a .d.ts file (declaration file), do you think you'll ever make one? So that people won't have to compile an extra 1700 lines of code every time they compile their typescript project.

https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

Also, it seems that the typescript file is not up-to-date with the javascript file.

Here's a problem in the .ts file taken from an old topic of mine:

On 8/16/2016 at 3:37 PM, royibernthal said:

a. It seems that the typescript file does not represent the Map function of the javascript file correctly - for instance the parameter passed in the PG is marked as an error.

http://www.html5gamedevs.com/topic/24173-2d-sprite-animation-on-a-boxs-face/#comment-140093

 

Regardless, do you think you could help me solve the issue at hand using ShadersStore? (since the typescript issues are not going to be fixed immediately probably)

 

[NasimiAsl]

ok sure give me 24 hours

this is my fault ( i know less need learn more ) so sorry about that

[adam]

5 hours ago, royibernthal said:

and ShaderBuilder doesn't have a .d.ts file.

If this is something you could benefit from, why not take a few minutes to create it?  Then NasimiAsl could help you out.  Sort of like a give and take thing.

[adam]

I just generated the d.ts file.  

I did have to change ShaderHelper on line 209 to public though:

export interface ShaderHelper {
   uniforms: string[],
   attributes: string[]
}

 

Babylonx.ShaderBuilder.d.ts

[adam]

Babylonx.ShaderBuilder.ts

Babylonx.ShaderBuilder.js

[royibernthal]

2 hours ago, NasimiAsl said:

ok sure give me 24 hours

this is my fault ( i know less need learn more ) so sorry about that

no problem, thanks.

we all need to learn more, you less than most of us

 

Regarding your .ts file - 

I noticed for instance that you need to use optional parameters in interfaces where you treat them as optional in your actual implementation.

e.g. The parameters in IColor should be optional to avoid throwing errors in many codes taken from your Playgrounds.

interface IColor {
        r?: any;
        g?: any;
        b?: any;
        a?: any;
    }

Instead of:

interface IColor {
        r: any;
        g: any;
        b: any;
        a: any;
    }

Then when your write something like:

new BABYLONX.ShaderBuilder()             
        .Solid({ b: 1 })

It won't throw an error.

 

54 minutes ago, adam said:

I just generated the d.ts file.  

Did you generate this .d.ts from the .ts or from the .js?

Many types that are specified in the .ts are just set to "any" in this .d.ts. (e.g. SetUniform())

Let me know how you did it and maybe we can find together a more accurate way to compile the .d.ts with types.

[adam]

tsc --declaration Babylonx.ShaderBuilder.ts

[royibernthal]

Thought as much, it's mostly accurate but it's weird that it specifies some types as "any" in the .d.ts (where they are not in the .ts), there should be no reason for that to happen.

[adam]

37 minutes ago, royibernthal said:

it's weird that it specifies some types as "any" in the .d.ts (where they are not in the .ts),

I compared the ts to the d.ts and they look consistent to me.

[royibernthal]

You are right, sorry.

In this code the tooltip of SetUniform and other functions was "any" because Func()'s return type is not specified (in practice in this specific code it's ShaderBuilder), which was the source of my claims.

Anyway, my bad.

var material =   new BABYLONX.ShaderBuilder()             
		.Solid({ b: 1 })
		    .Func(function (me) {
				  me.Setting.FragmentWorld  = true;
			  return me;
			  })                   // Make Solid Color for Result
              .InLine('   vec3 wpos =  vec3(world * vec4(pos,1.));')
		.SetUniform('maskHeight', 'float')
		.SetUniform('maxh', 'float')
		.SetUniform('minh', 'float')
		.SetUniform('steph', 'float')
		.VertexShader('if(nrm.y>0.) result =  vec4(vec3(pos.x,max(minh,min(maxh,maskHeight))-steph,pos.z) ,1.);\n\
			else result = vec4(pos,1.);')
			.Map({path:'http://jerome.bousquie.fr/BJS/images/spriteAtlas.png'  }) 
             .InLine('if((nrm.y<=0. && wpos.y > maskHeight ) ||  maskHeight < minh ) discard;')

		.BuildMaterial(scene);

 

[NasimiAsl]

41 minutes ago, royibernthal said:

Func()'s return type is not specified

Func Return BABYLONX.ShaderBuilder instance

Func(fun: any) {
	return fun(Shader.Me);
	}

 

this function help you to change setting of Shader Builder In Fluent Step

var mat = new BX.ShaderBuilder()

       ...

      Func(function( currentShaderBuilderInstance ){

            // change setting or any javascript action

           return currentShaderBuilderInstance;  })

     ... // continue Fluent 

    .BuildMaterial( scene );

 

use without Func 

var mat = new BX.ShaderBuilder() 

       ...

      // change setting or any javascript action 

   mat. 

   ... // continue Fluent 

    .BuildMaterial( scene );

 

 

[royibernthal]

I know, but the return type is not specified in the .ts file so it defaults to "any" 

Func(fun: any) {
            return fun(Shader.Me);
        }

 

[NasimiAsl]

1 minute ago, royibernthal said:

I know, but the return type is not specified in the .ts file so it defaults to "any" 

Func(fun: any) {
            return fun(Shader.Me);
        }

 

it is  but in Logic is any because defined function say what we return and we define it in runtime

this TS is my first Typescript in My life and i research that and no sample find for this problem

in here we need Use Runtime javascript function but we Expectation ShaderBuilder Instance but javascript function dont say anything about what that be return

 

[royibernthal]

Since fun parameter is specified as any I'm pretty sure this wouldn't throw any errors:

Func(fun: any): BABYLONX.ShaderBuilder {
            return fun(Shader.Me);
        }

or at least you should be able to cast it with no problems:

Func(fun: any): BABYLONX.ShaderBuilder {
            return <BABYLONX.ShaderBuilder> fun(Shader.Me);
        }

With that said, is there a reason you're not doing something like that?

Func(fun: any): BABYLONX.ShaderBuilder {
	fun(Shader.Me)            
	return Shader.Me;
        }

I'd even create an interface for the fun parameter as follows:

Func(fun: (me: BABYLONX.ShaderBuilder) => void): BABYLONX.ShaderBuilder {
	fun(Shader.Me)            
	return Shader.Me;
        }

 

[NasimiAsl]

let me fix this and commit

[royibernthal]

no problem, can you give me your ShaderBuilder github link again? I might be able to send you pull requests for little typescript fixes every now and then, if you're interested.

[NasimiAsl]

https://github.com/BabylonJS/Extensions/blob/master/ShaderBuilder/Babylonx.ShaderBuilder.ts

 

[royibernthal]

I'm not experienced with github, I made a simple pull request for optional parameters in IColor interface, let me know if it's good that way.

 

btw - I hope you remember the issue of this topic  I guess solving it using ShaderBuilder would be ok now.

[royibernthal]

@NasimiAsl