Babylonjs WebGL 2.0 Suggestions

[Nabroski]

Hello 

So i work also on some great extensions for Babylonjs. 
My goal is to make them official in 2-5 months, its my free time, and i would love to contribute, also its a personal challenge.

I have a request for BabylonJs. 2.0  After several  hours trail and error patching the babylon.1.11.js 

It would be very great, if i can use my own words in shaders
this._effect = this._scene.getEngine().createEffect(shaderName, attribs, ["world", "view", "viewProjection", ....

Just a global string that hooks it every attrib uniform is totaly ok for me.

i had a really hard time starting with babylonjs shaders, becourse the rest of the world using their own words for attrib uniforms etc. so babylonjs is limmided to use worldview etc.
And as a beginner i just grab everything i see on the web and try to make it work. 

So i dont know, but their should be a way around this, maybe.

Best

 

[Wingnut]

Hi Nabs!  Happy holidays, if you celebrate those.

I give you LIKE, because you dev extensions... thanks!  I bet they will be excellent.

I dunno about free-naming issue.  Not experienced enough.

But, go here... https://www.eternalcoding.com/?p=113

Look at GLSL section.  IE-11 has a convertor.

Would free-naming... break that convertor?  *shrug*  

Perhaps impertinent.  Maybe your issue happens at higher layer. 

Thx for all your work and play with BJS.  We all enjoy your personality and helpful ways.  Be well.

Forum folk:  This issue is still open and needs comments.

[adam]

Doesn't ShaderBuilder do this? I'd ping Nas but I'm on mobile.

[GameMonetize]

ping @NasimiAsl

[NasimiAsl]

thanks @Deltakosh and @adam 

and happy new years for all member in here i hope have good year 

and yes shaderBuilder do that

 // pos = position
 // nrm = normal
 // vuv = uv in fragment shader   uv in vertex shader
 // camera = camera position

   sphere.material =  new BABYLONX.ShaderBuilder()
            .SetUniform('UniformName','UniformType')
            .VertexShader(' [vertex shader code] ')
			.InLine(' [fragment shader code] ')
			.BuildMaterial(scene);

// you just need make your vertex and fragment shader code in there and see result

or
 sphere.material =  new BABYLONX.ShaderBuilder()
            .SetUniform('UniformName','UniformType')
            .VertexShader(' [vertex shader code] ')
			.Front(' [front face fragment shader code] ')
			.Back(' [back face fragment shader code] ')
			.BuildMaterial(scene);

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

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

http://www.babylonjs-playground.com/#1HPRZ6#2

you can add anything you need in GLSL in that actually both is one 

just shader Builder Make Short defination

about first question dear @Nabroski

you can change  all words you use in shader 

i define all base parameter in this class in shaderBuilder.Ts

 https://github.com/BabylonJS/Extensions/blob/master/ShaderBuilder/Babylonx.ShaderBuilder.ts#L137

but some of them is hardcoded in core of babylonjs

like position :

1. how we can define  attribute   

in webgl engine :

var buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

gl.bufferData(gl.ARRAY_BUFFER,  DATA , gl.STATIC_DRAW);

var posLocation = gl.getAttribLocation( shaderProgram, "position");

gl.enableVertexAttribArray(posLocation);

var typeCastCount = 3; //  x, y, z 

var type = gl.FLOAT;  

var normalize = false;   

gl.vertexAttribPointer(posLocation, typeCastCount, type, false, 0, 0);

// vertex shader

• attribute vec4 position;
•  
• void main() {
• gl_Position = position;
• }

so for change position world you most find that in babylonjs core and change that for yourself

this is for normal and uv too

1-2 : uniforms

this is work flow for any 3d Engine when wanna render in ViewPort For each Model

1.MODELING COORDINATES    >  2. WORLD COORDINATES   >  3.VIEW COORDINATES   >  4.VIEWPORT COORDINATES

>> World coordinates are the global coordinate system that takes into account all objects in the scene.

*** world  

>> View coordinates are the coordinate system that incorporates a virtual camera's view of the scene.

*** View 

>> Viewport coordinates are the coordinate system that describes the camera projection for the scene (for example, orthographic or perspective) and fits the projected scene into screen space. This projection takes the scene from a 3D to a 2D projection so that it can be displayed on the screen. The textured spinning box example uses a perspective projection, which will make closer objects look larger than further ones, just as in the real world.

*** Projection

---------

world > View > Projection

or Model  ( without Global Information about Transform Matrix of Model )  View Projection  => View Projection 

all this is mat4 for babylon this defined for effect class 

c.setMatrix("projection",this._scene.getProjectionMatrix())

_effect.setMatrix("worldView",this._cachedWorldViewMatrix)

_effect.setMatrix("view",o.getViewMatrix())

_effect.setMatrix("viewProjection",n.getTransformMatrix())

_effect.setMatrix("worldViewProjection",e.multiply(t.getTransformMatrix()))

you most change this in babylonjs core too  but i think it is unnecessery because all this name is best name you can choose for this uniform

after this i think you can change all word in shader 

 

 

 

 

 

 

 

 

 

[Nabroski]

@NasimiAsl Wow. That's great, man. I currently working on a complicated Project, eats up all of my time. - but i will investigate in Shaderbuilder asap.

[Pryme8]

I did not realize shader builder was able to do all this. Great work bro I'm gonna have to dig into what you have done now as it looks to be quite a time saver for custom shader deployment.