使用多个RGBA值创建WebGL纹理
Create WebGL texture out of multiple RGBA values
我正在根据这个答案用一个RGBA值创建WebGL纹理,并想知道如何用多个RGBA的值创建一个纹理。
对于该阵列,
var textureData = new Uint8Array([128, 128, 0, 255]);
我尝试为另一个RGBA值添加附加值,但没有任何更改。作为参考,我将有262144个RGBA值,如果这有区别的话。
谢谢!
根据规范gl.texImage2D
的签名是
gl.texImage2D(
target, // TEXTURE_2D or TEXTURE_CUBE_MAP
level, // mip level 0 to n
internalFormat, // must match `format` below in WebGL 1.0
width, // width of `data` in pixels
height, // height of `data` in pixels
border, // must always be 0 in WebGL
format, // gl.RGBA, gl.RGB, gl.ALPHA, gl.LUMINANCE, ...
type, // gl.UNSIGNED_BYTE, ...
data); // your data which is width * height pixels
示例3x2
// here's 3x2 RGBA/UNSIGNED_BYTE pixels
var data = new Uint8Array([
255, 0, 0, 255, 255, 255, 0, 255, 0, 255, 0, 255,
0, 255, 255, 255, 0, 0, 255, 255, 255, 255, 255, 255,
]);
var level = 0;
var width = 3;
var height = 2;
var format = gl.RGBA;
var type = gl.UNSIGNED_BYTE;
var internalFormat = format;
var border = 0;
var target = gl.TEXTURE_2D;
gl.texImage2D(
target, // TEXTURE_2D or TEXTURE_CUBE_MAP
level, // mip level 0 - n
internalFormat, // must match `format` below in WebGL 1.0
width, // width of `data` in pixels
height, // height of `data` in pixels
border, // must always be 0 in WebGL
format, // gl.RGBA, gl.RGB, gl.ALPHA, gl.LUMINANCE, ...
type, // gl.UNSIGNED_BYTE, ...
data); // your data which is width * height pixels
如果您想更新较大纹理的较小部分,还有gl.texSubImage2D
。
示例:
var vs = `
void main() {
gl_PointSize = 100.0;
gl_Position = vec4(0, 0, 0, 1);
}
`;
var fs = `
precision mediump float;
uniform sampler2D texture;
void main() {
gl_FragColor = texture2D(texture, gl_PointCoord);
}
`;
var gl = document.createElement("canvas").getContext("webgl");
document.body.appendChild(gl.canvas);
var program = twgl.createProgramFromSources(gl, [vs, fs]);
gl.useProgram(program);
// here's 3x2 RGBA/UNSIGNED_BYTE pixels
var data = new Uint8Array([
255, 0, 0, 255, 255, 255, 0, 255, 0, 255, 0, 255,
0, 255, 255, 255, 0, 0, 255, 255, 200, 200, 200, 255,
]);
var level = 0;
var width = 3;
var height = 2;
var format = gl.RGBA;
var type = gl.UNSIGNED_BYTE;
var internalFormat = format;
var border = 0;
var target = gl.TEXTURE_2D;
var texture = gl.createTexture();
gl.bindTexture(target, texture);
gl.texImage2D(
target, // TEXTURE_2D or TEXTURE_CUBE_MAP
level, // 0 to n (mip level)
internalFormat, // must match `format` below in WebGL 1.0
width, // width of `data` in pixels
height, // height of `data` in pixels
border, // must always be 0 in WebGL
format, // gl.RGBA, gl.RGB, gl.ALPHA, gl.LUMINANCE, ...
type, // gl.UNSIGNED_BYTE, ...
data); // your data which is width * height pixels
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
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.drawArrays(gl.POINTS, 0, 1);
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/twgl.min.js"></script>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- 在 Chrome 中创建多个 webgl 纹理
- 使用 SpriteStage (WebGL) 创建 EaselJS 精灵动画
- 我是否必须为每个 webgl 程序创建单独的缓冲区
- 如何从已创建的WebGL上下文中获取WebGLProgram对象
- WebGL.它是否在 GPU 中创建缓冲区
- WebGL创建纹理
- 使用lookAt在WebGL中创建旋转相机
- 为什么当我在相同位置使用webgl创建新球体时,旋转速度会增加
- 为webgl渲染器创建一个球形粒子的基本材质
- 无法在WebGL中创建沿轴旋转的3D Koch
- 使用多个RGBA值创建WebGL纹理
- 使用RGBA值创建WebGL纹理
- 三.js + Chrome 43:创建 WebGL 上下文时出错