ShangShou Treasure 3D Web App

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

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.

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

0 Likes

#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!

0 Likes

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

0 Likes

#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