У меня проблемы с рендерингом объекта с использованием техники рендеринга RTC - PullRequest
Новая
       27

У меня проблемы с рендерингом объекта с использованием техники рендеринга RTC

0 голосов
/ 20 декабря 2018

Я пытаюсь визуализировать простую плоскость в ТРИ, используя технику относительно центра.Когда вы начинаете работать с действительно большими числами в графическом процессоре, такими как 6378137, радиус Земли, объекты начинают дрожать из-за ошибок точности вычисления с плавающей запятой в графическом процессоре.Один из способов исправить это - визуализировать что-то относительно центра объекта.

Основная идея:

  1. . Убедитесь, что ваш буфер положения содержит вершины относительно центра геометрии, что ThreeJS делает по умолчанию.ех.для точки 0, 0, 0

  2. преобразуйте координаты центра в центральный глаз, умножив центр на матрицу вида модели, используя процессор / двойную точность.

отл.

(mv00, mv01, mv02, centerX,

mv10, mv11, mv12, centerY,

mv20, mv21, mv22, centerZ,

mv30, mv31, mv32, mv33)

используйте эту матрицу в своем шейдере, чтобы избежать любого умножения с двойной точностью (сохраняет значения в матрице маленькими и удаляет дрожание для большинства объектов)

Я знаю, что моя матрица представления модели верна, потому что я проверилиспользуя это в шейдере без RTC и просто переводя мои координаты х на 6378137. 

  <script id="vertex_shader" type="x-shader/x-vertex">
uniform mat4 mv;
void main() {
  gl_Position = projectionMatrix * mv * vec4(position, 1.0);
}


  <script id="fragment_shader" type="x-shader/x-fragment">
void main() {
  gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
}


var geometry = new THREE.PlaneBufferGeometry( 50, 50 );
let material = new THREE.ShaderMaterial( {
  side:THREE.DoubleSide,
  wireframe:true,
  vertexShader: document.getElementById('vertex_shader').textContent,
  fragmentShader: document.getElementById('fragment_shader').textContent
})
material.uniforms.mv = {
  type:'m4',
  value: new THREE.Matrix4()
}
var plane = new THREE.Mesh( geometry, material );
plane.onBeforeRender = (renderer, scene, camera, geometry, material) => {
  let mv = new THREE.Matrix4();
  //calculate modelview matrix w/ view x modelmatrix
  mv = mv.multiplyMatrices(camera.matrixWorldInverse, plane.matrixWorld);
  let center = new THREE.Vector4(6378137, 0.0, 0.0, 1.0);
  //multiply mv by center
  center.applyMatrix4(mv);
  let newMV = new THREE.Matrix4().set(mv.elements[0], mv.elements[4], mv.elements[8], center.x,
                              mv.elements[1], mv.elements[5], mv.elements[9], center.y,
                              mv.elements[2], mv.elements[6], mv.elements[10], center.z,
                              mv.elements[3], mv.elements[7], mv.elements[11], mv.elements[15]);

  material.uniforms.mv.value = newMV;
}
scene.add( plane );

По некоторым причинам это делаетсцена с плоскостью, обращенной не в ту сторону, поэтому она выглядит как прямая линия.

* Ошибка была в моем методе set () для matrix4, мне просто нужно было прочитать значения матрицы просмотра модели в основном формате столбца,Я обновил код, так что теперь он правильный.

...