How to implement clipping planes as with Three.js?

[BlackMojito]

Hi guys,

I am porting our application from three js to Babylon but I cannot find an easy way to achieve the functionality as shown in this three.js sample. I know that I can write my own shaders by inserting the clipping planes block but before doing so I would like to know if there exists already an easy way to do that in Babylon?

Thanks,

[RaananW]

Howdy, welcome to the forum!

So, unless there is a function that was added (which is possible) - no, Babylon only offers camera z clipping.

[adam]

You could use CustomMaterial:

https://playground.babylonjs.com/#AFRP1L

[GameMonetize]

Or you can just set scene.clipPlane = new BABYLON.Plane(...)

[BlackMojito]

18 hours ago, adam said:

You could use CustomMaterial:

https://playground.babylonjs.com/#AFRP1L

Thanks! I will take a look. But is there any easy ways to add such shader blocks to all the materials?

[BlackMojito]

17 hours ago, Deltakosh said:

Or you can just set scene.clipPlane = new BABYLON.Plane(...)

Thanks. But I don't understand why we can only set one clipPlane? BTW, can the frustumPlanes be used for my purpose? Or they are just the same as the ones of the current active camera?

[jerome]

Imho, the frustum planes are simply used to determine if a mesh must be rendered or not : if it intersects the frustum, then it's selected for rendering. They don't visually clip the mesh.

[GameMonetize]

We only have one because we never needed more

And @jerome is correct

[Arte]

Hi All,

@Deltakosh scene.clipPlane not hiding edges, bug?

PG

[GameMonetize]

Not sure to understand the issue

[Arte]

Behind scene.clipPlane edges is visible.

[BlackMojito]

On 10/18/2017 at 11:08 PM, adam said:

You could use CustomMaterial:

https://playground.babylonjs.com/#AFRP1L

Hi adam,

Why I cannot find the definition of CustomMaterial? Where is this class defined?

Thanks

[RaananW]

Hi @xuchen_shadow,

It can be found in the material library - https://github.com/BabylonJS/Babylon.js/blob/master/dist/materialsLibrary/babylon.customMaterial.d.ts

[BlackMojito]

31 minutes ago, RaananW said:

Hi @xuchen_shadow,

It can be found in the material library - https://github.com/BabylonJS/Babylon.js/blob/master/dist/materialsLibrary/babylon.customMaterial.d.ts

It seems that material library is not in the bundle babylon.js, how can I use it then? BTW,I am writing my app using TypeScript.

[RaananW]

You can use npm to include the entire material library:

https://www.npmjs.com/package/babylonjs-materials

it includes everything you need 

[BlackMojito]

Hi RaananW, 

I got the below error by including Babylon's-materials using npm. How can I let it find babylon itself?

WARNING in ./node_modules/babylonjs-materials/babylonjs.materials.min.js
Module not found: Error: Can't resolve '../babylon.max' in '/Users/xuchen/Development/XViewer/node_modules/babylonjs-materials'
 @ ./node_modules/babylonjs-materials/babylonjs.materials.min.js 1:82-107
 @ ./src/main.ts

Thanks

[BlackMojito]

36 minutes ago, RaananW said:

You can use npm to include the entire material library:

https://www.npmjs.com/package/babylonjs-materials

it includes everything you need 

import * as BABYLON from 'babylonjs';
import from 'babylonjs-materials';

Also, the second line seems to be illegal in TypeScript? 

 

[RaananW]

Hi, the warning should not bother you at all, I am working on removing it, but it is mainly due to the dev version being included (if found).

The second line is perfectly legal in TypeScript, I am using it on a daily base. Not sure what error you are getting. What TypeScript are you using?

[BlackMojito]

7 minutes ago, RaananW said:

Hi, the warning should not bother you at all, I am working on removing it, but it is mainly due to the dev version being included (if found).

The second line is perfectly legal in TypeScript, I am using it on a daily base. Not sure what error you are getting. What TypeScript are you using?

I am using typescript 2.5.3 and please see the following error.

[at-loader] Checking finished with 1 errors
[at-loader] ./src/main.ts:2:13
    TS1005: '=' expected.

[RaananW]

Ah!. it should be

import 'babylonjs-materials';

without from. I am fixing the documentation now, my bad.

[BlackMojito]

1 minute ago, RaananW said:

Ah!. it should be

import 'babylonjs-materials';

without from. 

Super thanks! Hum the last question, is it possible to write a similar class like CustomMaterial which extends the PBR materials? Do I just need to copy some src code from CustomMaterial? What I want to do is to insert some code into their existing shaders.

[GameMonetize]

Ping @NasimiAsl who is the mastermind behind the customMaterial

[NasimiAsl]

hi @Deltakosh i make some PRB Material https://www.babylonjs-playground.com/#F5IEQE#19  that work before this changes 

i need that for update uniform after bind  ( i don't know why this need be changed  = >  https://github.com/BabylonJS/Babylon.js/pull/2962/commits )

*notic  we accept keep  custommaterial in old version and update that any 3 month ? 

@xuchen_shadow (hi again )   i don't know why you wanna make some custom PBR material because that custom material let we have standard material effect in shader

but what property in PBR material you wanna change

try fix and make new PG ...

[GameMonetize]

Yep still align with that: 

Quote

we accept keep  custommaterial in old version and update that any 3 month ? 

 

[NasimiAsl]

45 minutes ago, Deltakosh said:

Yep still align with that: 

 

yes but that js is damaged now  

some samples is don't be run after change

i wanna make some sample (simple sample ) after any publish we can test it ( this is like quality support  test )