Jump to content

Front/Back/Double Side light reflection


Recommended Posts



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)


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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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  ?

Link to comment
Share on other sites



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 ?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

So I don't know what to do more.  :(

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

Link to comment
Share on other sites

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  :D ) 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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...