WebGL是否支持1D纹理?

问题描述

我一直在寻找一个明确的答案，但似乎没有人清楚地问过这个问题.

我可以在WebGL Chrome，Firefox，Safari，IE等中使用一维采样器和一维纹理吗?

编辑

可理解的是1确实是2的幂(2 ^ 0 = 1)，这意味着您可以有效地使用2D采样器和纹理(高度为1且宽度为256或512等)来复制1D纹理. >

一维纹理并非没有意义，它们之所以存在，是因为它们不仅具有目的，而且还旨在转化为GPU本身的优化(与2D纹理相对).请记住，每个参数都需要花费一些时间才能加载到调用堆栈上，并且几乎所有GPU编程都是一种优化每种可能操作的技巧.

计算着色器经常需要使用单个浮点列表而没有额外的维度，使用1D纹理和采样器可提供与强类型输入相同的清晰度.即，以1D结构表示1D数据，并以2D结构表示2D数据.它还消除了索引到行/列的转换所需的额外操作.

问题不是不是他们有充分的理由，而是他们是否受到支持.

在 2014年5月9日的基于 OpenGL ES 2.0 的 WebGL 1.0 中

• 当前不支持一维纹理或采样器.

解决方案

为什么需要一维纹理?只需制作一个N像素宽，1像素高的2D纹理即可.

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

// 3x1 pixel 1d texture
var oneDTextureTexels = new Uint8Array([
    255,0,0,255,
    0,255,0,255,
    0,0,255,255,
]);

var width = 3;
var height = 1;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE,
              oneDTextureTexels);

generatemips或设置过滤条件，因此不需要mips

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_W, gl.CLAMP_TO_EDGE);

使用0.5进行y

采样

uniform sampler2D u_texture;
varying float v_texcoord;

void main() {
  vec4 color = texture2D(u_texture, vec2(v_texcoord, 0.5));
  ...

这里是使用1D纹理的示例.它使用典型照明计算的点积从一维渐变纹理中查找一个值以对对象进行着色.

直接回答您的问题. WebGL中将没有1D纹理，因为WebGL基于OpenGL ES 2.0，而OpenGL ES 2.0不支持1D纹理. OpenGL ES 3.0和3.1都没有.如果他们在合并OpenGL和OpenGL ES时没有完全删除1D纹理，我会感到惊讶.

I've been trying to find a clear answer, but it seems no one has clearly asked the question.

Can I use a 1D sampler and 1D texture in WebGL Chrome, Firefox, Safari, IE, etc?

EDIT

Understandably 1 is indeed a power of 2 (2^0=1) meaning you could effectively use a 2D sampler and texture using a height of 1 and a width of 256 or 512 etc. to replicate a 1D texture.

1D textures are not moot, they exist because they not only have a purpose, but are intended to translate into optimizations on the GPU itself (as opposed to a 2D texture). Remember that each parameter takes time to load onto the call stack, and almost all GPU programming is an art of optimizing every possible operation.

Compute shaders have frequent need for a single list of floats without the extra dimension, using a 1D texture and sampler provides the same clarity strong typing provides. Ie representing 1D data in a 1D structure, and representing 2D data in a 2D structure. It also removes extra operations required in index to row/column translations.

The questions wasn't if there is a good reason for them, it was are they supported yet.

In WebGL 1.0 based on OpenGL ES 2.0 as of 09/MAY/2014

• There is currently no 1D texture or sampler support.

解决方案

Why do you need 1D textures? Just make a 2D texture N pixels wide and 1 pixel tall.

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

// 3x1 pixel 1d texture
var oneDTextureTexels = new Uint8Array([
    255,0,0,255,
    0,255,0,255,
    0,0,255,255,
]);

var width = 3;
var height = 1;
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE,
              oneDTextureTexels);

Either generatemips or set filtering so no mips are needed

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_W, gl.CLAMP_TO_EDGE);

Sample it with with 0.5 for y

uniform sampler2D u_texture;
varying float v_texcoord;

void main() {
  vec4 color = texture2D(u_texture, vec2(v_texcoord, 0.5));
  ...

Here's a sample using 1D textures. It uses the dot product of a typical lighting calculation to look up a value from a 1d ramp texture to shade the objects.

In direct answer to your question. There will be no 1D textures in WebGL because WebGL is based on OpenGL ES 2.0 and OpenGL ES 2.0 does not support 1D textures. Neither does OpenGL ES 3.0 nor 3.1. I'd be surprised if they didn't remove 1D textures completely when they merge OpenGL and OpenGL ES

这篇关于WebGL是否支持1D纹理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！