ShangShou Treasure 3D Web App

Demos and projects
1

Hello, everyone~

This is the latest project I have made with BabylonJS: ShangShou Treasure 3D
Here is the link to the demo site:
http://www.shangshouculture.com/

The client
ShangShou (/ʃaŋˈʃəʊ/, meaning “Hands-On” in Chinese) Culture is an Oriental lifestyle product and service provider based in Beijing.

The project
ShangShou Treasure 3D is a series of mini-web-apps to showcase merchandise with modern WebGL technology. This is the first episode of the series and more will come every month throughout this year, each having different contents and themes.

Ecommerce-related parts of the site have been reducted in this demo version to focus on the core technology - BabylonJS.

The Design
The client wants to achieve a fusion of modern 3D and traditional Chinese aesthetics, drawing inspiration mainly from the Song Dynasty(960 - 1279) era artworks.

shangshouforumpic
shangshouforumpic.jpg1600×900 103 KB

Utilizing photogrammetry and BabylonJS PBR system, a soft blend of photorealism and Oriental simplicity has been achieved.

To accommodate users who are not familiar with 3D navigation, the control interaction has been simplified to the bare-minimum: drag to rotate, pinch to zoom and click the icons to focus on different items.

All assets are optimized for mobile platforms, which is the main target platform. A device similar to or more performant than iphone 6 is adviced.

A Few More Words
This is the beginning of my exploration into the possibilities of BabylonJS, and none of it would have been possible without the AMAZING community of BabylonJS.

Huge thanks to all the patient and kind people who have helped me with my noob questions.:grin:

If you have any suggestions or questions, please let me know.

Cheers!

Edit 04/06/2019
It seems like something went wrong with the DNS provider and the link is problematic.
We are trying to fix it. For the time being, please visit via:
https://shangshouculture.github.io/
If you are still redirected to the old url, please clear your browser cache.
Thanks!

Edit 04/08/2019
DNS back to normal. The original link should work fine now.

13 Likes
2

nice effect for load and Perfect Culture behind the models :smiley:

2 Likes
3

This is fantastic and you deserve to be on our homepage
Do you mind doing a PR here?

(screenshot must be a 800x500 image)

1 Like
4

Really clean I love it.

1 Like
5

Thanks guys for your kind words.
@Deltakosh, absolutely. It will be an honor.

6

@Deltakosh I have made a PR to add the demo.
I’m really clumsy with github, please let me know if there are any mistakes.
Thanks!

7

Elegant !

1 Like
8

I love the design, color scheme & atmosphere, very nice job!

One thing: when I show objects Info all works fine on Chrome & Edge, but my FPS drops a lot on Firefox.

1 Like
9

Nice and elegant

1 Like
10

@hcmetal
Nice job, congrats!

1 Like
11

Thanks for all the kind comments!

@Vinc3r, thanks for the heads up. You are very thorough. :+1:
Some mac users also reported the same issue on safari.
I think it is mainly caused by the dynamic texture tags linked to the mesh, showing dimensions.
I haven’t had the time to dive into it, maybe it is rather cpu dependent.

12

Beautiful work and damn it loads fast!

1 Like
13

Thanks @inteja!
Assets are optimized for mobile access.
The model + texture files are about 3.1MB in size.

2 Likes
14

@hcmetal Hi, beautiful job! Can you say some guidelines of how did you make it?

1 Like
15

Hi, zeser, thanks for checking out my project.

The basic workflow is:

  • Photogrammetry for model input;
  • Houdini for model optimization and output;
  • Babylon js for 3d;
  • React for the whole app.

If you are interested in any particular part of the process, I am happy to discuss the details with you.

Saddly, real life has caught up with me and more episodes of this series are on pause for now, but not all hope is lost. :grinning:

16

Hi, thanks for your answer. I have a problem; every time that you select a model, the app reloads the models again and accumulating the size. I am using Promise and loadAssetsContainer with react hooks. Any idea why? Thanks