Building Model Glassy/X Ray look

[Ruprect99]

Hi Everyone,

 

This is my first post and I'm new to babylon.js.

 

I'm trying to develop a proof of concept for a building modelling tool, so I've knocked up a model in sketchup and exported it using blender to a babylon js file.

 

I'm hoping to get a kind of glassy x-ray effect a like you can see here:

 

http://www.dreamstime.com/stock-image-house-3d-rendered-blue-image16320661

 

So far I've managed just by setting the alpha channel to get what you can see in the picture, but it is somewhat lacking!!

 

What do I need to make it really pop out and look like the provided link? more detail around the doors/ windows would help, but I seem to be missing outlines and that glassy look.

 

Also just setting it to wireframe looked quite good, but the large expanses like the roof lack definition. I guess to get a good representation in wireframe mode I would need to split the large expanses up into smaller areas?

 

Any thoughts or ideas would be most welcome.

 

Thanks very much

[GameMonetize]

Hello I think the best way would be to use a custom shader like this one:

http://babylonjs.com/cyos/#23U1UJ

 

 ​

[Ruprect99]

Hi, Thanks for the reply,

 

I downloaded the shader from the supplied and added it to my project and the results are a bit odd.

 

it now looks like a mostly white building with a few surfaces picked out in grey (see attached scene shot).

 

this makes me think that there might be something wrong with my model (also attached, rename to LittleHouse.babylon)

 

I've tried different forms of lighting, setting the alpha on the material (this seems to have no effect). 

 

Any ideas?

 

Thanks

LittleHouse.txt

[GameMonetize]

Can you please share it online? (with a reference to www.babylonjs.com/babylon.max.js)

[Ruprect99]

Share what online?

This is part of a Cordova mobile solution so not easily shared. Is there a suggested way of sharing Babylon solutions?

[Ruprect99]

I've been think about the way fresnel shading works and I don't think it will work well for this model, as it doesn't have enough curved surfaces to create the desired effect. You can see this if you replace the spheres in the playground demo with planes, you loose the outline effect.

 

What I really would like is something like the attached screen shot from sketchup, with the outlines showing and the building transparent.

 

I found a few x-ray shaders (here ""http://stackoverflow.com/questions/26336585/three-js-webgl-x-ray-effect/26356616#26356616"), but I can't get them working in babylon because I can't find how to access the Normal Matix? I read another post saying that it is not exposed in Babylon??

 

How could I get the outline showing?

 

Are there any outline shaders availiable?

 

Something like this? http://www.floored.com/blog/2014/sketch-rendering?

 

Thanks

[jahow]

If possible, reproducing your scene in the playground will make things easier: http://www.babylonjs-playground.com/

 

Also, setting the meshes visibility property < 1 will make the mesh transparent. But the alpha property of the material should have this effect too, so that's weird. Can't help you more without seeing the code

 

Finally, you can do pretty sweet things with the material's fresnel parameters: http://www.babylonjs-playground.com/#GK7FK

[Ruprect99]

Hi, Thanks for the suggestion.

 

I would love to get my model into the playground, but how do I upload it so its accessible to it?

 

I loaded your texture and it looks great (see picture).

 

I think all it really needs now is some kind of edge/wireframe over the top to give the edges some definition. Any ideas on that?

 

Thanks

 

[jahow]

Uploading files on the playground is not really possible... The simplest thing might be to work on an already existing model in the playground to try and achieve the right effect, before applying it to your own model.

 

At any rate, I don't know of an easy way to display edges on a model. Maybe, as was explained in one of the links you provided, detect which polygons are part of the same face? Then, assign a unique color to each of the faces, and when the whole object is rendered, draw an edge between polygons of different color. Although I'm pretty sure this would require a deferred rendering approach.

 

Hopefully someone will know better!

[Ruprect99]

After thinking about it a bit I thought that adding detail around key areas would probably help, so I added some more detail to the roof (just cause that was an easy place to start), and it does make the shader work more effectively.

 

I guess that is key to this, is dropping detail where you want to see through (so no texture on the walls for instance), but more detail around doors and windows etc

 

Adding the roof detail meant that it started to struggle to render on my android phone, but it should zip along on the ipad.

 

Thanks

[jahow]

Don't hesitate to tweak the 'bias' parameters on the fresnel effects, some values may give a better effect than others good luck!

[Ruprect99]

Hi, I really am very new to this. What does the bias actually do?

[jahow]

It defines how quick the fresnel effect fades when going towards the object's center (sort of). A high bias (> 0.8) makes only a very narrow outline, whereas a low value (< 0.2) almost covers all the object in the effect.

 

See the playground scene I linked in my previous post? you can just tweak around values in there and press "run" to see for yourself