标签: webgl-extensions

我希望能够OES_texture_half_float在WebGL中使用扩展并提供我自己的数据,但Float16Array在JavaScript中没有.那么如何生成半浮点数据呢？

我有许多GLSL片段着色器,我几乎可以保证它们符合#version 120它们使用标准的,非ES符合的值,并且它们没有任何ES特定的编译指示.

我真的想使用WebGL为他们制作一个Web预览器.预览器不会在移动设备上使用.这可行吗？与GLSL版本相比,WebGL中的GLSL着色器是否限制了特征集？有精确的差异吗？

我已经尝试过玩了THREE.js但是这并没有真正磨擦它,因为它将我的着色器代码粘贴到GPU之前(我无法做到).

简而言之:GLSL规范是否足以让我运行这些着色器？...因为如果它不是我所追求的是不可行的我应该放弃它.

这可能就像我在Chrome或Firefox中的愚蠢设置一样简单,但我不知道该去哪里弄清楚它是否是那个或者是否是别的东西.

我想弄清楚的基本问题是为什么浏览器之间的扩展支持是如此不同.

例如,转到http://prideout.net/recipes/ExtensionViewer.html

对于FireFox我得到了

OES_texture_float (google) (registry)
OES_standard_derivatives (google) (registry)
EXT_texture_filter_anisotropic (google) (registry)
MOZ_WEBGL_lose_context (google) (registry)
WEBGL_lose_context (google) (registry)
MOZ_WEBGL_compressed_texture_s3tc (google) (registry)
WEBGL_compressed_texture_s3tc (google) (registry)

但在Chrome中我得到:

OES_standard_derivatives (google) (registry)
WEBKIT_EXT_texture_filter_anisotropic (google) (registry)
OES_vertex_array_object (google) (registry)
OES_element_index_uint (google) (registry)
WEBGL_lose_context (google) (registry)

注意缺少 OES_texture_float

我在某些方面注意到我做(或者确实)似乎有一个AMD相关的浮点扩展,但我不知道哪个页面显示我有这个.我有一种感觉,无论展示它是什么旧版本的Chrome.

我知道我的卡支持浮点纹理(至少在某种程度上),每当我去Firefox中需要浮点纹理的页面时,该演示工作得非常好.

如果有什么我想弄清楚的,那就是我要做的就是让浮点纹理在我的机器上的Chrome中运行.您可以使用WebGL执行的一些最酷的事情需要使用浮点纹理扩展.

据我所知,Firefox和Chrome都使用了ANGLE,所以不会同时支持相同的扩展吗？

我想渲染浮动纹理的位置或深度.我用

vsnTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight,
            { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat ,type:THREE.FloatType }); 

作为渲染目标.

然后,我测试了

var gl = this.renderer.getContext();
    if( !gl.getExtension( "OES_texture_float" ) ){
        console.error( "No OES_texture_float support for float textures!" );
    } 

并没有发现任何错误.Chrome支持OES_texture_float,我进入THREE.js:

_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, renderTarget.width, renderTarget.height, 0, glFormat, glType, null );
 //console.log(glType);

当我设置WebGLRenderTarget时,我发现glType = 5126(gl.FLOAT):type:THREE.FloatType.这意味着我可以使用OES_texture_float.我有什么不对吗？因为我设置的类型:THREE.FloatType或使用默认值(THREE.UnsignedByteType),我都得到相同的渲染纹理.我没有OES_texture_float正确使用？

我是WebGL的菜鸟。我读过几篇有关ND缓冲区和G缓冲区的文章，好像它是WebGL开发的战略选择。

ND缓冲区和G缓冲区与渲染管线有何关系？ND缓冲区仅用于正向渲染，G缓冲区仅用于延迟渲染吗？

一个JavaScript代码示例如何实现这两者将对我理解区别很有用。

有谁知道OES_texture_float多年来对 Android 上WebGL 扩展的支持不断下降是怎么回事？

https://webglstats.com/webgl/extension/OES_texture_float?platforms=000000000010000400

这是某种数据收集错误，还是支持率真的下降了？

如果您将 Android 排除在过滤器之外，那么基本上 100% 的其他主流移动和桌面平台都支持 `OES_texture_float：

https://webglstats.com/webgl/extension/OES_texture_float?platforms=000036048004003200

我使用webgl_draw_buffers扩展创建了一个framebuffer对象,以提供三种颜色缓冲:

  colorBuffer0 = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer0);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE);

  colorBuffer1 = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer1);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE);

  colorBuffer2 = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer2);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE);

  var framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

  WEBGL_draw_buffers.drawBuffersWEBGL([WEBGL_draw_buffers.COLOR_ATTACHMENT0_WEBGL,
                                       WEBGL_draw_buffers.COLOR_ATTACHMENT1_WEBGL,
                                       WEBGL_draw_buffers.COLOR_ATTACHMENT2_WEBGL]);

  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT0_WEBGL, gl.RENDERBUFFER, colorBuffer0);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT1_WEBGL, gl.RENDERBUFFER, colorBuffer1);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, WEBGL_draw_buffers.COLOR_ATTACHMENT2_WEBGL, gl.RENDERBUFFER, colorBuffer2);

我将它们填充在片段着色器中:

  gl_FragData[0] = vec4(ch1.x, ch1.y, 0.0, 1.0);
  gl_FragData[1] = vec4(ch2.x, ch2.y, 0.0, 1.0);
  gl_FragData[2] = vec4(ch3.x, ch3.y, 0.0, 1.0);

现在,当我使用readPixels时,我总是得到colorBuffer0:

  pixels  = new Uint8Array(IMAGE_SOURCE_SIZE*IMAGE_SOURCE_SIZE*4);
  gl.readPixels(0,0, IMAGE_SOURCE_SIZE, IMAGE_SOURCE_SIZE, gl.RGBA, gl.UNSIGNED_BYTE, …

我一直在努力学习THREEJS着色器材料。到目前为止我了解了uniforms、vertexShader和fragmentShader在glsl和webgl的世界中如何在顶点和片段的投影和着色方面发挥作用。我一直在尝试找到一些很好的例子，其中使用 THREE.ShaderLib 扩展了 THREEJS 的 ShaderMaterial。

假设我想扩展一个标准的 Threejs 材质（THREE.ShaderLib['standard']）来写入 envmap 纹理，这可能吗？或者我是否绝对有必要从头开始编写所有内容？

我正在开发一个WebGL(使用ThreeJs)应用程序,显然,它显示3D模型,我们正在使用一些效果(着色器),希望通过测试来了解用户是否可以运行应用程序,我找到了一种方法检索使用过的浏览器中支持的插件列表.

问题:

我面临的问题是要知道我的应用程序需要什么插件,有没有办法自动检测它们？

更多细节:

有关详细信息,我将指出我需要的示例:

1. 在Mac OSX Maverix下的MacBook Pro中,应用程序运行正常
2. 在我的联想笔记本电脑上测试应用程序,在Windows 7下,然后是Windows 8,该应用程序无法正常工作,问题是由Bokeh2 Shader 引起的.

检查支持的WebGL扩展列表我发现,与Mac相比,联想中缺少一些扩展,因此我怎么知道哪些扩展如果丢失将破坏WebGL应用程序.

这是我在mac和lenovo中的扩展名列表.

在我的Mac中:

ANGLE_instanced_arrays

WEBKIT_EXT_texture_filter_anisotropic

OES_element_index_uint

OES_standard_derivatives

OES_texture_float

OES_texture_float_linear

OES_texture_half_float

OES_texture_half_float_linear

OES_vertex_array_object

WEBKIT_WEBGL_compressed_texture_s3tc

WEBKIT_WEBGL_depth_texture

WEBGL_draw_buffers

WEBGL_lose_context

WEBGL_debug_renderer_info

在我的联想:

ANGLE_instanced_arrays

WEBKIT_EXT_texture_filter_anisotropic

OES_element_index_uint

OES_standard_derivatives

OES_texture_float

OES_texture_half_float

OES_texture_half_float_linear

OES_vertex_array_object

WEBKIT_WEBGL_compressed_texture_s3tc

WEBGL_lose_context

WEBGL_debug_renderer_info

联想中缺少的:

OES_texture_float_linear

WEBKIT_WEBGL_depth_texture

WEBGL_draw_buffers

我在一个情况下,我有两个画布,我想在两个画布中显示相同的对象(事实上我必须在每个画布中显示不同的对象,但我想从两个中显示相同的对象开始),但我我不能这样做,有人可以请我这样做吗？

我尝试做的是:(我有两个灰色的画布(帆布和帆布2),它在两者中都显示多个方块,但它只显示一个),如何在两者中显示.我的代码是:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script class="WebGL">
        var gl,gl2;
        function createProgram(gl, vertexShader, fragmentShader)
        {
            var vs = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vs, vertexShader);
            gl.compileShader(vs);

            if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
                alert(gl.getShaderInfoLog(vs));
            //////
            var fs = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fs, fragmentShader);
            gl.compileShader(fs);

            if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
                alert(gl.getShaderInfoLog(fs));
            program = gl.createProgram();
            gl.attachShader(program, vs);
            gl.attachShader(program, fs);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program, gl.LINK_STATUS))
                alert(gl.getProgramInfoLog(program));
            return program;
        }
        function createShaderFromScriptElement(gl , shaderName)
        {
            var Shader = document.getElementById(shaderName).firstChild.nodeValue;
            return Shader;
        }
        function start()
        {            
            var canvas = document.getElementById("canvas");
            canvas2 = document.getElementById("canvas2");
            gl = canvas.getContext("experimental-webgl"); …

如何使用 OES_texture_float 扩展？我不明白有必要指定函数 texImage2D 的参数。

var fb=gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

var rb=gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16,size[0],size[1]);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,gl.RENDERBUFFER, rb);

var texture=gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size[0], size[1],0, gl.RGBA, ???, ???);

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D, texture, 0);

你需要写什么而不是“？？？”