webgl2 - IT屋-程序员软件开发技术分享社区

WebGL2 FBO深度附着值

我只是尝试使用WebGL2呈现场景的深度值，如下所示： //Texture depthTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, depthTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT24, width, ..

发布时间：2022-03-14 12:46:38 webgl fbo depth-buffer webgl2 其他开发

为什么在调用 bindBufferRange() 之前取消绑定 gl.UNIFORM_BUFFER?

从一些不同的例子来看，似乎将数据上传到缓冲区，用作统一缓冲区，执行以下顺序: bindBuffer() bufferData() bindBuffer() - 为 null，即“解除绑定" bindBufferRange() 第 3 步的目的是什么? 解决方案你不需要按照这个顺序来做. 最简单的例子: 'use strict';const vs = `#ve ..

发布时间：2021-09-23 18:37:25 webgl webgl2 其他开发

将帧缓冲区数据从一个 WebGLRenderingContext 复制到另一个?

如果以下内容没有太大意义，请参阅下面的背景部分，为了使问题尽可能清楚，我省略了大部分上下文. 我有两个具有以下特征的 WebGLRenderingContext: WebGLRenderingContext:InputGL(允许对其帧缓冲区进行读写操作.) WebGLRenderingContext:OutputGL(允许在其帧缓冲区上只写操作.) 目标:在移动设备上，在 33 ..

发布时间：2021-09-23 18:37:19 webgl unity-webgl webgl2 webxr 其他开发

在 WebGL 中采样整数纹理返回奇怪的值

我正在尝试通过应用从 WebGL2 中的 16 位数组缓冲区渲染灰度图像片段着色器中的窗口调平.我生成的纹理如下: let typedArray = new Int16Array(data);gl.texImage2D(gl.TEXTURE_2D，0,gl.R16I，w, h,0,gl.RED_INTEGER,gl.Short,类型数组); 并尝试使用来自以下片段着色器的数据: let f ..

发布时间：2021-09-23 18:36:42 image-processing webgl fragment-shader webgl2 glteximage2d 其他开发

在 webgl2 (gl.fenceSync) 中寻找适当使用围栏的一些模式/代码示例/最佳实践 - 如果它不会阻塞 JS 线程，则最好. var fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);setTimeout(() => {gl.clientWaitSync(fence, gl.SYNC_FLUSH_COMMANDS_BIT ..

发布时间：2021-09-23 18:36:36 javascript webgl webgl2 前端开发

上传统一块的正确顺序是什么?

在 https://www.lighthouse3d.com 的示例页面中/tutorials/glsl-tutorial/uniform-blocks/ 有这个: uniformBlockBinding() bindBuffer() bufferData() bindBufferBase() 但从概念上讲，这不是更正确吗? bindBuffer() bufferDa ..

发布时间：2021-09-23 18:36:09 webgl webgl2 其他开发

同一程序的多个输出纹理

我正在尝试学习如何利用 gl.drawBuffer()功能从WebGL2中的同一程序进行多个输出. 我看了《 OpenGL ES 3.0编程指南》这本书，在第11章中列出了进行多输出所需要的内容.但是，着色器源示例非常琐碎，仅输出恒定值. 我想知道是否有人有更好的例子?还是可以解释一下TextureCoordinates发生了什么变化?在普通的着色器代码中，我将使用它来从输入中查找数据 ..

发布时间：2021-05-11 19:04:12 glsl webgl2 其他开发

如何保持粒子之间的协调以及哪个纹理像素包含每个人的信息?

以4x4x4网格为例，我有64个顶点(我称为粒子)，这些顶点以相对于彼此的特定位置开头.这64个粒子将在x，y和z方向上移动，从而失去了彼此之间的初始位置.但是，每个循环都需要根据粒子与其原始邻居之间的原始起始关系来计算新的粒子位置和速度. 我了解到我需要使用纹理，因此需要使用帧缓冲区，并且现在能够编写两个3DTexture，该触发器可以提供写和读功能来执行此操作.但是，在下一个周期中，将g ..

发布时间：2020-07-14 02:50:34 framebuffer webgl2 3d-texture 其他开发

在着色器程序之间传递数据

好吧，我将保持尽可能简单.我想在着色器程序之间传递数据.我目前正在使用readPixels来执行此操作，但我认为这可能会减慢操作速度，并且正在探索更快的选项. 我的程序做什么: program1将我的渲染渲染到画布上. program2在要传递给program1的着色器中执行了一些出色的操作. 我的问题: 是否可以使用program2中的vbo并将其传递给program1 ..

发布时间：2020-07-14 02:50:32 webgl2 glreadpixels glteximage2d 其他开发

绑定多个统一缓冲区对象

使用WebGL 2，我们现在可以使用统一缓冲区对象. 它们看起来是个好主意，不必在每个程序中都附加通用的制服(例如，对于要渲染的每个对象通用的投影和视图矩阵). 我创建了一个助手类，每次我想绑定一个统一的缓冲对象时都会调用它. class UniformBuffer { constructor(gl, data, boundLocation = 0) { ..

发布时间：2020-07-14 02:49:27 glsl webgl2 其他开发

WebGL2-如何存储和检索3D顶点网格计算新顶点位置所需的3D纹理数据

3D物理模拟需要访问着色器中相邻顶点的位置和属性，以计算顶点的新位置. 2D版本可以使用，但在将解决方案移植到3D时遇到麻烦.翻转两个3D纹理似乎是正确的，输入一个纹理的x，y和z坐标集，并获得vec4s，其中包含相邻点的位置-速度-加速度数据，可用于计算每个顶点的新位置和速度. 2D版本使用1个带有帧缓冲区的绘制调用将所有生成的gl_FragColors保存到sampler2D.我想使用fram ..

发布时间：2020-07-14 02:49:26 textures shader framebuffer webgl2 其他开发

WebGL 2.0:同一程序的多个输出纹理

我正在尝试学习如何利用gl.drawBuffer()功能从WebGL2中的同一程序进行多个输出. 我看了《 OpenGL ES 3.0编程指南》这本书，在第11章中列出了进行多输出所需要的内容.但是，着色器源示例非常琐碎，仅输出恒定值. 我想知道是否有人有更好的例子?还是可以解释一下TextureCoordinates发生了什么变化?在普通的着色器代码中，我将使用它来从输入中查找数据值 ..

发布时间：2020-07-14 02:49:21 glsl webgl2 其他开发

如何使用像素缓冲区对象在WebGL2中上载纹理?

当前，使用texImage2d上传大型4096x4096纹理非常慢，在将纹理发送到GPU时锁定了主线程，最终导致结结. 据我了解，WebGL2能够使用PBO(像素缓冲对象)以更有效的方式在GPU上创建纹理.但是，我无法在网上找到任何有关此操作的示例. 我在 OpenGL 中找到了有关如何实现此目标的很好的描述，但是不确定如何继续使用WebGL API. 我想使用Canvas或Im ..

发布时间：2020-07-14 02:49:18 webgl2 其他开发

如何通过使用统一的缓冲区对象和实例渲染来绘制多个对象?

我想通过使用统一缓冲区对象和实例化渲染来绘制带有动画的多个对象. 我已经使用for循环实现了此功能，但我想一次渲染它们. 这是我的代码，当单击鼠标时，该代码使用for循环呈现多个对象. 我正在使用四个外部库，分别是webgl-utils.js，webgl-debug.js，cuon-utils.js，cuon-matrix.js.可以在此处找到. "use strict"; ..

发布时间：2020-07-14 02:49:16 webgl2 其他开发

在WebGL 2实例中访问gl_InstanceID

我试图在WebGL 2中进行实例化.我想使用内置变量gl_InstanceID索引到统一的float数组中. 我收到以下错误: glDrawElementsInstancedANGLE: attempt to draw with all attributes having non-zero divisors 使用顶点属性(实例化数组)的WebGL 2实例化是唯一允许的实例化吗? ..

发布时间：2020-07-14 02:48:13 webgl2 其他开发

WebGL如何避免长着色器编译使选项卡停滞

我有一个巨大的着色器，需要花费一分钟以上的时间进行编译，从而在整个过程中完全停滞了整个浏览器.据我所知，着色器编译不能异步进行，因此可以在等待编译完成时运行其他WebGL命令. 我已经尝试了以下方法: 一段时间不使用该特定着色器-这是行不通的，因为大多数其他WebGL命令将等待其完成，即使该着色器程序从未处于活动状态使用另一个上下文-与上面相同，但是即使来自另一个上下文的WebGL ..

发布时间：2020-07-14 02:48:10 webgl webgl2 其他开发

gl_PointSize，gl_Position，gl_FragCoord之间的关系

示例 vs着色器 void main() { gl_Position = vec4(0, 0, 0, 1); gl_PointSize = 100.0; } 画布为1x5像素(宽度，高度) 片段着色器使用gl_FragCoord 这5个像素的gl_FragCoord值是什么? 欢呼解决方案对于每个像素gl_FragCoord.xy将是 4.5, ..

发布时间：2020-07-14 02:48:02 webgl2 其他开发

Chrome不支持Webgl 2.0

我的镶边显示了Webgl 2.0-受支持，但在浏览器设置中被禁用，或被扩展程序阻止. 我试过了 1.在chrome://settings中使用硬件加速 2.在chrome://flags中启用了WEBGL 2.0 3.覆盖软件渲染列表.. 还有什么其他选项可通过浏览器设置启用webgl 2.0? 任何帮助都非常感激解决方案似乎是当前的ANGLE(这是打开 chrome://flags/ ..

发布时间：2020-07-14 02:47:59 webgl2 其他开发

在WebGL2中渲染为16位无符号整数2D纹理

如WebGL 2官方规范或文档中所述(我可以轻松地用UInt16Array填充纹理，然后使用它.但是我无法使用着色器将纹理渲染填充到其中.然后，当我在下一个着色器中采样值时，我只会得到零. 是否有人已经成功使用WebGL 2渲染为无符号整数纹理?我将非常感激，我玩了数周的纹理格式，但在这里我没有做错什么……而且在关于该主题的其他SO问题中我也没有发现自己的错误. > 您可以在下面的代码段中 ..

发布时间：2020-06-16 19:05:41 textures unsigned-integer render-to-texture glsles webgl2 其他开发

在WebGL2中使用drawBuffers时遇到麻烦

我想将延迟渲染器和正向渲染器结合在一起.为了共享相同的深度缓冲区，我使用具有4个颜色附件的单个帧缓冲区对象，GOL缓冲区渲染使用COLOR_ATTACHMENT0-2，延迟着色和前向渲染使用COLOR_ATTACHMENT3，这是伪代码: //**Gbufffer part** Bind G-Buffer FBO gl.drawBuffers([gl.COLOR_ATTACHMENT0, g ..

发布时间：2020-05-21 00:33:21 opengl-es webgl webgl2 其他开发

webgl2相关内容