WebGL-Как получить данные нормалей текстуры для постобработки обнаружения краев - PullRequest
Новая
       100

WebGL-Как получить данные нормалей текстуры для постобработки обнаружения краев

0 голосов
/ 10 июля 2020

Когда я искал метод определения границ WebGL,
я увидел, что у Unity есть решение. Используйте Camera-DepthNormalTexture.shader для записи данных глубины и нормалей в текстуру.
Я воспользуюсь оператором Робертса, чтобы вычислить, являются ли полученные данные ребром,
но WebGL я могу получить depthTexture только в фреймбуфере,
не могу получить depthNormalTexture как в единстве,
Я попытался написать тест в WebGL,
использует только текстуру глубины, полученную в буфере кадра,
, но обнаруживает только края с огромной разницей глубины,
и Невозможно обнаружить все края цветовой модели solid.
Я хочу знать, есть ли другие способы решить эту проблему.

(solid цвет) Тестовый рендеринг WebGL pi c

image

Я заранее установил нормальные данные вершины

Используя шейдер, указанный в ответе gman, получить текстуру данных нормалей в фреймбуфере в новом рендеринге. Результат, кажется, рисует края, но глубина кажется неправильной 

framebuffer = gl.createFramebuffer();
// rgb texture
gl.bindTexture(state.gl.TEXTURE_2D, texture);
// ... texImage2D  texParameteri set up
// depth texture
gl.bindTexture(state.gl.TEXTURE_2D, depthTexture);
// ... texImage2D  texParameteri set up


// Create a with normals data FBO
normalFramebuffer = gl.createFramebuffer();
gl.bindTexture(gl.TEXTURE_2D, normalTexture);
// ... texImage2D  texParameteri set up


gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 obj.render('rgbaData shader');
gl.bindFramebuffer(gl.FRAMEBUFFER, normalFramebuffer);
 obj.render('normalsData shader');
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.useProgram('my edge detection shader');
gl.uniform1i(texture, 0);
gl.uniform1i(depthTexture, 1);
gl.uniform1i(normalTexture, 2);

мой шейдер обнаружения краев 

uniform sampler2D texture;
uniform sampler2D depthTexture;
uniform sampler2D normalTexture;

новый край рендеринга pi c с глубиной и нормалями данные

image

Ответы [ 2 ]

0 голосов
/ 10 июля 2020

Unity генерирует текстуру с нормалями даже в WebGL, так что это не предел WebGL. Если вам нужна текстура с нормалями, тогда визуализируйте текстуру с нормалями.

Предполагая, что у вас есть геометрические данные с нормалями, вы должны использовать вершинный шейдер, например 

attribute vec4 position;
attribute vec3 normal;

uniform mat4 projection;
uniform mat4 modelView;
uniform mat4 normalMatrix;

varying vec3 v_normal;

void main() {
  gl_Position = projection * modelView * position;
  v_normal = mat3(normalMatrix) * normal;
}

и фрагментный шейдер например, 

precision mediump float;
varying vec3 v_normal;
void main() {
  gl_FragColor = vec4(normalize(v_normal) * 0.5 + 0.5, gl_FragCoord.z);
}

И рендерит ваши формы в текстуру через фреймбуфер . Затем у вас есть текстура с нормалями и глубиной в ней, которую вы можете передать шейдеру проверки краев

Подробнее о шейдерах с нормалями можно прочитать здесь

0 голосов
/ 10 июля 2020

"WebGL. Вы можете получить depthTexture только во фреймбуфере, вы не можете получить depthNormalTexture [...]"

Текстуры глубины поддерживаются в Поддерживается WebGL 2.0 или расширение WEBGL_depth_texture . Оцените, поддерживается ли расширение: 

if (!gl.getExtension("WEBGL_depth_texture"))
    alert('"WEBGL_depth_texture" not supported');

См. Далее WebGL 1.0 5.14.14 Обнаружение и включение расширений

...