WebGL: INVALID_VALUE: texImage2D: неверный внутренний формат — глубина текстуры в webgl2

const depthTextures = gl => {
  const depthTexture = gl.createTexture();
  const depthTextureSize = 512;
  gl.bindTexture(gl.TEXTURE_2D, depthTexture);
  gl.texImage2D(gl.TEXTURE_2D, // target
  0, // mip level
  gl.DEPTH_COMPONENT, // internal format
  depthTextureSize, // width
  depthTextureSize, // height
  0, // border
  gl.DEPTH_COMPONENT, // format
  gl.UNSIGNED_INT, // type
  null); // data

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  const depthFramebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, depthFramebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, // target
  gl.DEPTH_ATTACHMENT, // attachment point
  gl.TEXTURE_2D, // texture target
  depthTexture, // texture
  0); // mip level
  // create a color texture of the same size as the depth texture
  // see article why this is needed_

  const unusedTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, unusedTexture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, depthTextureSize, depthTextureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // attach it to the framebuffer

  gl.framebufferTexture2D(gl.FRAMEBUFFER, // target
  gl.COLOR_ATTACHMENT0, // attachment point
  gl.TEXTURE_2D, // texture target
  unusedTexture, // texture
  0); // mip level

  return [depthFramebuffer, unusedTexture];
};

я нашел

Примечание. Это расширение доступно только для контекстов WebGL1. В WebGL2, функциональность этого расширения доступна в контексте WebGL2 по умолчанию. Константа в WebGL2 — gl.UNSIGNED_INT_24_8.

Я меняю DEPTH_COMPONENT на RGBA, но до сих пор не подключен фреймбуфер...

В другой комбинации я получаю:

gl.texImage2D(
    gl.TEXTURE_2D,      // target
    0,                  // mip level
    gl.RGBA, // internal format
    depthTextureSize,   // width
    depthTextureSize,   // height
    0,                  // border
    gl.RGBA, // format
    gl.UNSIGNED_INT_24_8,    // type
    null);              // data
 GL_INVALID_OPERATION: Invalid combination of format, type and internalFormat.

 GL_INVALID_OPERATION: Only array uniforms may have count > 1.

Любое предложение ?

Это исходный код, который я хочу внедрить в свой уже существующий проект glmatrix...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
102
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Внутренний формат текстуры глубины не может быть RGBA, он должен быть одним из внутренних форматов размера, например. (GL_DEPTH_COMPONENT24, GL_DEPTH_COMPONENT32F) . Если исходный формат — GL_DEPTH_COMPONENT, исходный тип должен быть либо FLOAT, либо одним из целочисленных типов без знака. Внутренний формат должен быть одной из допустимых комбинаций вместе с форматом и типом (см. OpenGL ES 3.0 glTexImage2D). Таким образом, действительными текстурами для gl.DEPTH_ATTACHMENT являются, например:

gl.texImage2D(
    gl.TEXTURE_2D, 0, 
    gl.GL_DEPTH_COMPONENT24, 
    depthTextureSize, depthTextureSize, 0,
    gl.GL_DEPTH_COMPONENT, gl.GL_UNSIGNED_INT,
    null);
gl.texImage2D(
    gl.TEXTURE_2D, 0, 
    gl.GL_DEPTH_COMPONENT32F, 
    depthTextureSize, depthTextureSize, 0,
    gl.GL_DEPTH_COMPONENT, gl.GL_FLOAT,
    null);

В качестве альтернативы вы можете использовать комбинированную текстуру глубины и трафарета (в данном случае это gl.DEPTH_STENCIL_ATTACHMENT вместо gl.DEPTH_ATTACHMENT), например:

gl.texImage2D(
    gl.TEXTURE_2D, 0, 
    gl.GL_DEPTH24_STENCIL8, 
    depthTextureSize, depthTextureSize, 0,
    gl.GL_DEPTH_STENCIL, gl.GL_UNSIGNED_INT_24_8,
    null);

Я все еще получаю WebGL: INVALID_ENUM: texImage2D: invalid format

Nikola Lukic 28.11.2022 20:23

Я нашел webgl2fundamentals.org/webgl/lessons/… попробую...

Nikola Lukic 28.11.2022 20:45

@NikolaLukic На этой странице используются GL_DEPTH_COMPONENT24, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, как и в первых примерах в моем ответе.

Rabbid76 28.11.2022 20:48

Другие вопросы по теме