javascript - Three.js:使用点从高度图采样

Question

我正在尝试从高度图中采样以定位某些点的 z 坐标，但显然犯了一个基本错误。这是我的场景:

// generate a scene object
var scene = new THREE.Scene();

// generate a camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.001, 10);

// generate a renderer
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
document.body.appendChild(renderer.domElement);

// generate some lights
var ambientLight = new THREE.AmbientLight(0xeeeeee);
scene.add(ambientLight);

// generate controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.zoomSpeed = 0.4;
controls.panSpeed = 0.2;

// render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  controls.update();
};

/**
* Heightmap canvas
**/

function getHeightmap(cb) {
  var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d'),
      image = new Image();
      image.crossOrigin = 'Anonymous';
  image.onload = function(img) {
    ctx.drawImage(this, 0, 0, this.width, this.height);
    cb(ctx.getImageData(0,0, this.height, this.width));
  }
  image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';
}

/**
* Geometry
**/

function addLetters(data) {
  window.data = data;

  var n = 100000, // num observations
      translations = new Float32Array(n*3),
      iter = 0,
      inf = Number.POSITIVE_INFINITY,
      ninf = Number.NEGATIVE_INFINITY
      domains = {x: {min: inf, max: ninf}, y: {min: inf, max: ninf}};

  // set the data domains
  var domains = {x: {min: 0, max: 10,}, y: {min: 0, max: 10,}};

  for (var i=0; i<n; i++) {

    // unscaled coords
    var x = Math.random() * 10,
        y = Math.random() * 10;

    // scale x, y, and z 0:1
    var x = (x-domains.x.min)/(domains.x.max-domains.x.min),
        y = (y-domains.y.min)/(domains.y.max-domains.y.min);

    // validate x and y dims in bounds
    if (x > 1 || x < 0) console.error(x)
    if (y > 1 || y < 0) console.error(y)

    // sample from the heightmap at the point's location
    var row = Math.floor(y * data.height),
        col = Math.floor(x * data.width),
        idx = (row * 4) + (col * 4),
        z = data.data[idx];

    translations[iter++] = x;
    translations[iter++] = y;
    translations[iter++] = (z/255) * 0.1;
  }

  // center the camera
  camera.position.set(0.5, 0.5, 1);
  controls.target.set(0.5, 0.2, -2);
  controls.update();

  var geometry = new THREE.InstancedBufferGeometry();
  geometry.addAttribute('position',
    new THREE.BufferAttribute(new Float32Array([0, 0, 0]), 3, 1));
  geometry.addAttribute('translation',
    new THREE.InstancedBufferAttribute(translations, 3, true, 1) );

  var material = new THREE.RawShaderMaterial({
    vertexShader: document.getElementById('vertex-shader').textContent,
    fragmentShader: document.getElementById('fragment-shader').textContent,
    uniforms: {
      pointScale: {
        type: 'f',
        value: window.devicePixelRatio * window.innerHeight * 0.005,
      }
    }
  });
  material.transparent = true;

  var mesh = new THREE.Points(geometry, material);
  mesh.frustumCulled = false; // prevent mesh clipped on drag
  mesh.rotation.x = -Math.PI * 0.35; // tilt the mesh back away from cam
  scene.add(mesh);
}

/**
* Helpers
**/

// load heightmap data and render
getHeightmap(function(data) {
  addLetters(data);
  render();
})

html,
body {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(#585852, #262726);
}
#letter-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js'></script>
<script src='https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/trackball-controls.min.js'></script>

<script id='vertex-shader' type='x-shader/x-vertex'>

//uniform sampler2D map; // character map
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
uniform vec3 cameraPosition;
uniform float pointScale;

attribute vec3 position;
attribute vec3 translation;

varying float vOpacity;

float scalePointZ(in vec4 pos, in vec3 cameraPosition) {
  float zDelta = pow(pos[2] - cameraPosition[2], 2.0);
  return pointScale / pow(zDelta, 0.5);
}

void main() {

  // project this particle
  vec3 raw = position + translation;
  vec4 world = modelViewMatrix * vec4(raw, 1.0);
  gl_Position = projectionMatrix * world;

  // set the size of each particle
  gl_PointSize = scalePointZ(world, cameraPosition);

  vOpacity = clamp(cameraPosition.z - world.z, 0.0, 1.0);
}
</script>

<script id='fragment-shader' type='x-shader/x-fragment'>
precision mediump float;

varying float vOpacity;

void main() {

  // make point circular
  vec2 coord = gl_PointCoord - vec2(0.5);
  if (length(coord) > 0.5) discard;

  // color the point
  gl_FragColor = vec4(0.7, 0.7, 0.8, vOpacity);
}
</script>

正如您所看到的，高度图设置了每个点的 z 位置，但 z 坐标中存在高度图中不存在的条纹，因此我一定是错误地从中采样。

谁能看出为什么会这样？任何见解都会非常有帮助!

Answer 1

计算二维高度图图像中像素索引的公式为

idx = (row * 4 * data.width) + (col * 4)

而不是

idx = (row * 4) + (col * 4)

---

当图像加载到数据数组时， Canvas 的大小必须适合高度图图像的大小:

function getHeightmap(cb) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        image = new Image();
        image.crossOrigin = 'Anonymous';
    image.onload = function(img) {
        canvas.width = this.width; // <----- set width and height of the canvas
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0, this.width, this.height);
        cb(ctx.getImageData(0,0, this.width, this.height));
    }
    image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';
}

参见示例。我将这些建议应用到您的代码中，并将高度图从蓝色着色为红色:

// generate a scene object
var scene = new THREE.Scene();

// generate a camera
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.001, 10);

// generate a renderer
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio(window.devicePixelRatio); // <3 retina
renderer.setSize(window.innerWidth, window.innerHeight); // canvas size
document.body.appendChild(renderer.domElement);

// generate some lights
var ambientLight = new THREE.AmbientLight(0xeeeeee);
scene.add(ambientLight);

// generate controls
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.zoomSpeed = 0.4;
controls.panSpeed = 0.2;

window.onresize = function() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

// render loop
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  controls.update();
};

/**
* Heightmap canvas
**/

function getHeightmap(cb) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        image = new Image();
        image.crossOrigin = 'Anonymous';
    image.onload = function(img) {
        canvas.width = this.width; // <----- set widht and height of the canvas
        canvas.height = this.height;
        ctx.drawImage(this, 0, 0, this.width, this.height);
        cb(ctx.getImageData(0,0, this.width, this.height));
    }
    image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg';
}

/**
* Geometry
**/

function addLetters(data) {
  window.data = data;

  var n = 100000, // num observations
      translations = new Float32Array(n*3),
      iter = 0,
      inf = Number.POSITIVE_INFINITY,
      ninf = Number.NEGATIVE_INFINITY
      domains = {x: {min: inf, max: ninf}, y: {min: inf, max: ninf}};

  // set the data domains
  var domains = {x: {min: 0, max: 10,}, y: {min: 0, max: 10,}};

  let min_x = 0, max_x = 0, min_y = 0, max_y = 0;
  for (var i=0; i<n; i++) {

    // unscaled coords
    var x = Math.random() * 10,
        y = Math.random() * 10;

    // scale x, y, and z 0:1
    var x = (x-domains.x.min)/(domains.x.max-domains.x.min),
        y = (y-domains.y.min)/(domains.y.max-domains.y.min);

    // validate x and y dims in bounds
    if (x > 1 || x < 0) console.error(x)
    if (y > 1 || y < 0) console.error(y)

    // sample from the heightmap at the point's location
    var row = Math.floor(y * data.height),
        col = Math.floor(x * data.width),
        idx = (row * 4 * data.width) + (col * 4),
        z = data.data[idx];

    translations[iter++] = x;
    translations[iter++] = y;
    translations[iter++] = (z/255) * 0.1;
  }

  // center the camera
  camera.position.set(0.5, 0.5, 1);
  controls.target.set(0.5, 0.2, -2);
  controls.update();

  var geometry = new THREE.InstancedBufferGeometry();
  geometry.addAttribute('position',
    new THREE.BufferAttribute(new Float32Array([0, 0, 0]), 3, 1));
  geometry.addAttribute('translation',
    new THREE.InstancedBufferAttribute(translations, 3, true, 1) );

  var material = new THREE.RawShaderMaterial({
    vertexShader: document.getElementById('vertex-shader').textContent,
    fragmentShader: document.getElementById('fragment-shader').textContent,
    uniforms: {
      pointScale: {
        type: 'f',
        value: window.devicePixelRatio * window.innerHeight * 0.005,
      }
    }
  });
  material.transparent = true;

  var mesh = new THREE.Points(geometry, material);
  mesh.frustumCulled = false; // prevent mesh clipped on drag
  mesh.rotation.x = -Math.PI * 0.35; // tilt the mesh back away from cam
  scene.add(mesh);
}

/**
* Helpers
**/

// load heightmap data and render
getHeightmap(function(data) {
  addLetters(data);
  render();
})

html,
body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: linear-gradient(#585852, #262726); }
#letter-canvas { position: absolute; top: 0; left: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src='https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/trackball-controls.min.js'></script>

<script id='vertex-shader' type='x-shader/x-vertex'>

  //uniform sampler2D map; // character map
  uniform mat4 projectionMatrix;
  uniform mat4 modelViewMatrix;
  uniform vec3 cameraPosition;
  uniform float pointScale;
  
  attribute vec3 position;
  attribute vec3 translation;
  
  varying float vOpacity;
  
  float scalePointZ(in vec4 pos, in vec3 cameraPosition) {
    float zDelta = pow(pos[2] - cameraPosition[2], 2.0);
    return pointScale / pow(zDelta, 0.5);
  }
  
  void main() {
  
    // project this particle
    vec3 raw = position + translation;
    vec4 world = modelViewMatrix * vec4(raw, 1.0);
    gl_Position = projectionMatrix * world;
  
    // set the size of each particle
    gl_PointSize = scalePointZ(world, cameraPosition);
  
    vOpacity = clamp(translation.z*10.0, 0.0, 1.0);
  }
  </script>
  
  <script id='fragment-shader' type='x-shader/x-fragment'>
  precision mediump float;
  
  varying float vOpacity;
  
  void main() {
  
    // make point circular
    vec2 coord = gl_PointCoord - vec2(0.5);
    if (length(coord) > 0.5) discard;
  
    // color the point
    gl_FragColor = vec4(vOpacity, 0.3, 1.0 - vOpacity, vOpacity*0.5+0.5);
  }
  </script>