• Content Count

  • Joined

  • Last visited

About yahiko

  • Rank
    Advanced Member

Contact Methods

  • Twitter

Recent Profile Visitors

2456 profile views
  1. For information, this boiler plate has been updated. I've upgraded uglify-js (minifier) to uglify-es, its ES6 release. Cheers!
  2. 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. @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. 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. It's a pity. I'm begining to appreciate this separate library
  6. So basically, you are going to develop and maintain a kind of pixi-gl2-core library alongside pixi-gl-core, aren't you?
  7. 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. 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. Simple question I think. For the next major release of Pixi, v5, which WebGL version will be implemented? Thanks!
  12. 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.
  13. 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!
  14. 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?