Simple Loading with shaderBuilder

[NasimiAsl]

simple loading method for make cylinder or sphere around of target object

http://www.babylonjs-playground.com/#1JUXK5#0

 

[jerome]

Waooww superb

[Raggar]

Awesome.

Those effects can be useful in pretty much Any game.

[NasimiAsl]

thanks all so if you have any effect in your mind( or video sample ) i like to add it @Raggar

[Temechon]

Awesome @NasimiAsl !! Make them animated from bottom to top (like a teleport effect)

[JCPalmer]

4 hours ago, Temechon said:

Awesome @NasimiAsl !! Make them animated from bottom to top (like a teleport effect)

Yes, I might be interested in adding a teleportation effect as a stock QueuedInterpolation (QI)  extension grand entrance.  Right now, I use a very fast HighlightLayer as part of the Expand entrance.  Another used temporary materials in the fire entrance (half way through scene).

Your example looks promising.  I cannot really read it though.  There are multiple examples & all the overhead of creating the 3 meshes all co-mingled.  Also, is it possible to write out self contained shaders with no requirement for your extension?  Putting in a dependence of one extension into another seems like a bad idea?  Some kind of toTypescript() or toJavaScript() method.  I do that for making inline sound, also part of QI.

I guess I could just hack my way to do it, but thought I would ask.

[Temechon]

Actually ShaderBuilder is already integrated into Bjs : http://www.babylonjs-playground.com/#1JUXK5#3

Btw it's animated !!! You rock Nasimi !

[JCPalmer]

@Temechon, that compile errors for me "BABYLONX is not defined"

[Temechon]

Indeed, I have some problems with my browser cache...

[JCPalmer]

Assuming ShaderBuilder is not too big & and is added to core.  It would allow things in the materials extensions to be based on it as well.  The BABYLONX.ShaderBuilder.InitializeEngine() would need to be able to be called multiple times, and possibly shutdown, if not already implemented though.

[Raggar]

14 hours ago, NasimiAsl said:

thanks all so if you have any effect in your mind( or video sample ) i like to add it @Raggar

Something that I think could be useful, would maybe be some weather effects, like rain, snow and even a dust storm like the following:

https://www.shadertoy.com/view/4ts3z2

And yes, I did link to that in another thread. It's really awesome to look at.

[NasimiAsl]

4 hours ago, JCPalmer said:

Yes, I might be interested in adding a teleportation effect as a stock QueuedInterpolation (QI)  extension grand entrance.  Right now, I use a very fast HighlightLayer as part of the Expand entrance.  Another used temporary materials in the fire entrance (half way through scene).

Your example looks promising.  I cannot really read it though.  There are multiple examples & all the overhead of creating the 3 meshes all co-mingled.  Also, is it possible to write out self contained shaders with no requirement for your extension?  Putting in a dependence of one extension into another seems like a bad idea?  Some kind of toTypescript() or toJavaScript() method.  I do that for making inline sound, also part of QI.

I guess I could just hack my way to do it, but thought I would ask.

yes it is possible because finally shaderBuilder just make normal custom shader and push it in Effect.ShaderStore

and you just be need control your uniform

[JCPalmer]

Actually, I realized I have all the extensions on my system.  ShaderBuilder is a single TS file 80 kb file.  I noticed that the JS file only drops to 77 kb.  I am in the process of converting everything to Gulp uglify / optimize for my extensions.  I can add this for yours.  I can then embed it right into the next version of QI.

@NasimiAsl, ok?

[NasimiAsl]

1 minute ago, JCPalmer said:

Actually, I realized I have all the extensions on my system.  ShaderBuilder is a single TS file 80 kb file.  I noticed that the JS file only drops to 77 kb.  I am in the process of converting everything to Gulp uglify / optimize for my extensions.  I can add this for yours.  I can then embed it right into the next version of QI.

@NasimiAsl, ok?

i like that do it   i am here message me anything you want and about InitializeEngine that is Javascript code just overwrite some method of shaderBuilder

To find BABYLON namespace in BABYLONX so if you change that to BABAYLON you can remove that and move source to right place

[JCPalmer]

Actually, I can just add it to my list of QI .js files, before I Gulp QI, if you are uncomfortable with Gulp.

[NasimiAsl]

I never Use That But you can add shaderBuilder ( i just test BABYLONHX )

[JCPalmer]

That was just too simple.  I added the relative path file "../../ShaderBuilder/Babylonx.ShaderBuilder.js" to my list.  ShaderBuilder is now in QI.  FYI, my file size went up from 148kb to 198kb, so uglifying SB is 50kb instead of 77. 

[NasimiAsl]

fire sample 

http://www.babylonjs-playground.com/#1JUXK5#5

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

http://www.babylonjs-playground.com/#1JUXK5#10

http://www.babylonjs-playground.com/#1JUXK5#11

 

 i think i need drink now but this is illegal in iran

[NasimiAsl]

@Temechon thanks

[JCPalmer]

You do not have a d.ts file in the repo, which is needed to call it in external .ts files like QI.  I temporarily copied your .ts file to QI src directory and did a build.  I get errors.  Reason is the ShaderHelper interface (line 209) is used in parameters of public methods of the exported class ShaderMaterialHelper.  I made ShaderHelper public.  It compiled & I got a d.ts file for myself.

Is your build process / tools capable of generating a d.ts for the next guy who wants to integrate ShaderBuilder into their own Typescript?

[NasimiAsl]

@Raggar i mean something like Loading Effect but i think someone do it before in babylonjs you can ask that i QA  

[Nabroski]

i will can reduce function calls overhead in babylonjs i will call you a true master. 
for now you type (at least) 4x color than in will be rephrased by babylonjs color and after 4 wrapped scoped something and endless loops (searching if the user really sure to use color) it hits webgl.

1x color:[1,1,1,1] ->webgl = shaderbuilder

1x https://www.khronos.org/opengles/sdk/docs/man/xhtml/glUniform.xml

[JCPalmer]

Ok, I have built my TeleportEntrance using the Playground for reference.  First thing is I got a very interesting wobble by lowering the # of subdivisions of the cylinder to 6 http://www.babylonjs-playground.com/#1JUXK5#14

I ran into a problem in the scene.beforerender.  It references the camera position & target.  What if there is more than 1 camera?  A scene level before renderer is only called once per frame.  A mesh level before renderer is call once for each camera that the mesh can be seen in.  Seems like you would need the scene level one to bump time, and a mesh level one to do the SetUniforms.

Also, when I look at the code for ShaderMaterialHelper. SetUniforms (),  the body of the call is empty.  I am totally at a loss here.  I realize you do not need to bother with this level of detail for a demo PG, but you do for an extension.  Any clarifications would be useful.

[JCPalmer]

Well, I tried just deleting the SetUniforms call in the PG, and the "movement" stops.  Just using wild values for position & target like this:

new BABYLONX.ShaderMaterialHelper().SetUniforms(
      scene.meshes,
      new BABYLON.Vector3(-1,200000,34),
      new BABYLON.Vector3(-199999,34000,666),
      { x: 0, y: 0 },
      { x: 100, y: 100 },
      time);

still worked fine.  Would I be ok just setting these to BABYLON.Vector.Zero()?

[NasimiAsl]

1 minute ago, JCPalmer said:

Well, I tried just deleting the SetUniforms call in the PG, and the "movement" stops.  Just using wild values for position & target like this:

new BABYLONX.ShaderMaterialHelper().SetUniforms(
      scene.meshes,
      new BABYLON.Vector3(-1,200000,34),
      new BABYLON.Vector3(-199999,34000,666),
      { x: 0, y: 0 },
      { x: 100, y: 100 },
      time);

still worked fine.  Would I be ok just setting these to BABYLON.Vector.Zero()?

this is for set camera position and in this material we never use this uniform 

** you can disable camera uniform in shaderBuilder Setting but i don't recommended that