Front/Back/Double Side light reflection

[jerome]

Hi,

 

As I guess I got the point now about how to code front or back or both sides light reflection, I might implement it as a Mesh private method.

This method could then be called in each basic Mesh createXXX() method before injecting positions/indices/normals/uvs into the underlying vertexData object. This would be the least intrusive way imho, despite the new wanted parameter (front, back, double) should be now passed to the createXXX() method.

 

This parameter might be valued by new BJS constants : BABYLON.Mesh.FrontSide, BABYLON.Mesh.BackSide, BABYLON.Mesh.DoubleSide.

 

So mesh creation method signature call would become :

Mesh.CreateShape(name, usual_params, ... , SIDE, scene)

Then

if SIDE = BABYLON.Mesh.FrontSide (default value), nothing changes, your mesh reflects the light as usual only on the front sides,

if SIDE = BABYLON.Mesh.BackSide, your mesh reflects the light on the back sides only. ex : inside the cube, inside the sphere, inside the torus,

if SIDE = BABYLON.Mesh.DoubleSide, your mesh reflects the light both on front and back sides (twice more vertices are created), you can go through your mesh and still having the same light reflection front/back or inside/outside.

 

So please tell me, you Grand BJS conceptors, if this new feature is worth it, if it would be the right way to do it and the right place to implement it ?

 

I took a look at threejs. They have some kind of side property, but it deals with side rendering (not light reflecting), so straight side visibility, and it is bound to material, not to mesh. Sounds quite different.

[GameMonetize]

How do you address BothSide? Do you add more vertices?

 

We have material.backFaceCulling to deal with sideRendering as well but I think this could be a GREAT addition So AFAIC I'm glad to see it integrated into babylon.js!

[jerome]

Yep, for BothSide I replicate existing vertices in the positions array

 

It's different from backFaceCulling.

This new method (let's call it computeSides() ) is for managing light reflection, in other words normals (and triangles) orientation and for adding on the fly (huu, only when constructing the mesh) the eventual needed vertices/normals/indices.

 

This could be like this (the least intrusive way I found) in the VertexData class :

public static CreateShape(size: number, otherParams: types, sideOrientation: sideType): VertexData {  var positions = [];  var indices = [];  var normals = [];  var uvs = []; // the job to populate positions, indices according to the wanted shape...  BABYLON.VertexData.ComputeNormals(positions, indices, normals);  // until now, nothing was changed, we just constructed a classical shape with "front sides"  // let's now apply the sideOrientation wanted : front, back or double  // the following method will modify, if needed, positions, indices and normals arrays  BABYLON.VertexDataComputeSides(sideOrientation, positions, indices, normals); var vertexData = new BABYLON.VertexData(); // etc, the usual way}

The computeSides() method does :

• nothing if BABYLON.Mesh.FrontSide,
• resort triangles in the inverse order  in the indices array and multiply by -1 every element of the normals array if BABYLON.Mesh.BackSide,
• replicate vertices in the positions array, add new indices referecing these new vertices with triangle inversions in the indices array, and replicate opposite normals in the normals array if BABYLON.Mesh.DoubleSide.

So this method modifies positions, indices, normals arrays after the geometry computation and before setting the vertexData object. Don't know yet if uvs should be concerned, maybe yes as the doubleSide should enable the backFaceCulling. Need to test it.

This is a quite lazy algo because nothing is re-computed, only array elements reordered, swapped or added.

 

Here's a playground prototype implementation : http://www.babylonjs-playground.com/#K6SNA#14

 

full (long) topic to achieve this result here : http://www.html5gamedevs.com/topic/12467-double-sided-mesh/

[GameMonetize]

Like this!

[jerome]

Sounds it's really time for me to jump in TS waters (now RaananW fixed the compiler version issue) 

 

Shall we start on the idea of changing basic shape mesh creation methods signature by adding this new parameter ? Do you confirm ?

 

Next question : I thought about declaring the constants in the Mesh class/module because they will actually be accessible to users from Mesh.CreateXXX() methods. Is this right ?

Do I need to create a dedicated interface/class just for this type of constants ? or is there any abstract interface somewhere for this kind of constants ?

[GameMonetize]

I confirm:)

 

For any constants you can see how I already did for others constants. No problem to host them on the Mesh

[jerome]

do you have an example of a constant name (BABYLON.Foo.Bar) so I can check ?

nothing comes to my mind and I don't know what to search for

[RaananW]

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/babylon.scene.ts#L12 , 12 to 35 show how the fog constants were created.

[jerome]

Thank you

I need to create public static consts.

So I guess there's no need for "_" prefix and camel notation is then used like lines 17 and 18.

[GameMonetize]

correct

[jerome]

I started today implementing this feature in TS (almost done)

The compiler told me there were many CreateXXX() or so (boundingbox, private methods, etc) impacted methods in geometry.ts too

What is this geometry class for ?

I guess it's about updating already created meshes.

 

I can add the sideOrientation parameter/property of course in the classes (Box, Sphere, etc) of this file.

Do you want it to be implemented (when property) at each shape level or at super class level ? which one then ? 

 

I realize I didn't modify this file when coding the ribbon. Maybe should it be done... but I don't really know what to add exactly.

[GameMonetize]

The geometry is the container for vertices data. They are used to share data between meshes

 

for me sideOrientation has to be on Mesh, VerticesData and geometry

 

and as a side node you should create a geometry for your great ribbon as well

[jerome]

PRed : https://github.com/BabylonJS/Babylon.js/pull/412

 

I really need someone to explain me why all BJS files come along with my commited files ?

 

What I do so far :

 

locally :

git fetch upstreamgit merge upstream/mastergit checkout mybranch

... then work

git add modifiedFiles

next day, as I haven't finish yet, I redo the same as written above

 

At last, once my work is over :

git commit -agit push origin mybranch

then on github : PR

 

What is wrong  ?

[jerome]

ok,

 

It seems only all the js files (and the ts I modify of course) that I build when I compile ts follow, not all BJS fortunately.

And don't know why because I don't (git) add them before comitting. Has this something to do with the gulp typescript process ?

Is there a simple way to exclude them from this push ?

[GameMonetize]

Don't worry I can take care of setting back on track

 

Thank you for your PR, I'll check it asap

[jerome]

There ara only 5 ts files modified... and all the useless JS files built when I compile.

Don't know why

 

I edited the PR message, because, well, wrong key again, and it was submitted before I finished writting. So the github mail may be very short besides the real content 

[jerome]

I omitted to add...

It not only gives orientation to light reflection for meshes with materials, but it gives visibility orientation (like in threejs) to meshes without an explicit material set.

ex: in the playground demo scene #2 (basic shapes)

If you go behind the plane or the ribbon, you don't see them anymore. Same behavior if you go inside the box, the torus, the cylinder or the sphere.

If you change sideOrientation to BackSide, then you can see only the back of the plane or the ribbon... and only the faces inside the closed meshes : sphere, box, etc.

 

And if you change to DoubleSide, well, you can see either front and back or outside and inside 

 

If you use a material with your mesh, then it applies to light reflection the same way.

If you texture it, same behavior. Note : for DoubleSide value  the texture is replicated back, or inside, with the same atlas coordinates

[GameMonetize]

This is A STRONG feature I just added some comments on your PR that prevents me from validating it

[jerome]

Ok,

I just read it... and answered to have some small precisions 

[jerome]

I checked again your mesh creationXXX() method codes for each shape in the vertexData.ts.

 

I just don't get where and what other kind of stuff, more than positions / normals / indices / uvs, should then be updated 

So I don't know what to do more. 

I just updated the PR github comment to detail this better.

[GameMonetize]

No worry I'll take care of this so you will see what I meant

[jerome]

documented 

[Wingnut]

Hi guys.  I don't understand MOST of this talk, but, are we getting double-sided capabilites for ALL of our basic shapes?

 

I'm sure this option comes with the expected performance cost, but, this is exciting!  Thanks for the work, you guys!

[jerome]

Yes we are !

 

Actually there is no real performance drop.

 

If you use FrontSide, well, nothing changes.

If you use BackSide, the mesh is computed backside before being created, so it is just the same mesh but from inside perspective (regarding face visibility/light reflection) for volumes or from backside for planes.

If you use DoubleSide, the mesh is given a double set of vertices in order to render each side. So only in this case, the mesh will have twice more vertices than a single sided mesh. If the mesh has some material, the double side option renders well only with backface culling...so twice more vertices but only those facing the screen to be actually rendered.

 

So performance could just be impacted for double side option, big amount of initial vertices (well a box has 8 vertices... so 16 instead, nothing to make a drama  . Maybe it is another thing with a monster computed ribbon mesh  ) and the way the cam looks at this double sided mesh.

 

This new option is for any basic shape, but the ground planes : I didn't think it was pertinent to give a back or double side to the ground, but I could do it if needed.

It is done only at mesh creation (far more difficult to recompute everything once the mesh is created, updated, etc), in the createXXX() method.

[Wingnut]

Thanks J!  Cooool.

 

You see, later when Microsoft decides to build Babylon Bay (AzureCloud VR Server) for us, each of our personal areas will be a box.  Likely, a skybox.  Our personal VR house... will be a box.  Likely a non-skybox-mode cubeTextured box.  We'll want to decorate the interior walls and hang pictures and arrange furniture... inside our boxes.

 

In the moo (the vr environment - Babylon Bay)... we create two new "spaces" called townSpace and lotSpace.  They reside between worldspace and local space.

 

The lotSpace... is the worldSpace that your skybox "lot" resides-within.  The townSpace is an array of lotSpace scenes... made-by and owned by we forum folk. 

 

It's only (hu)man-hours and resources away from (virtual) reality!  C'mon SuperMitch... you are a super artist. Do you want to model a VR town square?  Sure ya do. 

 

An Infocom-like gameworld server, with Azure DB, with chat and shout, with Jaxer underbelly, with BJS scenes, browser is the client.  YAY!  FUN!  Davrous... code up a VR server for us!  Use Jaxer.  We want users to login and own objects and be able to code/edit JS on their own scenes AND add/edit funcs on the Jaxer server... while they are logged-in.  (wizard-grade coders)

 

Real-time translators on the chat, too!  YAY!

 

Deltakosh... assemble the team.  Let's GOOOOO.  Babylon Bay... our new peaceful VR community under the Azure Cloud.  Microsoft Inc. will LOVE IT (and thus surely donate tons of free resources to us) 

 

Sigh.  Dreaming and babbling.  There's 2-sides to everything.    (...except when trying to drive the new Cannon raycast car... on the inside of a torus knot).  Yep, that's right, girls.  If thoust shalst double-side things, then thoust shalst test the physics of DoubleSided mode, right?  I bet it don't work.  I bet I can't drive the raycast car on the inside of basic shapes.  But maybe.