Jump to content

Babylonjs WebGL 2.0 Suggestions


Recommended Posts


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.



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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()
            .VertexShader(' [vertex shader code] ')
			.InLine(' [fragment shader code] ')

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

 sphere.material =  new BABYLONX.ShaderBuilder()
            .VertexShader(' [vertex shader code] ')
			.Front(' [front face fragment shader code] ')
			.Back(' [back face fragment shader code] ')




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


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");


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


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


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 










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...