Jump to content

Building Model Glassy/X Ray look


Recommended Posts

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:




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


Link to comment
Share on other sites

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?





Link to comment
Share on other sites

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?




Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?





Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.




Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...