• Content Count

  • Joined

  • Last visited

About yahiko

  • Rank
    Advanced Member

Contact Methods

  • Twitter

Recent Profile Visitors

2,032 profile views
  1. yahiko

    Pixi.js + TypeScript boilerplate

    For information, this boiler plate has been updated. I've upgraded uglify-js (minifier) to uglify-es, its ES6 release. Cheers!
  2. yahiko

    Pixi.js + TypeScript boilerplate

    Thanks Feel free to use it as you wish. PS: I'm sorry I havent been able to work on Pixi.Js these days, but it may change next year
  3. yahiko

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

    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!
  5. yahiko

    Pixi v5: WebGL 1 or 2?

    It's a pity. I'm begining to appreciate this separate library
  6. yahiko

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

    PIXI Matrix, Skew live Generator Tools ???

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

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

    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!
  12. yahiko

    How to use vertex shader with Pixi.js?

    I'm studying...
  13. yahiko

    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.
  14. 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!
  15. yahiko

    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?