Vertex and Index Buffers

Hi everyone, I’m new to to Phaser but I come from a graphics programming background. Is there any way to create an object that renders in the scene by specifying vertex buffers, index buffers, UVs etc?

I found the Mesh object that lets me render with triangle strips, but I haven’t been able to get any deeper. Can someone point me in the right direction?

:wave: My guess would be Mesh or Shader, but I don’t know any more.

A Mesh gives you control over the positions and UV coordinates of its vertices. Shader objects allow you to run custom fragment shaders (and probably vertex), but I haven’t ever used them and I don’t know much about them.

The intended way to freely take over rendering is by using a custom WebGLPipeline. You can configure its shaders, buffers, and attributes. I’d also recommend using it with a custom Game Object that specifically wraps the functionality you need because Phaser’s built-in Game Objects expect to be used with the default TextureTintPipeline (or a compatible one).

If you want even more control, you can look into using an Extern object. Externs will detach Phaser’s pipeline, run whatever rendering code you provide, then restore the WebGL context to the state that Phaser relies on.

1 Like

Thanks for pointing me to the WebGLPipeline docs. It looks like I will need to use that to accomplish exactly what I want.

However, it looks like I was mistaken thinking the GL context was in TRIANGLE_STRIP mode by default. It actually appears to be in TRIANGLES mode. This makes much more sense. I can work with that. It just means means I am sending more vertex data to the GPU than I would have to if I could also send INDICES ELEMENTS and reuse vertices.

Thanks!

Phaser uses TRIANGLES almost exclusively. Only Ropes use a different pipeline (the TextureTintStripPipeline) that uses TRIANGLE_STRIP. You’re free to use any mode you want in a custom Pipeline.