Threejs make a displaced mesh (terrain model)

Question

So I have around 59k data points that I'm visualizing. Currently I'm making them into a texture, and then applying them to a plane geometry.

Now the issue is that I need to show a heightmap, each datapoint has a height value, and I need to apply that to the mesh.

How is the best way to go about doing this? Previously I was displaying this data using a ton of cube geometries, which I could then change the height on. But this made performance suffer, so it wasn't really an option.

Official example of displacement Shader: http://threejs.org/examples/#webgl_materials_normaldisplacementmap. In r72 this will be built in the MeshPhongMaterial. — Falk Thiele, Sep 08 '15 at 08:11

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Displacement shader is needed to increase the performance by pushing the calculation to GPU.

This is a good example of using displacement shader.

This is an example of heightmap using displacement shader

edited May 23 '17 at 11:44

Community

1
1

answered Sep 08 '15 at 08:14

wizztjh

6,979
6
58
92

Just to clarify, do I need to subdivide the mesh to get more vertices to use with the shader, or does the shader work vertex-independent? (Sorry, I'm still new to vertex shaders) – Keith M Sep 08 '15 at 15:55
did you see my comment? ^ – Keith M Sep 10 '15 at 05:16
yes, you need to subdivide it. It is mention in the example. "This sets up a scene, with a wireframe sphere of radius 20, made of 200x200 segments, in the center, and a camera looking at it, flat, from 100 units away. Try changing the radius or the segments in the sphere, or moving the camera or the mesh somewhere else." (please up vote the answer) – wizztjh Sep 10 '15 at 05:53
Thanks. I'll try applying it to my project tomorrow, and if it works for what I'm doing I'll mark the answer as correct. – Keith M Sep 10 '15 at 06:15

score 0 · Answer 2 · answered Sep 11 '15 at 16:09

Previously I was displaying this data using a ton of cube geometries, which I could then change the height on. But this made performance suffer, so it wasn't really an option.

Try to use THREE.BufferGeometry and index buffer. Here is a sample of index buffer usage(it's not three.js) https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL

Check this sample http://alteredqualia.com/three/examples/webgl_cubes.html

Threejs make a displaced mesh (terrain model)

2 Answers2

Linked