# Japanese Lamp and Babylon practice

**URL:** <https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750>\
**Category:** Demos and projects\
**Created:** [July 26, 2019, 8:50am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750 "2019-07-26T08:50:58Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [July 26, 2019, 8:50am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/1 "2019-07-26T08:50:58Z")

</div>

Hi guys,

Normally I am a pure 3D artist and I almost never play with the code editing except for materials and render settings. I basically have 0 knowledge in HTML/JS/CSS.  
As I had some free time this week, I decided to create my first complete Babylon scene from scratch to enhance my knowledge, in order to gain some autonomy about scene creation. Usually my good friend @Vinc3r is taking care of most of the coding part.  
I started with a simple Japanese lamp scene, which I did following a Blender/Unity tutorial to push it into Babylon.  
About 3D specs, it has been made in Blender, using Cycles to bake the lightmaps, and I used Photoshop and Shader Map Pro for the textures.  
I tried my best to play with lightmaps integration, post-process effects and other Babylon cool stuff. It’s still a WIP and I don’t know where I am going with it 😃

[The current scene is here](http://www.axeon.fr/CLIENT/AXEON_SOFTWARE/TEST/lampBabylon/)

And a little peak about it :

 ![](https://i.imgur.com/DtQYaN7.jpg)

---

<div class="post-metadata">

**Author:** ![Theodore\_Lee](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/theodore_lee/32/5061_2.png) [@Theodore\_Lee](https://forum.babylonjs.com/u/Theodore_Lee)\
**Post date:** [July 26, 2019, 10:02am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/2 "2019-07-26T10:02:41Z")

</div>

This is extremely beautiful!

---

<div class="post-metadata">

**Author:** ![Mr\_K](https://avatars.discourse-cdn.com/v4/letter/m/e56c9b/32.png) [@Mr\_K](https://forum.babylonjs.com/u/Mr_K)\
**Post date:** [July 26, 2019, 10:12am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/3 "2019-07-26T10:12:04Z")

</div>

Amazing work! The particle effect really makes the scene come to life.

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [July 26, 2019, 11:42am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/4 "2019-07-26T11:42:34Z")

</div>

Thanks to both of you.

In my todo list, I want to redo the switch and its wire and to set up properly the starting camera angle. I also need to create a play/pause system for the music (and find a real Japanese track, not a Chinese one).  
And, if possible, to find a trick to start the particles system only when all the other assets are loaded. 🤕

---

<div class="post-metadata">

**Author:** ![Mr\_K](https://avatars.discourse-cdn.com/v4/letter/m/e56c9b/32.png) [@Mr\_K](https://forum.babylonjs.com/u/Mr_K)\
**Post date:** [July 26, 2019, 12:07pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/5 "2019-07-26T12:07:23Z")

</div>

You could try using the async loader with [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to wait for everything to load before starting the particles.

Something like this should do the trick.

```
var loadLamp = function () {
    return new Promise((resolve, reject) => {
        BABYLON.SceneLoader.LoadAsync('', 'your/file/url', scene).then(function (asset) {
            resolve(asset)
        })
    })
}

loadLamp().then(startParticles())
```

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [July 26, 2019, 1:17pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/6 "2019-07-26T13:17:28Z")

</div>

Thanks, I will give it a try.

---

<div class="post-metadata">

**Author:** ![poetoem](https://avatars.discourse-cdn.com/v4/letter/p/3be4f8/32.png) [@poetoem](https://forum.babylonjs.com/u/poetoem)\
**Post date:** [July 26, 2019, 2:23pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/7 "2019-07-26T14:23:15Z")

</div>

That’s a really beautiful scene!  
Great work!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 26, 2019, 3:22pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/8 "2019-07-26T15:22:42Z")

</div>

MAN! This is impressive! We will add the demo on our homepage!

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [July 26, 2019, 5:39pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/9 "2019-07-26T17:39:35Z")

</div>

Hey, thank you!

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 26, 2019, 5:51pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/10 "2019-07-26T17:51:27Z")

</div>

Awesome!

It would be pretty cool if we could hit the switch on the ground to flip it on and off.

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [July 26, 2019, 5:52pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/11 "2019-07-26T17:52:50Z")

</div>

The first thing I tried to do was flip the switch.

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [July 26, 2019, 6:25pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/12 "2019-07-26T18:25:27Z")

</div>

Ah ah I could do that, but it means I need to bake a new lightmaps pack for the OFF version. And to understand how JS works 😃  
But it is a terrific idea! Let me think about it.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 26, 2019, 7:07pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/13 "2019-07-26T19:07:24Z")

</div>

you will also have to make sure you an reference the “switch” mesh so you can know when it is hit, and also make it flip back and forth!

You got this, if you were able to get this far.

---

<div class="post-metadata">

**Author:** ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)\
**Post date:** [July 27, 2019, 5:11am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/14 "2019-07-27T05:11:33Z")

</div>

> [@Crotmoul](#):
>
> I almost never play with the code editing except for materials and render settings. I basically have 0 knowledge in HTML/JS/CSS.

Glad to see that I am not the only one. Welcome to the club 😁

Very very nice @Crotmoul though as others have said, I tried clicking the switch! But you are a details man.

Too often people just grab a model from somewhere then complain BJS does not work. Every team needs a model creator. Very good to see your demo on here

cheers, gryff 🙂

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [July 27, 2019, 10:03am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/16 "2019-07-27T10:03:05Z")

</div>

@Crotmoul I see you can be able to do code as well when I’ll come back from vacations 🤓

Do you have screenshot from the Unity tutorial you’ve made at the time?

Nice piece of scene 😉

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [July 29, 2019, 7:40am UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/17 "2019-07-29T07:40:44Z")

</div>

I didn’t push anything on Unity, I went directly with Babylon.

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [August 6, 2019, 2:19pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/18 "2019-08-06T14:19:36Z")

</div>

Hi all,

As @Vinc3r is back to the office after his vacation, he was able to help me **a lot** with the coding part. So… This little app has been updated. Now you have:  
• The ON/OFF system with two dedicated lightmaps and materials sets  
• A proper play/pause button for the music  
• The particles are turning off when we switch the light off (and they come back as well)  
• An animation for the switch (plus a click effect on the pointer)

Also a good thanks to @devAxeon for his help. It was way to complicated for my knowledge ah ah.

[Still available following this link](http://www.axeon.fr/CLIENT/AXEON_SOFTWARE/TEST/lampBabylon/)

Have fun playing with it 🙂

 ![2019-08-06%2016_17_35-](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/23baf4d0a583274b8562d6a9339e58bf6e963339.jpeg)

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [August 6, 2019, 2:47pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/19 "2019-08-06T14:47:41Z")

</div>

And BTW, it would be awesome to have an option to occlude the specular from the shadows. Because it’s not so realistic to have the specular effect glowing in shadowed parts of a scene and it would be a great way to go further in realism with Babylon.

There is this option available in the Sketchfab editor or in Unity or the UE for instance. We’ll make a proper request with some examples in the proper section of the forum later 😉

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 6, 2019, 2:58pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/20 "2019-08-06T14:58:23Z")

</div>

There is no specular in shadowed area (there is literally no light). Can you repro this behavior?

---

<div class="post-metadata">

**Author:** ![Crotmoul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crotmoul/32/1030_2.png) [@Crotmoul](https://forum.babylonjs.com/u/Crotmoul)\
**Post date:** [August 6, 2019, 3:08pm UTC](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750/21 "2019-08-06T15:08:13Z")

</div>

In fact I was talking about the specular working with the lightmaps. Vinc3r will prepare a dedicated scene tomorrow in the request section to explain it the best technical way possible 😃

For example with the scene above:

[Next page](https://forum.babylonjs.com/t/japanese-lamp-and-babylon-practice/4750.md?page=2)