yahiko

Members
  • Content count

    108
  • Joined

  • Last visited

About yahiko

  • Rank
    Advanced Member

Contact Methods

  • Twitter
    YahikoUzumaki2

Recent Profile Visitors

1,092 profile views
  1. PIXI.js & Typescript Getting Started

    @sHAYM4N I've created a TypeScript + Pixi boilet plate : https://github.com/yahiko00/PixiProject It uses browserify and uglify. Feel free to use it. Hope this helps.
  2. How to use vertex shader with Pixi.js?

    After studying your examples, I've come to the conclusion that I don't really like plugins --- or I can't really see how to use them for my purposes, which is an equivalent assertion in my mind I was forced to have a look into the WebGL thingy and PIXI.glCore in particular. I think, for my needs, it is a good compromise between high level Pixi v4 powerful and optimized features, but lacking some abilities to deal with the vertex shader, and the very low level WebGL context quite burdensome after some hours of practice. So, I came up to this small program which is able to display a transformed white 3D photorealistic... triangle! Don't laugh, because it costed me hours of studying since I'm new in the world of WebGL and shaders ^_^' /* Initialize WebGL Renderer */ const width = 800; const height = 450; const renderer = new PIXI.WebGLRenderer(width, height, { antialias: true }); document.body.appendChild(renderer.view); renderer.backgroundColor = 0x000000; /* Shortcuts */ const gl = renderer.gl; // WebGL Context const glCore = PIXI.glCore; /* Load shaders */ let shaderVertSrc = document.getElementById("vertShader").text; let shaderFragSrc = document.getElementById("fragShader").text; /* Initialize shaders */ let shader = new glCore.GLShader(gl, shaderVertSrc, shaderFragSrc); shader.bind(); /* Vertex Buffer */ const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; const vertexBuffer = glCore.GLBuffer.createVertexBuffer( gl, new Float32Array(vertices), gl.STATIC_DRAW ); /* Vertex Array Object */ let vao = new glCore.VertexArrayObject(gl) .activate() .clear() .addAttribute( vertexBuffer, shader.attributes.aVertexPosition, gl.FLOAT, false, 0, 0 ); renderer.bindVao(vao); /* Uniforms */ let mvMatrix = mat4.create(); let pMatrix = mat4.create(); mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]); mat4.perspective(pMatrix, Math.PI / 4.0, width / height, 0.1, 100.0); shader.uniforms.uMVMatrix = mvMatrix; shader.uniforms.uPMatrix = pMatrix; /* Draw */ vao.draw(gl.TRIANGLES, 3, 0); The live snippet can be found here: Now, my issue is to be able to turn my nice triangle into a PIXI sprite, in order to come back into a normal world. Any hint would be really appreciated!
  3. Pixi v5: WebGL 1 or 2?

    It's a pity. I'm begining to appreciate this separate library
  4. Pixi v5: WebGL 1 or 2?

    So basically, you are going to develop and maintain a kind of pixi-gl2-core library alongside pixi-gl-core, aren't you?
  5. PIXI Matrix, Skew live Generator Tools ???

    Such a tool could be nice indeed.
  6. Simply removing those sprites from their containers is not enough?
  7. One solution could be to clear your stage like this: stage.removeChildren(); ... And hope the JavaScript GC works as expected
  8. Which Typescript IDE

    VS Code is an IDE I'm pretty satisfied with. Light, responsive and with a lot of plugins. You can't be wrong using it.
  9. Pixi v5: WebGL 1 or 2?

    Simple question I think. For the next major release of Pixi, v5, which WebGL version will be implemented? Thanks!
  10. How to use vertex shader with Pixi.js?

    I'm studying...
  11. Any other functional programmers out there?

    Glad this discussion has happened. I'm quite interested in functionnal programming, although I always find it quite "artificial" (my lisp courses maybe...) However, I'm still quite skeptical about functionnal programming performance since, in my mind, and I'm probably wrong, it creates (unecessary) copy of data which can lead to some extra work for the GC (which is a burden in JavaScript...). Interested to have functionnal programmers feedback on this point, especially when coding video games, where performance is a serious matter.
  12. Hi, While I'm studying WebGL, I'm wondering how to use vertex shader with Pixi.js. Using fragment shaders is quite clear in my mind, but I'm still confused on how to send vertices coordinates to a vertex shader in Pixi.js. For instance, assuming we have such a vertex shader: // vertex shader attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } and we have such vertices coordinates: const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; How could I draw this triangle (this is supposed to be a triangle) with this vertex shader and Pixi.js? Thanks!
  13. DisplayObject.filters questions

    Thanks, you're even answering non asked questions! I experienced this issue when setting filters dynamically. Good to know this hack Also, is it faster to have one big filter or several small ones, performing the same rendering of course?
  14. DisplayObject.filters questions

    I have some questions about filters and how they behave in Pixi.js. 1. When settings filters on a display object like this: stage.filters = [filter1, filter2, filter3, filter4]; Is the order defined in the list is the same when rendered? 2. Does Pixi.js create brand new FrameBuffer Objects for each filter, or does it reuses the output of the previous filter as input for the next filter? Sorry if I'm not really clear or accurate since I'm not a WebGL expert ^^ Thanks for your insights