Jump to content

Rendering of GUI


Recommended Posts


Can someone point me in direction on how can I render 2d plane with custom shader as GUI? I am thinking of doing health bar but splitting just simple image won't do. I want to have pixel level control over it through shader final look of the health bar image will be composed of multiple pictures and some shader logic to tie them together.

I am looking for answer like

var effect = ...;

effect.onBind(function () {
   // ... set uniforms

var healthbar = new BABYLON.Gui(effect, scene);
healthbar.position = new BABYLON.Vector2(0,0); // position on screen

This is just pseudo-code. It should be relatively simple answer. Just rendering plane on top of everything that is rendered on the scene.

Link to comment
Share on other sites

7 hours ago, NasimiAsl said:

Thank you! I looked through code and it can indeed be used for what I intend. It looks like a lot of overhead to simply render image(s) on top of everything. I can do that in pure WebGL with even less lines of code without much problems, but since I am using BabylonJS, I was wondering whether there is a way to do it in Babylon style?

Link to comment
Share on other sites

21 hours ago, MarianG said:

Hi. A simple and fast solution is to parent your plane to camera. line 22-26, and on plane you can add any material effect you want. But this is with 3d planes

This is fast and simple indeed, but behind the scenes it is too complex and unnecessary complicated to do just such a simple thing. What I was wondering is whether Babylon has a solution that does something like the code I'll provide:

(Setup once)

var vao, program, gl = engine._gl;
var vSource = `
	precision highp float;

	attribute vec2 a_position;

	void main()
		gl_Position = vec4( a_position * vec2(0.1, 0.22) + vec2(0.0, -0.5), 0.0, 1.0);

var fSource = `
	precision highp float;

	void main()
		gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );
	vao = gl.createVertexArray();
	gl.bindVertexArray( vao );

	const vbo = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, vbo );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1.0, 1.0, 1.0,-1.0, 1.0, 1.0, 1.0,-1.0, -1.0,-1.0, -1.0, 1.0]), gl.STATIC_DRAW );
	gl.vertexAttribPointer( 0 , 2, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray( 0 );

	program = gl.createProgram();
	function _initShader( s, type ) {
		var shader = gl.createShader( type );
		gl.shaderSource( shader, s );
		gl.compileShader( shader );
		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
			var err = gl.getShaderInfoLog(shader);
			throw Error('An error occurred compiling the shaders: ' + err);
		return shader;

	gl.attachShader( program, _initShader( vSource, gl.VERTEX_SHADER ) );
	gl.attachShader( program, _initShader( fSource, gl.FRAGMENT_SHADER ) );
	gl.linkProgram( program );
	if (!gl.getProgramParameter( program, gl.LINK_STATUS)) {
		throw Error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
	gl.bindAttribLocation( program, 0, "a_position");

gl.useProgram( program );
gl.bindVertexArray( vao );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 6 );

(Final code is used after every time the scene is rendered)


From there I can use uniforms for multiple textures I want to use and to position and scale the plane.

Isn't there anything in Babylon that does that already built in? If not, I'll roll my own and mark this issue as closed.

Link to comment
Share on other sites

So regarding your question, GUI is not rendered with shaders but with DynamicTexture.

Your code will work, but you will face potential issues by updating gl context as Babylon.js is keeping a cache of all changes and this cache will not know about your changes.


I would recommend using a ShaderMaterial on a plane as mentioned by @MarianG

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