Evalum

Members
  • Content Count

    10
  • Joined

  • Last visited

  1. Evalum

    Rendering of GUI

    @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.
  2. Evalum

    Rendering of GUI

    @Deltakosh Well, I'll then let the cache know about the changes :=) I am thinking of writing this as feature (GUI with shaders). gui3.mp4
  3. Evalum

    Rendering of GUI

    This is the motivation behind this question and the final result gui.mp4
  4. Evalum

    Rendering of GUI

    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) 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.
  5. Evalum

    Rendering of GUI

    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?
  6. Evalum

    Rendering of GUI

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

    Offset for individual particle

    I got it "hacky" fixed currently as I can not afford to spend any more time on this. I am taking advantage of vColor in fragment shader and I am storing my random offsets in color. BABYLON.Effect.ShadersStore["myParticleFragmentShader"] = "#ifdef GL_ES\n" + "precision highp float;\n" + "#endif\n" + "varying vec2 vUV;\n" + // Provided by babylon.js "varying vec4 vColor;\n" + "uniform sampler2D diffuseSampler;\n" + // Provided by babylon.js "uniform float time;\n" + // This one is custom so we need to declare it to the effect "void main(void) {\n" + "vec4 a = texture2D(diffuseSampler, vUV + vec2(vColor.b * 0.5 - 0.25, 0.0));\n" + "vec4 b = texture2D(diffuseSampler, vUV + vec2(0.0, -(time + vColor.r)*(0.05 + vColor.g * 0.15)) * (1.0 + vColor.b));\n" + "b.a *= vColor.a; \n" + "gl_FragColor = a * b;\n" + "}\n" + ""; // Effect var effect = engine.createEffectForParticles("myParticle", ["time"]); // Particles var particleSystem = new BABYLON.ParticleSystem("particles", 400, scene, effect); particleSystem.particleTexture = new BABYLON.Texture("wood_wraith_poison.png", scene); particleSystem.minEmitBox = new BABYLON.Vector3(0.5, 1.5, 0.5); particleSystem.maxEmitBox = new BABYLON.Vector3(-0.5, 1.5, -0.5); particleSystem.minSize = 3.0; particleSystem.maxSize = 5.0; particleSystem.minLifeTime = 999; particleSystem.maxLifeTime = 999; particleSystem.emitter = avatar;//new BABYLON.Vector3(4.2, 3.0, 0.0); particleSystem.manualEmitCount = 5; particleSystem.direction1 = new BABYLON.Vector3(0.0, 0.0, 0.0); particleSystem.direction2 = new BABYLON.Vector3(0.0, 0.0, 0.0); particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD; particleSystem.color1 = new BABYLON.Color4(0.0, 0.0, 0.0, 1.0); particleSystem.color2 = new BABYLON.Color4(1.0, 1.0, 1.0, 1.0); particleSystem.start(); effect.onBind = function () { effect.setFloat("time", time); }; warlock3.mp4
  8. Evalum

    Offset for individual particle

    I think I'll write extension to particles to include particle instance attributes to add more variability to individual particles. I am thinking of attaching hook to particle emit event where I'll attach instance attribute(s) or do more individual stuff for particle.
  9. Hello! I am playing around with particle system and I am using UV scrolling to animate textures of particles. I am able to provide time into custom shader to offset UV coordinates but I would also like to have random but persistent offset for each individual particle. Does anyone know how to do that? vec2 uv = vUV + vec2(0.0, time + particleUniqueOffset); Where time is provided as global uniform (accessible for all the particles) and particleUniqueOffset is random value created when the particle was initialized and stays persistent throughout its lifetime. I'll provide the code snippet that I use for now BABYLON.Effect.ShadersStore["myParticleFragmentShader"] = "#ifdef GL_ES\n" + "precision highp float;\n" + "#endif\n" + "varying vec2 vUV;\n" + // Provided by babylon.js "uniform sampler2D diffuseSampler;\n" + // Provided by babylon.js "uniform float time;\n" + // This one is custom so we need to declare it to the effect "void main(void) {\n" + "vec4 a = texture2D(diffuseSampler, vUV);\n" + "vec4 b = texture2D(diffuseSampler, vUV + vec2(0.0, -time * 0.3));\n" + "gl_FragColor = a * b;\n" + "}\n" + ""; // Effect var effect = engine.createEffectForParticles("myParticle", ["time"]); // Particles var particleSystem = new BABYLON.ParticleSystem("particles", 4000, scene, effect); particleSystem.particleTexture = new BABYLON.Texture("wood_wraith_poison.png", scene); particleSystem.minEmitBox = new BABYLON.Vector3(0.3, 1.0, 0.3); particleSystem.maxEmitBox = new BABYLON.Vector3(-0.3, 3.0, -0.3); particleSystem.minSize = 2.0; particleSystem.maxSize = 3.0; particleSystem.minLifeTime = 100; particleSystem.emitter = BABYLON.Vector3.Zero(); particleSystem.manualEmitCount = 3; particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_STANDARD; particleSystem.direction1 = BABYLON.Vector3.Zero(); particleSystem.direction2 = BABYLON.Vector3.Zero(); particleSystem.start(); effect.onBind = function () { effect.setFloat("time", time); };