标签: webgl2

我正在尝试使用WebGL 2.0在浏览器中渲染3D医疗数据.

WebGL 2.0现在支持AFAIK 3D纹理.

texImage3D()是一个公认的函数调用.

我正在编写一个片段着色器并声明一个统一的采样器:

uniform sampler3D samp;

当我在Firefox上运行它时,我收到一个错误:

未捕获异常:着色器编译错误:错误:0:19:'sampler3D':非法使用保留字错误:0:19:'sampler3D':语法错误

当我使用sampler2D时工作得很好(虽然不能解决我的目的).

请问有谁可以指出我在这里做错了什么？

sampler3D还不支持吗？但在这种情况下,如何使用texImage3D()加载任何纹理？

上面的调用有什么限制吗？WebGL 1.0 和 WebGL 2.0 的限制不同吗？如果没有限制，是否有理由将其与纹理用于输入数据？

谢谢

我目前正在按照本指南将我的场景渲染为纹理以生成深度/阴影贴图：http : //www.opengl-tutorial.org/intermediate-tutorials/tutorial-14-render-to-texture/

该指南是用 C++ 编写的。我正在将它转换为 WebGL - JavaScript，到目前为止已经成功，但不幸的是在 Chrome 中遇到了这个错误：

WebGL：INVALID_OPERATION：texImage2D：ArrayBufferView 对于请求来说不够大

这是一个与以下相关的错误：

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 768, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));

1024～768的宽高设置为1时，不会产生错误。

在指南中，它使用以下内容：

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 1024, 768, 0, GL_RGB, GL_UNSIGNED_BYTE, 0);

这里有一个类似问题的很好答案：Error when created textures in WebGL with the RGB format这让我相信，由于在调用方法时纹理不存在，它不能大于 1 像素，但我不确定这是否正确？编辑：不是这个问题的重复有两个原因。1，如果它是重复的，我就不会问这个问题 2，答案解释了为什么它不是重复的。

指南中的其余转换代码我将在下面转储：

    // shadow test
    this.frameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);

    this.texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, this.texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 768, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, …

我想通过使用统一缓冲区对象和实例渲染来绘制带有动画的多个对象。

我已经用 for 循环实现了这一点，但我想一次性渲染它们。

这是我的代码，当单击鼠标时，它使用 for 循环渲染多个对象。

我正在使用四个外部库，它们是 webgl-utils.js、webgl-debug.js、cuon-utils.js、cuon-matrix.js。这些可以在这里找到。

"use strict";
const loc_aPosition = 1;
const VSHADER_SOURCE =
`#version 300 es
layout(location=${loc_aPosition}) in vec4 aPosition;
uniform mat4 uRotMatrix;
uniform mat4 uScaleMatrix;
uniform vec2 uOffSet;
void main() {
    gl_Position = aPosition * uScaleMatrix * uRotMatrix + vec4(uOffSet, 0, 0); 
}`;

const FSHADER_SOURCE =
`#version 300 es
precision mediump float;
out vec4 fColor;
uniform vec4 uColor;
void main() {
    fColor = uColor;
}`;


function main() {
  // Retrieve <canvas> element …

我创建了一个简单的 webGL 脚本，它根据 (x,y) 像素位置应用像素颜色

我得到什么：

这就是我所做的：

#ifdef GL_ES
precision mediump float;
#endif

uniform float width;
uniform float height;
uniform float time;

void main() {
  vec2 u_resolution = vec2(width, height);
    vec2 st = gl_FragCoord.xy / u_resolution;
    gl_FragColor = vec4(st.x, st.y, 0.5, 1.0);
}

Codepen：你好 WebGL

我正在尝试将其转换为 webGL2，但我不知道如何获取当前像素位置。

这是我尝试过的：

#version 300 es
#ifdef GL_ES
precision mediump float;
#endif

uniform float width;
uniform float height;
uniform float time;
out vec4 color;

void main() {
  vec2 u_resolution = vec2(width, height);
    vec2 st = …

好吧，我会尽可能保持简单。我想在着色器程序之间传递数据。我目前正在使用 readPixels 来执行此操作，但我觉得它可能会减慢操作速度，并且我正在探索更快的选项。

我的程序的作用：

1. program1 将渲染到画布上。
2. program2 在它的着色器中做了一些精彩的操作，我想将这些操作传递给program1。

我的问题：

1. 是否可以使用program2中的vbo并将其传递给program1进行渲染？从我下面给出的链接中听起来，您无法跨上下文共享数据，这意味着一个缓冲区中的数据不能用于另一个缓冲区。但也许我错过了一些东西。
2. 我相信本文中提到的方法可以通过渲染到画布然后使用 texImage2D 更新program1（将帧缓冲区数据从一个 WebGLRenderingContext 复制到另一个？）来完成我正在寻找的任务。我对么？如果是这样，这会比使用 readPixels 更快吗？（我问是因为如果使用 texImage2D 大致相同我不会打扰）。

预先感谢任何回答的人。

OS X - 铬。

我是 OpenGL / emscripten 的新手，并试图设置一个使用 WebGL 2、OpenGL 3+ 并通过 emscripten 构建到 webassembly 的简单脚本。

编译 WebGL 1 / OpenGL 2 没有问题。并将画布设置为 WebGL 2 / OpenGL 3 似乎也有效。当我检查正在运行的当前版本时，它会通知我关于 OpenGL 3.0 和 WebGL2（但也许它没有使用它......？）。

但是，emcc 仍然尖叫着关于着色器的错误，我给出的着色器仅与 3.0+ 版本兼容，从而暗示我正在运行 openGL 1/2 ？

通过 emscripten 设置新的上下文

EmscriptenWebGLContextAttributes ctxAttrs;
emscripten_webgl_init_context_attributes(&ctxAttrs);
ctxAttrs.alpha = GL_TRUE;
ctxAttrs.depth = GL_TRUE;
ctxAttrs.stencil = GL_TRUE;
ctxAttrs.antialias = 4;
ctxAttrs.premultipliedAlpha = false;
ctxAttrs.preserveDrawingBuffer = false;
ctxAttrs.minorVersion = 0;
ctxAttrs.majorVersion = 2; // WebGL2

this->context = emscripten_webgl_create_context(0, &ctxAttrs);
assert(this->context > 0); …

我正在尝试在 WebGL2 中使用浮点纹理。我像这样初始化纹理：

function textureFromFloat32Array( gl, arr, w, h ){
    //https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_float_linear
    gl.getExtension('OES_texture_float');        // just in case
    gl.getExtension('OES_texture_float_linear'); // do I need this with WebGL2
    const texture = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture);
    // see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, w, h, 0, gl.RED, gl.FLOAT, arr);
    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);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); // this works
    //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    return texture;
}

在 Firefox 55.0.2（64 位）中，出现以下错误：

Error: WebGL warning: drawElements: Active texture 0 for target …

我正在尝试学习如何在 WebGL2 中利用gl.drawBuffer()功能从同一程序执行多个输出。

我查看了“ OpenGL ES 3.0 编程指南”一书，第 11 章，其中列出了发生多输出所需的内容。然而，着色器源示例非常简单，仅输出常量值。

我想知道是否有人有更好的例子？或者是否可以解释 TextureCoordinates 变化发生了什么？在普通着色器代码中，我会使用它从我的输入中查找数据值并将它们写出来。现在面对多个布局，不同的 TextureCoordinates 如何对应每个布局？我的 viewPort 的尺寸会发生什么变化？哪个输出纹理对应？

以下是我理解它们的一些步骤：

1. 创建一个颜色附件数组 GL_COLOR_ATTACHMENT0, ...
2. 为每个输出创建一个帧缓冲对象
3. 创建输出纹理

4. 对于每个FB：

   • 绑定帧缓冲区
   • 绑定纹理
   • 将纹理与 FBO 关联：frameBufferTexture2D (..., color_attchment_from_step1)

5. 调用传递颜色附件数组的 drawBuffers

在着色器内部访问输出值，如下所示：

layout(location = 0) out vec4 fragData0;

layout(location = 1) out vec4 fragData1;

我正在尝试在 webgl2 中使用 3D 纹理，并且我开始了解

gl.texImage3D();

我有 2D 纹理的经验，我发现它非常方便，但人们在互联网上使用另一种方法。

gl.texStorage3D()

进而，

gl.texSubImage3D() // with all offset of x,y and z as 0.

我只是想知道这两种方法有什么区别。我开始知道，第二个选项的等效项也可用于 2D 纹理，但我不使用它来向目标提供数据。我知道子图像是为片段着色器创建纹理的子图像，但我不明白两种方法之间有什么区别。