My new hybrid website is up!!

[ozRocker]

I've just launched my new website www.punkoffice.com .  My previous one was a complete 3D experience which I think put off potential clients with long loading times and non-intuitive navigation. This new one resembles a traditional website but with 3D elements in there.  No loading screens or progress bars.  Just a smooth transition.  A few tricky things here:

Placeholder images

I didn't want loading screens, progress bars or blank spaces.  What I did was saved the canvas "right click to save as an image" and displayed that behind a transparent canvas.  I used this code to hide that placeholder image as soon as the 3D object is displayed:

mesh.registerAfterRender(function() {
	if (start) {
		$("#placeholder", window.parent.document).hide();
		start = false;
	}			
});

This is hiding the placeholder div in the iframes parent website. If webGL is not enabled and the 3D fails then the user still gets to see a 2D image.  Also search engines will parse the page and will use that placeholder image.

Title bar

This is in an iframe.  On desktop the light direction follows the mouse.  This is done using javascript "postMessage" to send the mouse pointer position to the title bar in the iframe.  On mobile devices the title bar just moves with the compass.

Scrolling past iframes

My web designer hated how the scroll wheel stops dead in its tracks when the cursor goes over an iframe.  I fixed this by listening to the mouse wheel event in the website within the iframe then passing the direction of the wheel to a function on the calling website then scrolling the appropriate amount.  Again only possible with iframes on same domain.

Working around broken sessions

I needed sessions to authenticate the contact form, making sure it was sent from the website not from someone typing directly in the URL.  For some reason as soon as a Babylon.js scene loads, the standard PHP session is overwritten.  PHP sessions are stored via the cookie PHPSESSID.  All I did was use my own cookie and it remained untouched by scene loading.

Babylon core

When I'm using Babylon.js iframes they can start to fail on mobile devices because of too many audio engines being created.  I switched to just using babylon.2.3.core.js and included the extras.  In this case I had to also include babylon.fxaaPostProcess.js for anti-aliasing the textures.

 

Thank you Babylon.js community for all your help!!

[Pryme8]

Holy crap dude this is awesome!  I want a scan of me soooooo bad now.  its sucks your in Australia, I would do bad bad things for a 3D model of myself.  

This seems like a profitable project, what are your goals?

who is your web designer id like to get his contact info I love his flow.

you just got me interested in you and your projects so hard now.

 

can you explain some of how you achive these 3D scans?

[ozRocker]

The web designer for this is Sandra Sjöö.  Her portfolio is here.  She's the 3D girl on the bottom-left in the "3D SCANNING" subsection.  She's looking for more work so if anyone needs a good designer she's available.

My business revolves around building game ready 3D models of people.  High quality but small file sizes so you can display them on a web-page.  I'm trying to penetrate the fashion retail sector and also modelling.  I'd like to start up a talent agency that features models in 3D, not just front and side profiles.  I'd like to run virtual reality fashion shows, have a way for fashion show choreographers to design their own show and send to the models.  I used to do catwalk modelling and I got sick of attending rehearsals 'cos the choreographer couldn't make up her mind.  This is just one of my ideas, but I have more.

The scans are done with 82 Nikon cameras all taking a photo at 1/300th of a second.  I use Photoscan to build the model using the photos via photogrammetry, Zbrush to clean up the topology, Blender for materials, Marvelous Designer for clothing, Unity3D to build scenes and Babylon.js for displaying on the web.  I also have a Perception Neuron inertial mocap suit to capture my own animations.

 

[Pryme8]

do you have a linked in account?

[ozRocker]

17 minutes ago, Pryme8 said:

do you have a linked in account?

Yep, my LinkedIn page is here https://www.linkedin.com/in/marcus-milne-898163a0

[aWeirdo]

Avast said it was a malicious link :S false possitive i suppose?

[ozRocker]

1 hour ago, aWeirdo said:

Avast said it was a malicious link :S false possitive i suppose?

I've had some reports from others about that.  I don't see why it would consider it malicious.  There's no script injection.  The only crazy thing that is happening is iframes communicating with the parent website.  Still sucks that this is happening.  I'd like to find out why it thinks its malicious so I could fix that warning.

[Pryme8]

How much would it cost me to get you to scan a semi fuzzy stuffed animal money, something with long legs and arms, and then rig it like its real? 

I would flip out if I could have a awesome monkey that I did not have to model, I mean I have a bunch but I have a sneaking suspicion if done right your process will get me a model that will become my go to character for demos and things

i imagine you would have to get creative and suspend it with fishing line or something to get it into t-pose.  Or like add some rigid wire inside it, but you seem to be a pro so I bet you got it worked out.

[Maverton]

Nice website it looks great and I like how you explain your step keep up the good work I learn a lot from reading your post