3D fashion retail website

[ozRocker]

Here's an example of using Babylon.js for fashion retail.  Its fully-responsive and runs on mobile devices too.

 

http://www.punkoffice.com/retail/

 

Its part of my portfolio which I'm putting together to try and get some work.  That guy is just some Italian tourist who's staying at the beach here in Melbourne.

 

[JCPalmer]

I like how you water mark under the shoes.  Saw that earlier, but could not get a good enough look at till now.  Might have to steal that, not the shoes, the technique for my MakeHuman clothes, once I figure out how to make them.

[GameMonetize]

Beautiful!

[ozRocker]

I still struggle with making the light fixed to the camera.  This is something that I try to do with all my demos so the camera view is always well-lit

 

I have this in my code but it doesn't seem to be working well:

newScene.registerBeforeRender(function() {   light.direction = myCamera.target.subtract(myCamera.position).normalize();   light.direction.z -= 0.4;});

and my light is setup like this

light = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(0, -2, 2), newScene);light.position = new BABYLON.Vector3(0, 10, 0);

[jerome]

maybe you just forgot to set the light position within the render loop also ?

newScene.registerBeforeRender(function() {light.direction = myCamera.target.subtract(myCamera.position).normalize();//light.direction.z -= 0.4;light.position = camera.position;});

[ozRocker]

 

maybe you just forgot to set the light position within the render loop also ?

newScene.registerBeforeRender(function() {light.direction = myCamera.target.subtract(myCamera.position).normalize();//light.direction.z -= 0.4;light.position = camera.position;});

 

When I try that, I have no light :/

[JCPalmer]

seems kind of natural to be something like:

newScene.registerBeforeRender(function() {    light.position = camera.position;    light.setDirectionToTarget(myCamera.target);});

The error in your code:

myCamera.target.subtract(myCamera.position).normalize();

would seem to be:

myCamera.target.subtract(light.position).normalize();

I also aim the light after setting the position.  I still think using the built in method of Directional light is more readable.

[ozRocker]

I also aim the light after setting the position.  I still think using the built in method of Directional light is more readable.

 

I must be doing something wrong 

http://www.babylonjs-playground.com/#2FENGK

[JCPalmer]

http://www.babylonjs-playground.com/#2FENGK#1

 

The shadow never appears here.  Think you are going to have to move the light too.  The setDirectionToTarget() instead of the camera.target.subtract hangs the system.  Seems like a bug there.

 

If you actually wanted shadows too, then you are going to have to have 2 lights, I thinks.

[GameMonetize]

What about this:

http://www.babylonjs-playground.com/#2FENGK#2

[ozRocker]

http://www.babylonjs-playground.com/#2FENGK#1

 

The shadow never appears here.  Think you are going to have to move the light too.  The setDirectionToTarget() instead of the camera.target.subtract hangs the system.  Seems like a bug there.

 

If you actually wanted shadows too, then you are going to have to have 2 lights, I thinks.

 

This works!  You can see it clearly here http://www.punkoffice.com/tori/  There's a shadow but its directly behind the mesh, which is fine.  However, if I did want the light slightly to the side, so the shadow appears on the other side of the object, is there a way to do that? (life would be so much easier if you could just parent the light to the camera)

[iiceman]

Maybe: http://www.babylonjs-playground.com/#2FENGK#4 ?

[ozRocker]

Maybe: http://www.babylonjs-playground.com/#2FENGK#4 ?

 

That doesn't look like its working.  If I spin around the Y-axis only the shadow still seems to move from side to side

[iiceman]

Maybe it's better visible with a spot light: http://www.babylonjs-playground.com/#2FENGK#5

 

Or did I miss the point of what you are trying to do here?

[ozRocker]

I altered your one slightly to make it a bit clearer http://www.babylonjs-playground.com/#2FENGK#6  Here I've locked rotation of the ground to the Y-axis only.  I've also made the ground bigger so the corner doesn't disrupt the shadow.  Now with this scene, when you spin it around the shadow should be fixed in place as if a light was glued to the camera.  Maybe your code is actually working correctly but there's a lag issue when spinning quickly.

[iiceman]

I think I know what you mean... no clue why there is this delay... tried with point light and a bit modified code, still the same: http://www.babylonjs-playground.com/#2FENGK#7

 

I guess that delay can not be avoided then... 

 

Fun fact: if you try to fake the arc rotate with a free camera, there seems to be no delay: http://www.babylonjs-playground.com/#2FENGK#8 (use arrow keys to rotate camera)

[GameMonetize]

Fixed: http://www.babylonjs-playground.com/#2FENGK#9

 

BJS can do everything

[iiceman]

That's cool... learned something totally new... again... never seen beforeCameraRender before. @DK: maybe you can explain why there is the delay with registerBeforeRender and no delay with beforeCameraRender? I am curious and would like to understand what I just learned

[GameMonetize]

This is a timing issue. Here is how it works:

 

- Scene select the current camera and do some computation (frustrum, projection matrix)

- OnBeforeRender is called

- Camera movement is evaluated (including inertia)

- Animations are evaluated

- Active meshes are evaluated

- beforeCameraRender is called

- Meshes are rendered

 

Which means that if you move the light inside OnBeforeRender, you missed camera movement for this frame and thus you are always one frame late regarding the camera's position

[iiceman]

Okay, I think I got it, thanks for explaining!

[JCPalmer]

I am wondering how automated this can be.  Many games can work with just one light, when it is always in the right spot.  Did a little exercise, by putting some code in Camera.  Did not even compile yet, but thought it would add to discussion.  Would this work for all camera classes?

private _cameraLight : PointLight;private _cameraLightOffset : Vector3;public attachCameraLight(intensity : number, offset? : Vector3) : PointLight{    this._cameraLight = new PointLight("camera light", Vector3.Zero(), this.getScene());    this._cameraLight.intensity = intensity;    this._cameraLight.layerMask = this.layerMask;                this._cameraLightOffset = offset ? offset : Vector3.Zero();    this.getScene().beforeCameraRender = this._camLightPosition;                return this._cameraLight;}        private _camLightPosition(){    this._cameraLight.position = this.position.add(this._cameraLightOffset);}        public get CameraLight() : PointLight{ return this._cameraLight; }

Seems like this desires better than a thread & playground which will slowly be buried.  If implemented, you could even skip adding a light in an exporter & add a Attach Light check box.