ShaderLib normalmap is no longer available

Questions
,
1

There is an old example (threejs r58) of a threejs page that I am trying to recreate with a newer version of threejs (r112)

r58 demo
http://meetar.github.io/three.js-displacement-map/three.js-displacement-gui.html

This demo is using THREE.ShaderLib['normalmap'] to create the material that uses a displacement map to generate the map.

Unfortunately, it looks like normalmap isn’t in r112.

I have no idea how to write custom shaders and I wasn’t able to patch in the missing ‘normalmap’ into r112.

How can I making the material look as good as in the r58 example above?
Other r112 materials I tried have a lot more displacement distortion than the r58 example.
Also, r112 materials seem to be making the flat plane visible, even for transparent parts of the displacement map, when the r58 ‘normalmap’ material managed to correctly hide the transparent parts of the displacement map.

Are there any examples of what I’m trying to do in r112? I only found this working r58 example and I don’t know how to reproduce it in r112.

Please help!

2

Try to start with the following live example. You can use built-in materials like MeshNormalMaterial, MeshPhongMaterial or MeshStandardMaterial and just apply the displacement map to the displacementMap property.

https://jsfiddle.net/2jphv7oc/

So the general idea is to use something like:

var material = new THREE.MeshNormalMaterial( {
	displacementMap: displacementMap,
	displacementScale: 0.25,
	wireframe: true,
} );
3

First, thank you so much for responding, and so quickly!
I know how much time and effort you put into answering questions in the community and I appreciate it a lot.

Using MeshNormalMaterial works, although there are some issues compared with the r58 shader.

r58 screenshot:

r58_displacementMap
r58_displacementMap1812×828 195 KB

r112 screenshot:

r112_displacementMap
r112_displacementMap1828×858 114 KB

The displacement map image used in both cases:

eskimo
eskimo1093×978 42.5 KB

There are two issues that I’m trying to solve

  1. For r58, but not r112, the background plane is visible where the displacement map image is transparent. I would like transparent parts of the image to have ‘no-geometry’ or ‘hidden’ geometry
  2. For r58, but not r112, additional noise is hidden. For r112, there are some spikey spikes that don’t appear for the r58 version

There is one ‘nice-to-have’

  1. For r58, there seems to be a lighter shading for higher peaks in the displacement geometry, which makes it slightly easier to visually understand the shape of the geometry. I’m assuming that this has been written into the glsl shader code

Are there ways to configure the r112 version to look as “crisp” as the r58 version in these two to three key ways, mentioned above? I’m wondering if there is a way, without having to write any custom glsl shader code.

Let me know if you would like to understand what I’m trying to do, over-all.

Thanks again for your initial response. You rock!

4

You shared a JPG which has no transparency. Can you please share a PNG?

5

My bad. Here is the PNG. I uploaded it to pinterest.

Why it’s a link instead of uploading here:
For some reason, when I try to upload here, it’s converted to JPEG. The image was generated with the free drawing software, Krita, so I wonder if there is some data exported with it that makes this forum want to change its type:

6

Check out this version: https://jsfiddle.net/51yogpv8/1/

The idea is to use MeshPhongMaterial so you can apply the displacement map as an alpha map. This allows you via alphaTest to discard fragments with certain alpha values. By improving the texture filter you can avoid the mentioned spikes. Just use THREE.NearestFilter for Texture.minFilter and Texture.magFilter.

7

This is brilliant! This is exactly what I am after, plus the added bonus of seeing how to integrate the zoom, orbit controls, and shift click for strafing. Excellent. This knocks off a few cards from my trello board.

Cheers!