Implementing heightmap shader in pixi

[jkm]

I'm using pixi for a project and I want to implement a shader for a small 3D preview of a heightmap I'm going to generate. I would prefer to stay with pixi, as it works well for every other feature. I always get a great answer here. 

Sort of like this one, basically a variant of standard perlin > terrain map visualization. I need a 200x200 box in a corner of my app with this. How would I go about doing it in pixi, or should I use something else and implement it alongside pixi stuff?

https://www.shadertoy.com/view/ldXGzN

[ivan.popelyshev]

Pixi doesnt have Mesh3d. We even dont have examples for it. However, we have projection plugin that allows you to set up camera.  https://github.com/pixijs/pixi-projection/ However you HAVE to look in its sources to win, there are no tutorials on custom shaders. You have to take its main shader and modify it. There's a problem that it uploads only mat33 and not mat44 like you need, but it can be solved but customizing "render" method of the mesh.

If you know how to make custom shaders for custom pixi meshes like https://pixijs.io/examples/#/mesh-and-shaders/sharing-geometry.js , you can set up position attribute with 3 coords instead of 2, and customize "render" method of the mesh that way it uploads translationMatrix as 4x4 matrix.

If you think that someone will just make for you the demo that does not exist in pixi right now - I'm sorry, but I'm very busy with porting older demoes and plugins from v4 to v5. I'd really like to do it, but it'll affect projects that im helping with other people.

Make sure to share the results if you get through it.

Alternative: use threejs over pixi, you can just call "threeRenderer.render()..." after pixi but do frame it with both "pixiRenderer.reset()" and "threeRenderer.reset()"

[Exca]

If the heightmap is rendered completely in shader (with raymarching from the looks of example url) then it's doable in pixi without having 3d meshes.

You can use one of the following methods at least (I have used these only in v4, but they should work in v5 as well):

- Apply a custom filter to empty container and set its filterArea to match the wanted area (or have a blank sprite that's the correct size) and then just use a filter on it: minimap.filters = [raymarchingFilter]
- Render the minimap separately onto a rendertexture with custom filter / custom shader. Then use that texture as the minimap. This way you could only render it when something updates and it acts as a regular sprite.
- Use a custom shader. In v4 this requires building a plugin for renderer, in v5 I'm not 100% sure how things go as I havent had time to actually use it in any projects yet.

And if you really need actual 3d-rendering (instead of doing all of it in shader) then going for threejs/babylonjs/other 3d engine in combination with pixi would be easier.

[ivan.popelyshev]

Btw, stupid idea: just make your own projection on coords and update huge Graphics with native lines (its drawn through GL.lines)

[Exca]

I made pr to examples on using shadertoy stuff with pixijs using the custom texture approach.