Creating a scanning laser effect

[alanz2223]

Hello guys, I am trying to create a sort of scanning laser effect that is emitted from a single point but covers the screen horizontally. Something similar to this. You see that the light is not fairly distributed throughout the emission plane, and it also glows really bright. Here is a playground of what I have so far.. http://www.babylonjs-playground.com/#1HECPU#47 . I am not familiar with anymore properties to edit, any suggestions? and will I need to create my custom shader for it? It seems a bit of a complicated effect to achieve but I don't want to underestimate the standardMaterial. 

[iiceman]

Hi there,

maybe the opacityTexture is what you are looking for? http://www.babylonjs-playground.com/#1HECPU#48 (not a scanning effect yet but I guess oyu get the idea  )

[eboo]

something like this?

 

http://www.babylonjs-playground.com/#1U7OXA

[alanz2223]

@iiceman I was unaware there was a fire texture, it looks amazing. @eboo I tweaked it a bit, I was looking for something more 2D and not a ray. You definitely got me started though thank you very much. Here it is http://www.babylonjs-playground.com/#1U7OXA#1

[alanz2223]

One last thing, would you happen to know how to reduce the flickering? I want it to be visible but not as much... Thanks

[iiceman]

Seems like it just flickers because of the ulrta fast rotation set by the k value in the registerBeforeRenderLoop. http://www.babylonjs-playground.com/#1U7OXA#2

[GameMonetize]

Hum..only one problem remains: is a scanner laser red OR green? Star Trek tends to suggest it should green  

[NasimiAsl]

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

[Wingnut]

I did a LOT of 'likes' here.  Fun stuff, you guys! 

I may have to put SSAO learning on-hold, because NasimiAsl's shaderBuilder keeps blowing my mind.  I think I need to make Naz teach it all to me... and I'll try to help him with docs.  That thing is hot hot hot (and very cool) 

nasimiAsl.brain.clone( {newparent: Wingnut} );  (enter)

Error:  Insufficient memory and processing power on Wingnut object... for requested operation.

Darn!   

(Wingy scans various things with all these cool laser scanners).

It seems I remember a wireframe scan happening at the beginning of "The Six-Million Dollar Man".  bvvvvvvrrrrrrrrrrt.  [smell of burnt flesh]  heh

[alanz2223]

@NasimiAsl that is truly some fantastic work, thanks. Correct me if I am wrong, but it seems like BabylonX is a tool for creating shaders? I was trying to mix my own color with the first mesh that has noise generation enabled, but I kept on getting undefined errors. Is there a documentation for this tool? I would like to start writing my own, I tried searching 'babylonx' but lets just say I don't recommend you try it at work or school lol (NSFW).

[NasimiAsl]

8 hours ago, alanz2223 said:

@NasimiAsl that is truly some fantastic work, thanks. Correct me if I am wrong, but it seems like BabylonX is a tool for creating shaders? I was trying to mix my own color with the first mesh that has noise generation enabled, but I kept on getting undefined errors. Is there a documentation for this tool? I would like to start writing my own, I tried searching 'babylonx' but lets just say I don't recommend you try it at work or school lol (NSFW).

You Right in all you words  This is a new Tools and we (thanks a lot  @wing ) close to Commit Beta version with documantation

you can see from here before commit : https://github.com/RNasimiAsl/Extensions/blob/master/ShaderBuilder/Documentation%20Temp.md

 var matTemp = function (noise) {
			  return new BABYLONX
			  .ShaderBuilder()
			  .SetUniform('co1','vec3')
			  .InLine('vec4 a = vec4(vec3(1.),  min(1.,  pow(0.95/(abs(pos.y)+abs(vuv.x)*0.95)  , 31.)    ));') // Def Result like Red Color
			  .InLine('result = vec4( min(1.,max(0.,a.w))     ,pow( vuv.x/a.w,0.91 ) ,0.,1. );') // Def Result like Red Color
			  .Reference(1)
			  .Solid({ a: 0.0 })
			  .Yellow(1, 'result = vec4(vec3(1.),1.);', { rangeStep: -0.48, rangePower: -0.6 })
			  .InLine('result.xyz = co1;')
			  .InLine(noise ? 'float nois = abs(noise(pos+vec3(time*0.01)))*0.3;':'float nois = 0.;')
			  .InLine('result.w = pow(result.w,3.)*8. -nois ;')
			  .Transparency() 
			  .Back();
		  }
			  
		  mesh.material = matTemp(false/*enable noise*/).BuildMaterial(scene);
		
		 

you can change your wanted color (dynamicly ) with this  

"mesh.material.setVector3('co1', { x: 1/*red*/, y: 1/green*/, z: 1./*blue*/ });   "

your first question can be solve with more matematical stuff so look is very complicated but i explain it for you maybe help

1. i make a plan and change a PivotMatrix for correct rotation ( you can scale that for find your wanted size)

2. i write ' vec4 a = vec4(vec3(1.),  min(1.,  pow(0.95/(abs(pos.y)+abs(vuv.x)*0.95)  , 31.)    )); ' for make laser shape on this face 

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

3. i reference this color map and clear all with vec4(0.,0.,0.,0.)

4. use Yellow reference for draw what i need  

           

solid shader link : http://babylonjs.com/cyos/#W2IOW

[Wingnut]

  #2 looks like #2.    Is there a sick bird around here?  (In other words, fancy math looks like bird poop, to me.  I am missing the number-loving part of my brain.  It fell out-of my brain during a childhood bicycle accident.)  heh.  

ShaderBuilder is a text-stacker, eh?  It tries to build a shader FOR US, but in certain places where it cannot automate the process, you can insert inLines.  Inserted lines.  Just force them puppies into the stack-o-text that eventually becomes shader code.  It's truly magical.  It is a FAST way to learn shader coding, too (esp with the help of CYOS and this great tutorial).   ShaderBuilder has a very bright future, in my opinion.

The tables at the bottom of the temp docs ... are hand-made at the moment.  After the .ts files for shaderBuilder are complete, those tables will auto-generate from .ts source.  I made them by hand this time... just to help me learn,  and to help Naz (nasimiAsl) and I... to document things.

Regarding 'BABYLONX'... Raanan had some info for me this morning... I will pass it along:

Quote

 The namespace is set to BABYLONX as this is not part of the core features of Babylon.js and is, essentially, an extension. The BABYLON namespace should be used only by the direct components of the framework.

Well there we go.  Folks who understand scopes and namespaces... will know what that means.  Me?  I just turn knobs on the magical Etch-o-Sketch called BabylonJS, and I type 'BABYLONX' whenever/wherever someone says that I should.  heh

[Hudo1979]

@NasimiAsl its a nice tool, but I try to understand the magic behind it, could you give a native shader of the thing you just did with the scanner?

[Nabroski]

yeah, shaders are great, already got 100 of them, when i launch babylonjs.

personal experiment: 1 light and a single plane
http://babylonjs-playground.com/#BRSMM#3

with music: (i will play this at a house party, i m pretty sure the girls will like it too)
http://babylonjs-playground.com/#BRSMM#7

 

[dbawel]

On 4/18/2016 at 6:54 PM, Deltakosh said:

 

Hum..only one problem remains: is a scanner laser red OR green? Star Trek tends to suggest it should green  

 

I couldn't help but to "geek" out and respond to this. Actually, most of the Federation's ship's phasers are red, as well as their handheld weapons (they don't use lasers). Thus as a member of the Federation, I couldn't let this comment simply pass. And after finding myself unable to avoid responding to this, it's hard to believe I actually found a "real" girl to agree to marry me. I'm guessing it's a decision she'll be regretting for a long time.