Please check out my new 3D website. Its awesome! :)

[ozRocker]

I've just finished the alpha release of my website which I wrote with Babylon.js.  I'm waiting on some resources before I can complete the final version.

 

www.punkoffice.com

 

This has Facebook open graph tags for the different views and is also SEO compliant (well...each view is crawlable with links, text and images).  I've tested it with Facebook OG linter and Googlebot crawler.  Haven't tested it with Bing yet (oops!)

 

This can run on 60 FPS on iPhone 5 and above.  Damn slow on iPhone 4S though.

 

Feel free to give any suggestions or criticisms.

[jokyfoot]

Very nice! Love the scans

[iiceman]

Very cool! I really the scanned 3D models, too, and the effect when you hover over them giving them this yellow outline. Can you show me in a playground hoe to achieve that effect? 

 

Edit: found something about it in the forum and played around with a playground: http://www.babylonjs-playground.com/#E51MJ#7

You use this it seems:

mesh.renderOutline = true;mesh.outlineWidth = 0.02;mesh.outlineColor = new BABYLON.Color3(200/255,217/255,49/255);

When playing around I noticed that it doesn't work very well if you want a thick outline (at least on cubes it doesn't, it looks great on your models tho). So I made a custom outline version in the above playground. maybe it's useful for anybody out there).

 

 

One thing I noticed: I always swipe in the opposite direction. I donno why, it's probably just me, but it feels like when I swipe from left to the right it should turn the screen to the left. Like dragging it to make it rotate... you know what I mean? It's the same with all those touch event sliders nowadays. (Not sure if I described it well enough ... :-/ )

 

And a question: did you consider using light and shadow? That's might boost the atmosphere of that scene (but probably slows down performance). Maybe not on the iPhone but as a optional feature when the site is opened with a desktop browser?

 

So.. very nice, great job!

 

Edit - another idea: if you want to avoid those lightboxes that display the text content and videos you could make the camera move upwards and display the text and the videos directly in your scene, could be a cool effect I think

[adam]

There is no close button for the videos in IE or Firefox.

[benoit-1842]

Very cool !!!!  It's just tough sometime to navigate in between your web pages.....  But it's very nice !   What tool did you use to rig you character ?

 

Awesome,

 

Benoit

[adam]

A lot of people won't know that you can look around by dragging the mouse.  You should probably show a tooltip or something.  Maybe even have a link that rotates to the other view.

 

Edit:  I just went back and rotated around some more.  You should have links to the other pages on each page/view.  Maybe these links should rotate with the users view.

[ozRocker]

Very cool! I really the scanned 3D models, too, and the effect when you hover over them giving them this yellow outline. Can you show me in a playground hoe to achieve that effect?

 

Edit: found something about it in the forum and played around with a playground: http://www.babylonjs-playground.com/#E51MJ#7

You use this it seems:

mesh.renderOutline = true;mesh.outlineWidth = 0.02;mesh.outlineColor = new BABYLON.Color3(200/255,217/255,49/255);

Edit - another idea: if you want to avoid those lightboxes that display the text content and videos you could make the camera move upwards and display the text and the videos directly in your scene, could be a cool effect I think

Yeh, the outline doesn't work too well on some of the boxes and it barely works on text.  For some reason the outline is offset by quite a lot when done on text.

 

Someone else mentioned the scrolling.  They said it felt counter-intuitive.  They would move their finger left and expect the wall to move with their finger.  I did a quick check to try and experiment but I don't know how to change the direction that the arcRotateCamera moves.  Any ideas?

[ozRocker]

A lot of people won't know that you can look around by dragging the mouse.  You should probably show a tooltip or something.  Maybe even have a link that rotates to the other view.

 

Edit:  I just went back and rotated around some more.  You should have links to the other pages on each page/view.  Maybe these links should rotate with the users view.

 

You're talking about the HUD (well, that's just what I refer to it as, since its permanently on the screen like a head-up-display).  I've just got a footer HUD with a link to the e-mail.  I'm concerned about putting every link into a HUD 'cos then it'll just end up being a 2D website with a superfluous scrolling 3D background.  I'm gonna let it sit for a while to see what feedback I get.  Some people have brought up that they think others won't realise you can move.  But I've never heard from anyone saying that they personally didn't realise that they can move.  Most people sense there's movement when it first loads and the view shifts a bit.  Trying my best to not bloat the interface with indicators and tooltips.  Once again, I'll wait for some more feedback on that.

[ozRocker]

And a question: did you consider using light and shadow? That's might boost the atmosphere of that scene (but probably slows down performance). Maybe not on the iPhone but as a optional feature when the site is opened with a desktop browser?

 

Yeh, I've experimented with both.  For some reason shadows still look bad on Babylon.js with complicated meshes.  They seemed really strong and also in the wrong position.  I can't seem to change the intensity of the shadows.  With positioning the shadow would start away from the body and appear disconnected, though they should be connected by the foot.

 

I did some major optimising to get this working smoothly on a mobile device.  Even at 30fps per second I had people already saying "just give up and make a separate 2D mobile site" :/ Those 3D scans have been reduced to 10k polys.  If I put shading on them all the triangles will look very obvious.  To make them look good with lighting I need at least 20k polys and a normal map with that.  The initial scene loading would be too big since I have 3 full scans of people.  However, this site is just version 1 alpha ('cos I could spent forever working on it).  I'll keep experimenting and seeing how far I can push it, possibly by lazy loading of meshes.  People are being critical when thinking of commercial viability.  If they think the cost outweighs the benefit then straight away they'll say stuff like "You should make a 2D version and make this a novelty site".  That's why I was really pushing for things like SEO

[ozRocker]

There is no close button for the videos in IE or Firefox.

crap!  They aren't picking up media query rule in the CSS.  that's where the width and height of the close button is defined :/

[iiceman]

I see I see. Well, keep us up to date. It's very interesting!

 

About rotating the camera in another direction when swiping, this  seems to work: 

camera.angularSensibility = -1000;

I played around with the alternative outline thing but it seems it's not perfect either (somehow it doesnt work for cylinders :-/ ). I'll open another thread for that.

 

I also tired the video directly in the scene but not sure about performance here. At least in the playground it seems to have problems after pressing the run button a few times... maybe I just have to dispose/clear something. Not sure about that.

[ozRocker]

About rotating the camera in another direction when swiping, this  seems to work: 

camera.angularSensibility = -1000;

 

Awesome thanx!  I actually got motion sickness when I initially changed it.  I was so use to it spinning the other way that this really threw me off!  But its fine now.  I can see what's happening is that people are using the walls as a reference since the camera is just spinning in place.  On mobile especially they are expecting that the touch/drag feature will actually drag the wall that you are touching, as opposed to steer the camera

[adam]

You're talking about the HUD (well, that's just what I refer to it as, since its permanently on the screen like a head-up-display).  I've just got a footer HUD with a link to the e-mail.  I'm concerned about putting every link into a HUD 'cos then it'll just end up being a 2D website with a superfluous scrolling 3D background.  I'm gonna let it sit for a while to see what feedback I get.  Some people have brought up that they think others won't realise you can move.  But I've never heard from anyone saying that they personally didn't realise that they can move.  Most people sense there's movement when it first loads and the view shifts a bit.  Trying my best to not bloat the interface with indicators and tooltips.  Once again, I'll wait for some more feedback on that.

 

Clicking on the side of the screen to go to the next page might be nice.  I find the dragging to be a drag on desktop.  You could change the cursor to a hand on the side of the page to indicate that you can click.

[GameMonetize]

This is freaking awesome man!!!

[gryff]

Neat stuff ozrocker!

 

When I first viewed it, it took me back 10-15 years to my days with Virtual Reality Modelling Language (VRML). I used to belong to a VRML list that shared thoughts and ideas. One man, Len Bullard, was always talking about the idea of a 3d desktop on PCs. Your website is the closest thing I have seen to that idea. 

 

Some tech stuff.

 

1. Viewed on my slowest PC - WinXP/Intel I5(original)/Nvidea 650/Firefox. All the BJS worked fine - but the Unity piece (Fashion Show) stalled with an "uncaught exception: out of memory". I have used this machine to view my own unity stuff created on this machine and I have the Unity Web Player installed on it. So, I have no idea why this is happening.

 

2. Viewed it on my Samsung Galaxy Tab A  running Android 5 ("Lollipop") with Chrome - worked fine. Seemed nice and smooth, so the FPS must be pretty good. Did not try the Unity piece as you said it was for PCs.

 

So, IMHO, you have done an excellent job on creating a very innovative website.

 

cheers, gryff

[ozRocker]

That's what annoys me about Unity3D.  You spend all this money so you can now convert your scenes to webGL, but its so powerful that it will barely run anywhere!  It won't run on IE and you're lucky if it doesn't crash your mobile browser.  I can get my Babylon.js site running on mobile at 60FPS, no chance in hell I can get Unity3D webGL to do that.  I did actually use Unity3D to build my scene but I used the Babylon.js exporter.

 

The goal for me was to get it working smoothly and without too much load time.  Now I've got that happening I will work on adding more features to enhance the scene, but still try to keep the frame rate high and loading times low.

[gryff]

Well ozrocker, I will give it a try tomorrow on my Win7/Intel i7(4th Gen) machine - see if I get different results.

 

As for Unity - I'm not sure how much real interest they have in webGL. Time maybe will tell

 

As an aside, the "Fashion Show" interested me as I have seen something which might be very similar

 

Other Fashion Show

 

Done with Blend4Web - a plugin that allows complete export of scenes from Blender. The scene takes a while to load and I don't think the FPS is great.

 

cheers, gryff

[ozRocker]

 

As an aside, the "Fashion Show" interested me as I have seen something which might be very similar

 

Other Fashion Show

 

 

That's cool!  That's actually given me a few ideas.  I like the spec highlights on the runway, the smoke effects and music.  I've seen computer generated fashion shows and I've seen "live" VR fashion shows where they use actual footage but you can't walk or interact.  I haven't seen any that use real catwalk models that have been scanned in and animated with real walks.  As far as I know I'm the only one thats doing it, not that its impossible.  A big game dev company like EA or UbiSoft could make an ultra-realistic fully-interactive fashion show in a day but they probably don't have any interest in doing so.  Games like UFC and Assassin's Creed are far more complicated!

 

Unity seem to be hoping that everyone else improve's their frameworks instead of making their framework more versatile.  When people complain about it not working on certain platforms, they just tell them to avoid those platforms.  They also post up articles on pending improvements to browsers such as the new up-coming bytecode format for Javascript http://blogs.unity3d.com/2015/06/18/webgl-webassembly-and-feature-roadmap/

[jahow]

Hey ozRocker, your site looks great! The 3D scans are quite impressive to be honest, I love the level of detail. The fact that they don't have strong lighting is alright as they have very nice texturing and modeling. I'd say maybe add some subtle lighting, such as a soft highlight behind the models. Or even a Fresnel effect (BJS has those). Just a bit of subtle stuff so people think "woa, this guy really is into details"

 

And I'm not talking about shadows: these will probably hurt perf on mobile devices and wouldn't fit with the scene. Or maybe just a plane with a round black gradient under each model, as some sort of cheap ambient occlusion.

 

Anyway, congrats for having this run on mobile devices. I couln't test it myself, but I'm amazed that it's even possible.

[adam]

I just tried it on my Windows phone and the performance is good.

 

It was a little difficult dragging to the different pages.  The drag was a little slow and when I tried to do it faster the phone thought I wouldn't to navigate back to the the previous page.

[ozRocker]

I just tried it on my Windows phone and the performance is good.

 

It was a little difficult dragging to the different pages.  The drag was a little slow and when I tried to do it faster the phone thought I wouldn't to navigate back to the the previous page.

 

I can make dragging more sensitive so smaller drags create a greater spin.  Is the sensitivity actually different on the Windows phone to other touch devices?

[adam]

I can make dragging more sensitive so smaller drags create a greater spin.  Is the sensitivity actually different on the Windows phone to other touch devices?

 

I don't know.

[gryff]

Well as promised ozrocker, I tried the "Fashion Show" on my Win7/Intel I7/8GB RAM machine.

 

Results:

 

1. Firefox - works

2. Chrome - works

3 IE - I get a message telling me the webGL will not work and to try Firefox. But I continued anyway. Finally loaded and gave an alert that Web audio not supported. I can see the model walking and I can move around. In Chrome & Firefox the chairs and the model cast shows on the catwalk and back walls  - no shadows in IE

 

On all three browsers the download time is long  5-6minutes - but if your website is in Oz, we live about as far away as we can get so the download time might reflect the route the data has to take.

 

cheers, gryff

[GameMonetize]

Works perfectly well on Edge

[reddozen]

I can make dragging more sensitive so smaller drags create a greater spin.  Is the sensitivity actually different on the Windows phone to other touch devices?

 

What about taking the drag movement, and if it's greater than a certain margin that you just hard rotate the camera. As in, not a free camera. Fixed camera until you get a drag input, then it rotates a predefined amount, and only once.