JavaFX Material 的凹凸和规范贴图

Question

当 JavaFX8 代码加载颜色、凹凸和规范贴图时，颜色和规范按预期工作，但凹凸贴图会产生奇怪的效果。这三个都是地球的墨卡托 map 。一般情况下，凹凸贴图不会添加3d效果。凹凸贴图只会导致喜马拉雅山和安第斯山在地球的亮面显示为带有 Shiny 边框的黑色区域，而在颜色贴图上显示的阴影面则显示。我做错了什么？

Image diffMap = null;
Image bumpMap = null;
Image specMap = null;
diffMap = new Image(MoleculeSampleApp.class.getResource("Color Map1.jpg").toExternalForm());
bumpMap = new Image(MoleculeSampleApp.class.getResource("Bump1.jpg").toExternalForm());
specMap = new Image(MoleculeSampleApp.class.getResource("Spec Mask1.png").toExternalForm());
final PhongMaterial earthMaterial = new PhongMaterial(Color.WHITE, diffMap, specMap, bumpMap, null);
earthMaterial.setDiffuseColor(Color.WHITE);
earthMaterial.setSpecularColor(Color.WHITE);

作为 3d 新手，我的第一个想法是应该有某种将凹凸贴图的像素颜色值缩放为高程，而我缺少它。

Answer 1

JavaFX 的凹凸贴图是法线贴图，而不是高度贴图，有关更多信息，请参阅:normal map and height map info .
这是您可以尝试的示例。

map 的图像非常大，因此在您的场景显示之前下载它们可能需要一些时间。
我用于图像的来源是 => Bored? Then Create a Planet (现在是死链接)。

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.Image;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.*;
import javafx.scene.shape.Sphere;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;

public class EarthViewer extends Application {

  private static final double EARTH_RADIUS  = 400;
  private static final double VIEWPORT_SIZE = 800;
  private static final double ROTATE_SECS   = 30;

  private static final double MAP_WIDTH  = 4096;
  private static final double MAP_HEIGHT = 2048;

  private static final String DIFFUSE_MAP =
      "https://imgur.com/vrNnXIs.jpeg";
  private static final String NORMAL_MAP =
      "https://imgur.com/5T2oAuk.jpeg";
  private static final String SPECULAR_MAP =
      "https://imgur.com/GV11WNV.jpeg";

  private Group buildScene() {
    Sphere earth = new Sphere(EARTH_RADIUS);
    earth.setTranslateX(VIEWPORT_SIZE / 2d);
    earth.setTranslateY(VIEWPORT_SIZE / 2d);

    PhongMaterial earthMaterial = new PhongMaterial();
    earthMaterial.setDiffuseMap(
      new Image(
        DIFFUSE_MAP,
        MAP_WIDTH,
        MAP_HEIGHT,
        true,
        true
      )
    );
    earthMaterial.setBumpMap(
      new Image(
        NORMAL_MAP,
        MAP_WIDTH,
        MAP_HEIGHT,
        true,
        true
      )
    );
    earthMaterial.setSpecularMap(
      new Image(
        SPECULAR_MAP,
        MAP_WIDTH,
        MAP_HEIGHT,
        true,
        true
      )
    );

    earth.setMaterial(
        earthMaterial
    );

    return new Group(earth);
  }

  @Override
  public void start(Stage stage) {
    Group group = buildScene();

    Scene scene = new Scene(
      new StackPane(group),
      VIEWPORT_SIZE, VIEWPORT_SIZE,
      true,
      SceneAntialiasing.BALANCED
    );

    scene.setFill(Color.rgb(10, 10, 40));

    scene.setCamera(new PerspectiveCamera());

    stage.setScene(scene);
    stage.show();

    stage.setFullScreen(true);

    rotateAroundYAxis(group).play();
  }

  private RotateTransition rotateAroundYAxis(Node node) {
    RotateTransition rotate = new RotateTransition(
      Duration.seconds(ROTATE_SECS), 
      node
    );
    rotate.setAxis(Rotate.Y_AXIS);
    rotate.setFromAngle(360);
    rotate.setToAngle(0);
    rotate.setInterpolator(Interpolator.LINEAR);
    rotate.setCycleCount(RotateTransition.INDEFINITE);

    return rotate;
  }

  public static void main(String[] args) {
    launch(args);
  }
}

Normal? Why????

JavaDoc 声明 PhongMaterial bumpMapProperty指出:

The bump map of this PhongMaterial, which is a normal map stored as a RGB Image.

使用法线贴图而不是高度贴图 because :

[normal maps] are much more accurate, as rather than only simulating the pixelbeing away from the face along a line, they can simulate that pixelbeing moved at any direction, in an arbitrary way.

wikipedia bump mapping 中提供了法线贴图和高度贴图的简要说明。文章。
示例图像
2021 年 7 月更新
不幸的是，来自“无聊？然后创造一个星球”的图像源不再可用，所以我更新了链接到不同图像的答案(希望这些图像保持在线)。因为它链接到不同的图像，所以地球的最终渲染看起来与上面的示例图像有点不同，但它是相似的。渲染的代码基本上没有什么不同，尽管图像发生了变化。
Diffuse map

Normal map

Specular map