问题[opengl](coding)

以下程序在使用底层 OpenGL 处理时正确渲染了带纹理的四边形。纹理在此处

PShape s;
void setup() {
  size(800, 800, P3D);
  PImage ringtexture = loadImage("saturnringcolor.jpg");
  textureMode(NORMAL);
  fill(150, 0, 0);
  s = createShape();
  s.beginShape();
  s.texture(ringtexture);
  final float INSET = 10;
  final float x1 = INSET, x2 = width - INSET;
  final float y1 = INSET, y2 = height - INSET;
  s.vertex(x1+50, y1, 0, 0);
  s.vertex(x2-50, y1, 1, 0);
  s.vertex(x2, y2, 1, 1);
  s.vertex(x1, y2, 0, 1);
  s.endShape();
  background(0);
  shape(s);
}

当我创建一个包含多个四边形的环并尝试应用纹理时，它只是一种米色。

void setup() {
  size(800,800,P3D);
  PImage ringtexture = loadImage("saturnringcolor.jpg");
  PShape s = createShape();
  s.beginShape(QUADS);
  s.noStroke();

  float r2 = 250, r = 200;
  float nexta;
  s.texture(ringtexture);
  for (float a = 0; a < PI*2; a = nexta) {
    nexta = a + PI / 30;
    // Define the 4 corners of the quad
    s.vertex(r2 * cos(a), r2 * sin(a), 0, 0);
    s.vertex(r2 * cos(nexta), r2 * sin(nexta), 1, 0);
    s.vertex(r * cos(nexta), r * sin(nexta), 1, 1);
    s.vertex(r * cos(a), r * sin(a), 0, 1);
  }
  s.endShape();
  background(0);
  translate(width/2, height/2);
  shape(s);
}

除此之外，还有一张单独的透明图像，因为土星环有间隙。我想我必须将这两幅图像合并起来，并以支持它的格式获取 alpha 通道。那么将 jpeg 更改为 png 吗？

我正在使用 PNGDecoder 解码高度图 png。然而，当我打印控制台中返回的值时，我发现一些 rgb 值返回为负数

-128, -128, -128, -1
-128, -128, -128, -1
-128, -128, -128, -1
-124, -124, -124, -1
-119, -119, -119, -1
-118, -118, -118, -1

我用来解码然后读取的代码如下

public static ByteBuffer decodeImage(String path) throws IOException {
        InputStream stream = new FileInputStream(path);
        PNGDecoder decoder = new PNGDecoder(stream);
        ByteBuffer decodedImageData = ByteBuffer.allocateDirect(4 * decoder.getWidth() * decoder.getHeight());
        decoder.decodeFlipped(decodedImageData, decoder.getWidth() * 4, PNGDecoder.Format.RGBA);
        decodedImageData.flip();
        return decodedImageData;
    }

private void applyHeightMap (String heightMapPath) throws IOException {
        float vertices[] = plane.getVertices();
        ByteBuffer buffer = Texture.decodeImage(heightMapPath);
        for (int i = 0; i < 2624 * 1756; i++) {
            byte r = buffer.get();
            byte g = buffer.get();
            byte b = buffer.get();
            byte a = buffer.get();
            if(r < 0 || b < 0 || g < 0) {
                System.out.println(r + ", " + g + ", " + b+", "+a);
            }
        }
    }

不确定为什么负值很少，以及为什么 alpha 通道读为 -1

我使用的图像是https://learnopengl.com/img/guest/2021/tessellation/height_map/iceland_heightmap.png

错误：

-- Detecting CXX compile features
-- Detecting CXX compile features - done
-- Performing Test CMAKE_HAVE_LIBC_PTHREAD
-- Performing Test CMAKE_HAVE_LIBC_PTHREAD - Success
-- Found Threads: TRUE  
CMake Error at CMakeLists.txt:13 (find_package):
  Could not find a package configuration file provided by "freetype" with any
  of the following names:

    freetypeConfig.cmake
    freetype-config.cmake

  Add the installation prefix of "freetype" to CMAKE_PREFIX_PATH or set
  "freetype_DIR" to a directory containing one of the above files.  If
  "freetype" provides a separate development package or SDK, be sure it has
  been installed.


-- Configuring incomplete, errors occurred!

这是我的 CMakeLists.txt：

cmake_minimum_required(VERSION 3.19)

project(ogle VERSION 1.0.0
            DESCRIPTION "Our first project" 
            LANGUAGES CXX)

set(CXX_STANDARD 20)
set(CXX_STANDARD true)
set(INCLUDE_DIRECTORIES ${PROJECT_SOURCE_DIR}/include)

find_package(glfw3 CONFIG REQUIRED)
find_package(glm CONFIG REQUIRED)
find_package(freetype CONFIG REQUIRED)
find_package(assimp CONFIG required)

add_executable(ogle /src/*.cpp ./*.cpp /src/*.c)

target_link_libraries(ogle PUBLIC glfw3::glfw3 glm::glm freetype::freetype PRIVATE assimp::assimp)

如何解决这个问题？ Freetype 与所有其他内容位于同一目录中。这是图书馆的已知问题吗？

在 OpenGL 顶点着色器中，唯一被视为动态统一的内置输入是gl_DrawID。我可以猜测，不进行动态统一的决定gl_InstanceID是为了允许实现将来自不同实例的顶点分组到单个顶点着色器扭曲（/波前/其他）中。然而，众所周知，每个实例具有少量顶点的实例化绘制对性能不利，因为没有主要的桌面 GPU 供应商实际上将多个实例分组到单个扭曲中（这导致每个顶点很少的许多实例的扭曲占用率较低） ）。这似乎意味着在实践中，gl_InstanceID很可能会动态统一。不制作的理由是什么gl_InstanceID（gl_BaseInstance以及gl_BaseVertex) 动态统一表达式？是否有任何 GPU 可以实际对每个波前的多个实例进行分组，或者在编写规范时是否存在？

我有一个自定义帧缓冲区，它有深度和模板附件：

glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_TEXTURE_2D, texId, 0);

以下操作是位块传输深度和模板还是仅深度？

glBindFramebuffer(GL_READ_FRAMEBUFFER, fboId);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);
glBlitFramebuffer(0, 0, w, h, 0, 0, w, h, GL_DEPTH_BUFFER_BIT, GL_NEAREST);

当我在上面的操作中替换GL_DEPTH_BUFFER_BIT为时会发生什么GL_STENCIL_BUFFER_BIT？

我有一些每帧都会更改的顶点数据，但因为我提前不知道顶点的（最大）数量，所以我必须使用glBufferData每一帧，而不是使用glBufferSubData. 我只在初始化期间分配 VAO/VBO 本身一次。

我的问题是：鉴于我正在使用glBufferData每一帧（因此，我猜，每帧重新分配新的缓冲区），我应该使用GL_DYNAMIC_DRAWorGL_STATIC_DRAW吗？

我的直觉是，GL_STATIC_DRAW因为我永远不会写入现有的缓冲区内存，但我想知道是否会影响同一 VBO 上的后续（而不是GL_DYNAMIC_DRAW）调用中的任何内容。glBufferData glBufferSubData

即使问题中的示例是 WebGL，也将其标记为 OpenGL，因为 OpenGL 领域专家应该能够回答这个问题。这里有一个 OpenGL 存储库

我正在尝试以与采样器基于纹理坐标导数相同的方式计算纹理 mip 级别。

我在这里和其他地方看到了很多答案。例如

• 如何访问 GLSL 片段着色器纹理中的自动 mipmap 级别？
• OpenGL的mipmap级别计算的推导？
• 使用 dFdx/dFdy 计算 Mipmap 级别

所有这 3 个都说计算是

   vec2  dx_vtc        = dFdx(texture_coordinate);
   vec2  dy_vtc        = dFdy(texture_coordinate);
   float delta_max_sqr = max(dot(dx_vtc, dx_vtc), dot(dy_vtc, dy_vtc));

   mip_level = 0.5 * log2(delta_max_sqr);

鉴于此，我写了一个测试。在测试中我有 2 个着色器。

• 第一个着色器使用纹理坐标和采样纹理来绘制四边形。纹理有 7 个 mip 级别，每个级别都是不同的纯色。当我增加纹理坐标的范围时，我应该看到不同的 mip 被选择（使用 NEAREST_MIPMAP_NEAREST）。这有效?

• 第二个着色器通过使用上面的公式计算 mip 级别，然后使用该 mip 级别从表中选择颜色来绘制四边形，表中的颜色与纹理中的颜色相匹配。这不起作用?。我所看到的都是红色（第一种颜色）。

这是第二个着色器

#version 300 es
precision highp float;

in vec2 v_texCoord;

out vec4 outColor;

const vec4 colors[8] = vec4[8](
  vec4(  1,   0,   0, 1), // 0: red
  vec4(  1,   1,   0, 1), // 1: yellow
  vec4(  0,   1,   0, 1), // 2: green
  vec4(  0,   1,   1, 1), // 3: cyan
  vec4(  0,   0,   1, 1), // 4: blue
  vec4(  1,   0,   1, 1), // 5: magenta
  vec4(0.5, 0.5, 0.5, 1), // 6: gray
  vec4(  1,   1,   1, 1));// 7: white

void main() {
  vec2 dx = dFdx(v_texCoord);
  vec2 dy = dFdy(v_texCoord);
  float deltaMaxSq = max(dot(dx, dx), dot(dy, dy));
  float mipLevel = 0.5 * log2(deltaMaxSq);
  
  outColor = colors[int(mipLevel)];
}

也许我只是有一个错字，但我尝试了各种调试方法

• 我尝试可视化第二个着色器中的纹理坐标。他们显然是正确的
• 我尝试确保索引颜色有效。这就是作品。
• 我尝试通过从着色器写入来可视化 mip 级别mipLevel / 7.0，因此当 mip 级别达到 7 时，四边形应该变得更亮。这是行不通的。

我究竟做错了什么？

html, body {
  margin: 0;
  font-family: monospace;
  height: 100%;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}

<canvas id="c"></canvas>

<script type="module">
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const vs = `#version 300 es
uniform mat4 u_worldViewProjection;
uniform mat3 u_texMat;

out vec2 v_texCoord;

const vec2 position[6] = vec2[6](
  vec2(0, 0),
  vec2(1, 0),
  vec2(0, 1),
  vec2(0, 1),
  vec2(1, 0),
  vec2(1, 1));

void main() {
  vec2 p = position[gl_VertexID];
  v_texCoord = (u_texMat * vec3(p, 1)).xy;
  gl_Position = u_worldViewProjection * vec4(p, 0, 1);
}
`;
const fsTex = `#version 300 es
precision highp float;

in vec2 v_texCoord;

uniform sampler2D u_tex;

out vec4 outColor;

void main() {
  outColor = texture(u_tex, v_texCoord);
}
`;
const fsMipLevel = `#version 300 es
precision highp float;

in vec2 v_texCoord;

out vec4 outColor;

const vec4 colors[8] = vec4[8](
  vec4(  1,   0,   0, 1), // 0: red
  vec4(  1,   1,   0, 1), // 1: yellow
  vec4(  0,   1,   0, 1), // 2: green
  vec4(  0,   1,   1, 1), // 3: cyan
  vec4(  0,   0,   1, 1), // 4: blue
  vec4(  1,   0,   1, 1), // 5: magenta
  vec4(0.5, 0.5, 0.5, 1), // 6: gray
  vec4(  1,   1,   1, 1));// 7: white

void main() {
  vec2 dx = dFdx(v_texCoord);
  vec2 dy = dFdy(v_texCoord);
  float deltaMaxSq = max(dot(dx, dx), dot(dy, dy));
  float mipLevel = 0.5 * log2(deltaMaxSq);
  
  // mipLevel = mod(gl_FragCoord.x / 16.0, 8.0);  // comment in to test we can use the colors

  outColor = colors[int(mipLevel)];

  // outColor = vec4(mipLevel / 7.0, 0, 0, 1);  // comment in to visualize another way
  // outColor = vec4(fract(v_texCoord), 0, 1);  // comment in to visualize texcoord
}
`;

const colors = [
  '#F00',
  '#FF0',
  '#0F0',
  '#0FF',
  '#00F',
  '#F0F',
  '#888',
  '#FFF',
];


function createMips(colors) {
  const ctx = document.createElement('canvas').getContext('2d');
  const numMips = colors.length;
  return colors.map((color, i) => {
    const size = 2 ** (numMips - i - 1);
    ctx.canvas.width = size;
    ctx.canvas.height = size;
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, size, size);
    return ctx.getImageData(0, 0, size, size);
  });
}

function main() {
  const m4 = twgl.m4;
  const gl = document.getElementById("c").getContext("webgl2");
  if (!gl) {
    alert("Sorry, this example requires WebGL 2.0");  // eslint-disable-line
    return;
  }

  const texProgramInfo = twgl.createProgramInfo(gl, [vs, fsTex]);
  const mipProgramInfo = twgl.createProgramInfo(gl, [vs, fsMipLevel]);

  const texImage = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texImage);
  const data = createMips(colors);
  data.forEach(({width, height, data}, level) => {
    gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  });
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);

  const lerp = (a, b, t) => a + (b - a) * t;

  function render(time) {
    time *= 0.001;
    twgl.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0.3, 0.3, 0.3, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const uniforms = {};

    const s = lerp(1, 128, Math.sin(time) * 0.5 + 0.5);
    uniforms.u_texMat = [
      s, 0, 0,
      0, s, 0,
      0, 0, 1,
    ];
    uniforms.u_worldViewProjection = m4.translation([-1.01, -0.5, 0]);

    gl.useProgram(texProgramInfo.program);
    twgl.setUniforms(texProgramInfo, uniforms);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    uniforms.u_worldViewProjection = m4.translation([0.01, -0.5, 0]);

    gl.useProgram(mipProgramInfo.program);
    twgl.setUniforms(mipProgramInfo, uniforms);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();
</script>