Jump to content

Implementing heightmap shader in pixi


Recommended Posts

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?


Link to comment
Share on other sites

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()"

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...