How to use vertex shader with Pixi.js?

[yahiko]

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!

[ivan.popelyshev]

Next time look at the other threads, we just had that thing yesterday and one day before it. If you want to do it in 3d, look at http://dev.goodboydigital.com/client/goodboy/geometry/examples/index.html#/mesh/triangle-textured.js , its pixi version 5.0.0-alpha, this one branch: https://github.com/pixijs/pixi.js/tree/next , build here: http://pixijs.download/next/pixi.js

In pixi version 4 it is also possible but you have to study how this one works: https://github.com/pixijs/pixi-plugin-example . I wont explain you details unless you first study those two things, that topic is too big for a chat/forum. First you have to study.

Also, 

 

[yahiko]

I'm studying...

[yahiko]

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!

[ivan.popelyshev]

Using PIXI stage and renderers: Well, now you have to wrap it into renderer plugin and create Triangle class based on Container.

Using your own stage and renderers:

1. create a basic Container class

2. store mat4 transform inside, make shortcuts like "position", "scale", "rotation".

3. Add children. Add some methods for them

4. Make recursive "renderContainer" and "renderWebGL" methods, first renders element and then children, second renders just that element.

Congratulations! Now you understand how pixi is built. You can write your own renderer, but better to just take pixi and remove/simplify parts you dont want to use