Jump to content

3D fashion retail website


ozRocker
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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;});
Link to comment
Share on other sites

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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