Glow effect: alternative to godrays that is easy on the CPU?

[qqdarren]

I've been using god-rays (aka BABYLON.VolumetricLightScatteringPostProcess) to give a nice fiery, pulsating, glow effect on a couple of meshes. I like the effect, but when I tested on an ipad it stuttered for a couple of seconds then restarted with them disabled.  Even on my notebook (reasonable CPU, but no dedicated GPU) they tend to make the machine go hot.

So, I'm looking for an alternative that is not so processor intensive. Maybe that means a custom shader? Or particles? Or transparent gradients?? I'd really appreciate links to babylon playground that show off some possibilities. Maybe you've done a glowing radioactive object? Or a forcefield round a spaceship? Or a fireball? Something along those lines.

Thanks in advance for any inspiration you can give!

[NasimiAsl]

witch object you wanna make glow

if you wanna make sphere glow that is simple 

[qqdarren]

I've been attaching the god-rays/glow effect to fairly complicated meshes, exported from Blender.

BTW, I was thinking something like this, but it is three.js, and I cannot remember seeing a similar effect in Babylon.js demos: http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html

[GameMonetize]

Coming soon  Ping @Sebavan

[NasimiAsl]

if it depend shader i think i have one

but i recommand use postprocess this method is not good for any mesh

[NasimiAsl]

http://www.babylonjs-playground.com/#1TYWYB#142 

http://www.babylonjs-playground.com/#1TYWYB#144

[Sebavan]

Hello,

Indeed this should be available by the end of next week in this way:

var highlightLayer = new BABYLON.highLightLayer("name", scene);

hihglightLayer.add(mesh, color);

I keep you posted.

[Sebavan]

First pull request has been done sorry for the delay, I am almost able to code again:

https://github.com/BabylonJS/Babylon.js/pull/1368

CU,

[Sebavan]

Hello,

The PR made it through the Playground ! I ll make a proper announcement once I ll have the doc.

But, you can already use it like this:

http://www.babylonjs-playground.com/#CDHKK#0

THIS LINK IS NOW BROKEN DUE TO API RENAME, please go to:

http://www.babylonjs-playground.com/#CDHKK#2

CU,

[jerome]

waaaowwww 

[kohai]

Aouch ! Super sexy glowing sphere !

Is it already added to Babylon.js release ?

[GameMonetize]

Yep it is in bjs 2.5

[adam]

Very cool.

One question, is there a reason why you chose pushMesh instead of addMesh?

[GameMonetize]

This one is for @Sebavan

[Sebavan]

It is by far the toughest question I had and to be no honest, I copy pasted push from the array (js naming) cause I am Lazy and Suffix by Mesh (also copy pasted from the time in the method). I basically did not think about it :-)

Do you think the guy who added script after java really thought about this ? (I am not in any case comparing myself to this guy but I just really like this answer) :

http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java

[GameMonetize]

I'm for "addMesh"...But this is just my thoughts ;D

 

[adam]

I like addMesh better because it follows what I've seen in other classes in BJS.

Thanks for writing this.  I'm definitely going to use it.

[Sebavan]

Ok, so I ll change it and next time think about it before :-) 

 

 

[V!nc3r]

In case you couldn't have test this feature on tablet : highLightLayer seems to work well on Galaxy Tab S and Ipad Air WiFi A1474.

[Sebavan]

Api has been renamed:

http://www.babylonjs-playground.com/#CDHKK#2

[NasimiAsl]

is that possible choose some meshes ( like transparent mesh  or glass ... ) for ineffective 

http://www.babylonjs-playground.com/#CDHKK#3  some thing is wrong between 2 sphere

this fixed when used 2 layer 

http://www.babylonjs-playground.com/#CDHKK#4

and any parameter or option for make custom glow?

 

[Sebavan]

Hey,

Yep so by default it is using one pass for all the meshes for efficiency but if overlapping meshes are critical you can use several layers.

About options, you can set on the highlight layer constructor :

    /**
     * Highlight layer options. This helps customizing the behaviour
     * of the highlight layer.
     */
    export interface IHighlightLayerOptions {
        /**
         * Multiplication factor apply to the canvas size to compute the render target size
         * used to generated the glowing objects (the smaller the faster).
         */
        mainTextureRatio?: number;

        /**
         * Multiplication factor apply to the main texture size in the first step of the blur to reduce the size 
         * of the picture to blur (the smaller the faster).
         */
        blurTextureSizeRatio?: number;

        /**
         * How big in texel of the blur texture is the vertical blur.
         */
        blurVerticalSize?: number;

        /**
         * How big in texel of the blur texture is the horizontal blur.
         */
        blurHorizontalSize?: number;

        /**
         * Alpha blending mode used to apply the blur. Default is combine.
         */
        alphaBlendingMode?: number
    }

then the blur sizes are accessible dynamically at run.

On the mesh you can choose the color and or using the emissive texture as a color input.

Alpha tested mesh will be discarded automatically.

What other options would you want or custom arts being open? Feel free to open the entry points you need in the code and PR. Else I could open them for you.

CU

 

[NasimiAsl]

thanks very useful .

i think it is time for make effect behind of glass 

i think this possible now to add in BJS 2.5

 

[JCPalmer]

Is stencil enabled by default?

[JCPalmer]

Looks like No, but there is a engine.isStencilEnable getter, so this can be more gracefully be added to other libraries.  It would just be up to the application layer (engine instancer) to enable it.