Распаковка значения глубины RGBA в three.js

Я пытаюсь реализовать простой сборщик графического процессора в three.js, используя MeshDepthMaterial. Мне удалось извлечь значение цвета, используя следующий пример: https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_gpu.html

И, перенеся отсюда функцию unpackRGBAToDepth на javascript для восстановления глубины:

Но значение получается как плавающее между 0,0 и 255,0 (я ожидал, что оно будет между 0,0 и 1,0 или фактической глубиной). У меня следующий вопрос: как я могу использовать это значение, можно ли его перевести на реальную глубину? Если да, то как?


javascript three.js picking
person Avocher    schedule 07.03.2017    source источник
comment
stackoverflow .com / questions / 6652253 / и opengl.org/discussion_boards/showthread.php/   -  person gaitat    schedule 07.03.2017
comment
Моя реализация довольно близка к ответу stackoverflow, хотя я использую буфер логарифмической глубины, поэтому он немного отличается. Я создал пример: jsfiddle.net/1x4Lk8w6/1, где я пытаюсь получить фактическое depth, но в конечном итоге он всегда равен 1, если есть что-то под курсором мыши.   -  person Avocher    schedule 09.03.2017
comment
проверьте эффекты, когда вы меняете дальнюю плоскость вашей камеры. 10000 - это довольно много.   -  person gaitat    schedule 09.03.2017
comment
Значение остается 1 с дальней плоскостью на 100, поэтому я совершенно уверен, что проблема не в расстоянии между плоскостями.   -  person Avocher    schedule 09.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

После того, как я сам столкнулся с этой проблемой (вероятно, следуя одному и тому же пути копирования кода со всех трех.js), я, возможно, нашел проблему.

При чтении из RGBA-текстуры в JS вы получите значения цвета в формате Uint8, тогда как поиск текстуры в GLSL (я подозреваю, что вычисления были скопированы оттуда) возвращают значения rgba-float.

Итак, перед распаковкой вам нужно умножить цветовой вектор на 1 / 255:

// ...

renderer.readRenderTargetPixels(
    depthRenderTarget, x, y, 1, 1, pixelBuffer);

vec4
  .fromArray(pixelBuffer)
  .multiplyScalar(1/255);

var logz = vec4.dot(unPackFactors);

// ...
person Martin Schuhfuß    schedule 18.05.2017