Evalum

Rendering of GUI

Recommended Posts

Hello!

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.

Share this post


Link to post
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?

Share this post


Link to post
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);
			gl.deleteShader(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");
}
scene.render();

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

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

880478203_Screenshotfrom2018-11-1009-51-23.png.5122610fe0d9880c96ffb290bc440e8c.png

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@Deltakosh I guess it's only natural to re-write/extend some of the features tool (like Babylon) offers during game development. :) I'll push features that are more general and can be taken advantage of in general game programming when I end up writing some.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.