ozRocker Posted November 9, 2015 Share Posted November 9, 2015 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. jerome, Jaskar, iiceman and 1 other 4 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted November 9, 2015 Share Posted November 9, 2015 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. ozRocker 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 9, 2015 Share Posted November 9, 2015 Beautiful! Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 9, 2015 Author Share Posted November 9, 2015 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 thislight = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(0, -2, 2), newScene);light.position = new BABYLON.Vector3(0, 10, 0); Quote Link to comment Share on other sites More sharing options...
jerome Posted November 10, 2015 Share Posted November 10, 2015 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;}); Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 10, 2015 Author Share Posted November 10, 2015 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 :/ Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted November 10, 2015 Share Posted November 10, 2015 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. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 10, 2015 Author Share Posted November 10, 2015 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 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted November 10, 2015 Share Posted November 10, 2015 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. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 10, 2015 Share Posted November 10, 2015 What about this:http://www.babylonjs-playground.com/#2FENGK#2 Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 11, 2015 Author Share Posted November 11, 2015 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) Quote Link to comment Share on other sites More sharing options...
iiceman Posted November 11, 2015 Share Posted November 11, 2015 Maybe: http://www.babylonjs-playground.com/#2FENGK#4 ? Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 11, 2015 Author Share Posted November 11, 2015 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 Quote Link to comment Share on other sites More sharing options...
iiceman Posted November 11, 2015 Share Posted November 11, 2015 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? Quote Link to comment Share on other sites More sharing options...
ozRocker Posted November 11, 2015 Author Share Posted November 11, 2015 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. Quote Link to comment Share on other sites More sharing options...
iiceman Posted November 11, 2015 Share Posted November 11, 2015 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) Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 11, 2015 Share Posted November 11, 2015 Fixed: http://www.babylonjs-playground.com/#2FENGK#9 BJS can do everything Quote Link to comment Share on other sites More sharing options...
iiceman Posted November 11, 2015 Share Posted November 11, 2015 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted November 11, 2015 Share Posted November 11, 2015 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 jerome 1 Quote Link to comment Share on other sites More sharing options...
iiceman Posted November 11, 2015 Share Posted November 11, 2015 Okay, I think I got it, thanks for explaining! GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted November 12, 2015 Share Posted November 12, 2015 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. MrVR 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.