如何*最佳地*在 WebGL 中绘制多个图像（即纹理图集）
How to *optimally* draw multiple images in WebGL (i.e. texture atlas)
Here 列出了如何在 WebGL 中绘制多个图像，但它一次绘制一个图像，据我所知这是次优的。
建议使用纹理图集或其他方法。以某种方式减少绘制调用。你能用一些代码或伪代码大致演示一下这是如何工作的吗？
（我正在尝试创建一个照片库，其中包含许多类似矢量的绘图以及网格中的数十张照片，然后您 select 一张照片并放大。）
有上百种方法。哪种方式取决于您的需求。
这是最简单的例子，尽管它只是最常见的例子之一，说明如何绘制一个立方体，每个面有 6 个图像。
现在调整立方体面的位置，使它们分开并朝向相同的方向。这是上面链接的答案中的相同示例，但是面移动到所有面朝相同的方向
"use strict";
var m4 = twgl.m4;
var gl = document.getElementById("c").getContext("webgl");
// compiles shader, links and looks up locations
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
function quadPoints(x, y) {
return [
x - .5, y - .5, 0,
x + .5, y - .5, 0,
x + .5, y + .5, 0,
x - .5, y + .5, 0,
];
};
function uvCoords(x, y, width, height, imageWidth, imageHeight) {
const left = x / imageWidth;
const bottom = y / imageHeight;
const right = (x + width ) / imageWidth;
const top = (y + height) / imageHeight;
return [
left, top,
right, top,
right, bottom,
left, bottom,
];
}
const textureAtlasDimensions = [512, 256];
const thumbnailDimensions = [128, 128];
const arrays = {
position: [
...quadPoints(-3.0, 0),
...quadPoints(-1.8, 0),
...quadPoints( -.6, 0),
...quadPoints( .6, 0),
...quadPoints( 1.8, 0),
...quadPoints( 3.0, 0),
],
texcoord: [
...uvCoords( 0, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords( 0, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
],
indices: [
0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23,
],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const tex = twgl.createTexture(gl, {
src: "https://webglfundamentals.org/webgl/resources/noodles.jpg",
crossOrigin: "",
});
const uniforms = {
u_texture: tex,
};
function render(time) {
time *= 0.001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 20);
const eye = [0, 0, 10];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const viewProjection = m4.multiply(view, projection);
const world = m4.rotationZ(time * .1);
uniforms.u_worldViewProjection = m4.multiply(world, viewProjection);
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
twgl.setUniforms(programInfo, uniforms);
// calls gl.drawArray or gl.drawElements
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0px; }
canvas { width: 100vw; height: 100vh; display: block; }
<script id="vs" type="notjs">
uniform mat4 u_worldViewProjection;
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texCoord;
void main() {
v_texCoord = texcoord;
gl_Position = u_worldViewProjection * position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
void main() {
gl_FragColor = texture2D(u_texture, v_texCoord);
}
</script>
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas id="c"></canvas>
您刚刚使用 1 次绘制调用绘制了 6 张图像。
您可以通过更新顶点位置并使用 gl.bufferData
重新上传来单独移动图像
"use strict";
var m4 = twgl.m4;
var gl = document.getElementById("c").getContext("webgl");
// compiles shader, links and looks up locations
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
function quadPoints(x, y) {
return [
x - .5, y - .5, 0,
x + .5, y - .5, 0,
x + .5, y + .5, 0,
x - .5, y + .5, 0,
];
};
function uvCoords(x, y, width, height, imageWidth, imageHeight) {
const left = x / imageWidth;
const bottom = y / imageHeight;
const right = (x + width ) / imageWidth;
const top = (y + height) / imageHeight;
return [
left, top,
right, top,
right, bottom,
left, bottom,
];
}
const textureAtlasDimensions = [512, 256];
const thumbnailDimensions = [128, 128];
const baseQuad = quadPoints(0, 0);
const position = new Float32Array([
...quadPoints(-3.0, 0),
...quadPoints(-1.8, 0),
...quadPoints( -.6, 0),
...quadPoints( .6, 0),
...quadPoints( 1.8, 0),
...quadPoints( 3.0, 0),
]);
const arrays = {
position,
texcoord: [
...uvCoords( 0, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords( 0, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
],
indices: [
0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23,
],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const tex = twgl.createTexture(gl, {
src: "https://webglfundamentals.org/webgl/resources/noodles.jpg",
crossOrigin: "",
});
const uniforms = {
u_texture: tex,
};
function render(time) {
time *= 0.001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 20);
const eye = [0, 0, 10];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const viewProjection = m4.multiply(view, projection);
const world = m4.identity();
uniforms.u_worldViewProjection = m4.multiply(world, viewProjection);
// move the vertices of the quad
const numQuads = 6;
for (let i = 0; i < numQuads; ++i) {
const u = i / (numQuads - 1);
const x = -3 + u * 6;
const y = Math.sin(time + u * Math.PI * 2) * 2;
for (let j = 0; j < 4; ++j) {
const srcOffset = j * 3;
const dstOffset = i * 12 + j * 3;
position[dstOffset + 0] = baseQuad[srcOffset + 0] + x;
position[dstOffset + 1] = baseQuad[srcOffset + 1] + y;
}
}
// upload them to the gpu
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.position.buffer);
gl.bufferData(gl.ARRAY_BUFFER, position, gl.DYNAMIC_DRAW);
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
twgl.setUniforms(programInfo, uniforms);
// calls gl.drawArray or gl.drawElements
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0px; }
canvas { width: 100vw; height: 100vh; display: block; }
<script id="vs" type="notjs">
uniform mat4 u_worldViewProjection;
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texCoord;
void main() {
v_texCoord = texcoord;
gl_Position = u_worldViewProjection * position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
void main() {
gl_FragColor = texture2D(u_texture, v_texCoord);
}
</script>
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas id="c"></canvas>
现在添加更多四边形而不是 6 个
Here 列出了如何在 WebGL 中绘制多个图像，但它一次绘制一个图像，据我所知这是次优的。
建议使用纹理图集或其他方法。以某种方式减少绘制调用。你能用一些代码或伪代码大致演示一下这是如何工作的吗？
（我正在尝试创建一个照片库，其中包含许多类似矢量的绘图以及网格中的数十张照片，然后您 select 一张照片并放大。）
有上百种方法。哪种方式取决于您的需求。
这是最简单的例子，尽管它只是最常见的例子之一，说明如何绘制一个立方体，每个面有 6 个图像。
现在调整立方体面的位置，使它们分开并朝向相同的方向。这是上面链接的答案中的相同示例，但是面移动到所有面朝相同的方向
"use strict";
var m4 = twgl.m4;
var gl = document.getElementById("c").getContext("webgl");
// compiles shader, links and looks up locations
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
function quadPoints(x, y) {
return [
x - .5, y - .5, 0,
x + .5, y - .5, 0,
x + .5, y + .5, 0,
x - .5, y + .5, 0,
];
};
function uvCoords(x, y, width, height, imageWidth, imageHeight) {
const left = x / imageWidth;
const bottom = y / imageHeight;
const right = (x + width ) / imageWidth;
const top = (y + height) / imageHeight;
return [
left, top,
right, top,
right, bottom,
left, bottom,
];
}
const textureAtlasDimensions = [512, 256];
const thumbnailDimensions = [128, 128];
const arrays = {
position: [
...quadPoints(-3.0, 0),
...quadPoints(-1.8, 0),
...quadPoints( -.6, 0),
...quadPoints( .6, 0),
...quadPoints( 1.8, 0),
...quadPoints( 3.0, 0),
],
texcoord: [
...uvCoords( 0, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords( 0, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
],
indices: [
0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23,
],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const tex = twgl.createTexture(gl, {
src: "https://webglfundamentals.org/webgl/resources/noodles.jpg",
crossOrigin: "",
});
const uniforms = {
u_texture: tex,
};
function render(time) {
time *= 0.001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 20);
const eye = [0, 0, 10];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const viewProjection = m4.multiply(view, projection);
const world = m4.rotationZ(time * .1);
uniforms.u_worldViewProjection = m4.multiply(world, viewProjection);
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
twgl.setUniforms(programInfo, uniforms);
// calls gl.drawArray or gl.drawElements
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0px; }
canvas { width: 100vw; height: 100vh; display: block; }
<script id="vs" type="notjs">
uniform mat4 u_worldViewProjection;
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texCoord;
void main() {
v_texCoord = texcoord;
gl_Position = u_worldViewProjection * position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
void main() {
gl_FragColor = texture2D(u_texture, v_texCoord);
}
</script>
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas id="c"></canvas>
您刚刚使用 1 次绘制调用绘制了 6 张图像。
您可以通过更新顶点位置并使用 gl.bufferData
"use strict";
var m4 = twgl.m4;
var gl = document.getElementById("c").getContext("webgl");
// compiles shader, links and looks up locations
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
function quadPoints(x, y) {
return [
x - .5, y - .5, 0,
x + .5, y - .5, 0,
x + .5, y + .5, 0,
x - .5, y + .5, 0,
];
};
function uvCoords(x, y, width, height, imageWidth, imageHeight) {
const left = x / imageWidth;
const bottom = y / imageHeight;
const right = (x + width ) / imageWidth;
const top = (y + height) / imageHeight;
return [
left, top,
right, top,
right, bottom,
left, bottom,
];
}
const textureAtlasDimensions = [512, 256];
const thumbnailDimensions = [128, 128];
const baseQuad = quadPoints(0, 0);
const position = new Float32Array([
...quadPoints(-3.0, 0),
...quadPoints(-1.8, 0),
...quadPoints( -.6, 0),
...quadPoints( .6, 0),
...quadPoints( 1.8, 0),
...quadPoints( 3.0, 0),
]);
const arrays = {
position,
texcoord: [
...uvCoords( 0, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 0, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords( 0, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(128, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
...uvCoords(256, 128, ...thumbnailDimensions, ...textureAtlasDimensions),
],
indices: [
0, 1, 2, 0, 2, 3,
4, 5, 6, 4, 6, 7,
8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15,
16, 17, 18, 16, 18, 19,
20, 21, 22, 20, 22, 23,
],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
// calls gl.createTexture, gl.bindTexture, gl.texImage2D, gl.texParameteri
const tex = twgl.createTexture(gl, {
src: "https://webglfundamentals.org/webgl/resources/noodles.jpg",
crossOrigin: "",
});
const uniforms = {
u_texture: tex,
};
function render(time) {
time *= 0.001;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const projection = m4.perspective(30 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.5, 20);
const eye = [0, 0, 10];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const viewProjection = m4.multiply(view, projection);
const world = m4.identity();
uniforms.u_worldViewProjection = m4.multiply(world, viewProjection);
// move the vertices of the quad
const numQuads = 6;
for (let i = 0; i < numQuads; ++i) {
const u = i / (numQuads - 1);
const x = -3 + u * 6;
const y = Math.sin(time + u * Math.PI * 2) * 2;
for (let j = 0; j < 4; ++j) {
const srcOffset = j * 3;
const dstOffset = i * 12 + j * 3;
position[dstOffset + 0] = baseQuad[srcOffset + 0] + x;
position[dstOffset + 1] = baseQuad[srcOffset + 1] + y;
}
}
// upload them to the gpu
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.position.buffer);
gl.bufferData(gl.ARRAY_BUFFER, position, gl.DYNAMIC_DRAW);
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.uniformXXX, gl.activeTexture, gl.bindTexture
twgl.setUniforms(programInfo, uniforms);
// calls gl.drawArray or gl.drawElements
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
body { margin: 0px; }
canvas { width: 100vw; height: 100vh; display: block; }
<script id="vs" type="notjs">
uniform mat4 u_worldViewProjection;
attribute vec4 position;
attribute vec2 texcoord;
varying vec2 v_texCoord;
void main() {
v_texCoord = texcoord;
gl_Position = u_worldViewProjection * position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_texture;
void main() {
gl_FragColor = texture2D(u_texture, v_texCoord);
}
</script>
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas id="c"></canvas>
现在添加更多四边形而不是 6 个