WebGL：使用单独的纹理渲染两个对象

【问题标题】：WebGL: Rendering two objects with separate texturesWebGL：使用单独的纹理渲染两个对象
【发布时间】：2020-06-28 01:41:51
【问题描述】：

我目前正在使用 WebGL 开发一个简单的项目，该项目需要渲染多个带有简单纹理图像的 2D 对象。实际项目会生成随机数量的对象，通常在 5 到 9 个之间，在画布周围为它们设置顶点数据以将它们分开，并且应该渲染，但是它一次只会渲染一个（通常是最后一个，但我可以更改 gl.activeTexture 以显示数组中的其他对象）。我尝试在这里使用question 来了解着色器中的纹理数组，但无济于事，所以我最终创建了一个非常简单的测试程序，它只是尝试加载两个对象和纹理，一个在画布的左侧，一个在另一个在右边。

从这里开始，我尝试将所有内容完全分开，甚至为每个对象提供自己的着色器、程序、缓冲区和所有内容，然后在为每个对象调用 gl.drawElements 之前将所有内容绑定到每个对象的绘制调用中。这仍然没有向我显示正确的结果，只出现了第二个纹理，但是它确实让我发现了我认为正在发生的事情。通过注释掉第二个的绑定和绘制调用，第一个纹理出现，但是它出现在第二个纹理的位置，而不是它的顶点应该放置的位置。所以，我假设这个程序（和我的项目代码）中发生的事情是它实际上正在绘制两者，但由于某种原因，将最后绘制的顶点应用于所有顶点，从而堆叠它们并且只显示顶部（或最后绘制的）。

我还尝试了对以下代码的各种调整，仅使用一个程序，使用相同的索引、纹理坐标，还有一些注释掉的行，因为尝试以不同的顺序进行调用也是如此。任何被注释掉的东西并不意味着我一定认为它是错误的或正确的，只是从我在这一点上漫无目的地尝试的各种事情来看。

我曾使用过 OpenGL，并且在绘制多个具有自己纹理的对象时几乎没有遇到任何问题，而且我知道 WebGL 在某些方面（包括纹理）的工作方式与 OpenGL 不同，但我看不出问题出在哪里.我相信这是非常简单的事情，任何指导将不胜感激。

我为这段冗长的代码道歉，这几乎只是直接输入我认为需要的所有内容，而无需尝试走任何捷径。 initShaders 调用来自我在教科书中使用的 WebGL js 文件，并不是我编写的，loadImage 调用只是从 html 代码中加载 <img>。据我所知，正确加载图像没有问题。我只包括了第一个顶点和片段着色器，因为其他两个除了 id 之外是相同的。 

<script id="vertex-shader1" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        attribute vec2 vTexCoord;

        varying vec2 fTexCoord;

        void main() {
            fTexCoord = vTexCoord;
            gl_Position = vPosition;
        }

    </script>

    <script id="fragment-shader1" type="x-shader/x-fragment">
        precision mediump float;

        varying vec2 fTexCoord;

        uniform sampler2D texture;

        void main() {
            gl_FragColor = texture2D(texture, fTexCoord);
        }
    </script>

"use-strict"

var gl;

var images = [];

var program1;
var program2;
var texture1;
var texture2;

var vBuff1;
var vBuff2;
var iBuff1;
var iBuff2;
var tBuff1;
var tBuff2;

var vPos1;
var vPos2;
var fTexCoord1;
var fTexCoord2;

var sampler1;
var sampler2;

var vertices1 = [
    vec4(-0.8, 0.1, 0.0, 1.0),
    vec4(-0.8, 0.3, 0.0, 1.0),
    vec4(-0.6, 0.3, 0.0, 1.0),
    vec4(-0.6, 0.1, 0.0, 1.0)
];

var vertices2 = [
    vec4(0.1, 0.1, 0.0, 1.0),
    vec4(0.1, 0.3, 0.0, 1.0),
    vec4(0.3, 0.3, 0.0, 1.0),
    vec4(0.3, 0.1, 0.0, 1.0)
];

var indices1 = [
    0, 1, 2,
    0, 2, 3
];

var indices2 = [
    0, 1, 2,
    0, 2, 3
];

var tcs1 = [
    vec2(0, 0),
    vec2(0, 1),
    vec2(1, 1),
    vec2(1, 0)
];

var tcs2 = [
    vec2(0, 0),
    vec2(0, 1),
    vec2(1, 1),
    vec2(1, 0)
];

window.onload = function init() {
    var canvas = document.getElementById("gl-canvas");
    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) { alert("WebGL isn't available"); }

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    loadImages();

    program1 = initShaders(gl, "vertex-shader1", "fragment-shader1");
    gl.useProgram(program1);

    vBuff1 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vBuff1);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices1), gl.STATIC_DRAW);

    vPos1 = gl.getAttribLocation(program1, "vPosition");
    gl.vertexAttribPointer(vPos1, 4, gl.FLOAT, false, 0, 0);
    //gl.enableVertexAttribArray(vPos1);

    iBuff1 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff1);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices1), gl.STATIC_DRAW);

    tBuff1 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, tBuff1);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(tcs1), gl.STATIC_DRAW);

    fTexCoord1 = gl.getAttribLocation(program1, "vTexCoord");
    gl.vertexAttribPointer(fTexCoord1, 2, gl.FLOAT, false, 0, 0);
    //gl.enableVertexAttribArray(fTexCoord1);

    sampler1 = gl.getUniformLocation(program1, "texture");

    texture1 = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture1);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, images[0]);
    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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    gl.bindTexture(gl.TEXTURE_2D, null);

///////////////////////////////////////////////////////////////////////////////////////
/*
    program2 = initShaders(gl, "vertex-shader2", "fragment-shader2");
    gl.useProgram(program2);
*/
    vBuff2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vBuff2);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices2), gl.STATIC_DRAW);

    vPos2 = gl.getAttribLocation(program1, "vPosition");
    gl.vertexAttribPointer(vPos2, 4, gl.FLOAT, false, 0, 0);
    //gl.enableVertexAttribArray(vPos2);

    iBuff2 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff2);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices2), gl.STATIC_DRAW);

    tBuff2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, tBuff2);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(tcs2), gl.STATIC_DRAW);

    fTexCoord2 = gl.getAttribLocation(program1, "vTexCoord");
    gl.vertexAttribPointer(fTexCoord2, 2, gl.FLOAT, false, 0, 0);
    //gl.enableVertexAttribArray(fTexCoord2);

    sampler2 = gl.getUniformLocation(program1, "texture");

    texture2 = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture2);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, images[1]);
    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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    gl.bindTexture(gl.TEXTURE_2D, null);

    render();
};

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program1);

    gl.bindBuffer(gl.ARRAY_BUFFER, vBuff1);
    gl.enableVertexAttribArray(vPos1);
    gl.enableVertexAttribArray(fTexCoord1);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture1);

    gl.uniform1i(sampler1, 0);

//  gl.bindBuffer(gl.ARRAY_BUFFER, vBuff1);
//  gl.enableVertexAttribArray(vPos1);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff1);
    gl.drawElements(gl.TRIANGLES, indices1.length, gl.UNSIGNED_BYTE, 0);

    //gl.bindTexture(gl.TEXTURE_2D, null);

//  gl.useProgram(program2);

    gl.bindBuffer(gl.ARRAY_BUFFER,vBuff2);
    gl.enableVertexAttribArray(vPos2);
    gl.enableVertexAttribArray(fTexCoord2);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture2);

    gl.uniform1i(sampler2, 0);

//  gl.bindBuffer(gl.ARRAY_BUFFER, vBuff2);
//  gl.enableVertexAttribArray(vPos2);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff2);

    gl.drawElements(gl.TRIANGLES, indices2.length, gl.UNSIGNED_BYTE, 0);

    requestAnimFrame(render);
}

【问题讨论】：

  • 为什么提出问题而不阅读答案？ @gman 的好答案

标签： javascript webgl textures


【解决方案1】：

首先 AFAIK，您的代码无法运行。它调用函数loadImages，然后立即使用图像。图像在浏览器中异步加载，因此您需要在图像加载时进行回调，或者使用异步函数

这是您的代码工作。首先，我创建了一个返回 Promise 的loadImage。然后我创建了一个名为loadImages 的异步函数，它使用它来加载所有图像并等待它们加载。然后我创建了另一个名为main 的异步函数，它首先等待loadImages，然后调用init

第二个问题是 WebGL1 中的属性是全局状态。这意味着您需要在渲染时而不是初始化时设置它们，因此调用 gl.enableVertexAttribArray 和 gl.vertexAttribPointer 需要在渲染时使用适当的值进行，以渲染您正在渲染的特定事物。 gl.vertexAttribPointer 将当前的 ARRAY_BUFFER 绑定复制到该属性。

您可能会发现 these tutorials 很有帮助，尤其是 this one about attributes 和 this state diagram 可能会帮助您可视化 WebGL 内部发生的事情

"use-strict";

const vec2 = (...args) => [...args];
const vec4 = (...args) => [...args];
const flatten = a => new Float32Array(a.flat());
const WebGLUtils = {
  setupWebGL: (canvas) => { return canvas.getContext('webgl'); },
};
const initShaders = (gl, vs, fs) => twgl.createProgram(gl, [vs, fs]);
const requestAnimFrame = requestAnimationFrame;

var gl;

var images = [];

var program1;
var program2;
var texture1;
var texture2;

var vBuff1;
var vBuff2;
var iBuff1;
var iBuff2;
var tBuff1;
var tBuff2;

var vPos1;
var vPos2;
var fTexCoord1;
var fTexCoord2;

var sampler1;
var sampler2;

var vertices1 = [
	vec4(-0.8, 0.1, 0.0, 1.0),
	vec4(-0.8, 0.3, 0.0, 1.0),
	vec4(-0.6, 0.3, 0.0, 1.0),
	vec4(-0.6, 0.1, 0.0, 1.0)
];

var vertices2 = [
	vec4(0.1, 0.1, 0.0, 1.0),
	vec4(0.1, 0.3, 0.0, 1.0),
	vec4(0.3, 0.3, 0.0, 1.0),
	vec4(0.3, 0.1, 0.0, 1.0)
];

var indices1 = [
	0, 1, 2,
	0, 2, 3
];

var indices2 = [
	0, 1, 2,
	0, 2, 3
];

var tcs1 = [
	vec2(0, 0),
	vec2(0, 1),
	vec2(1, 1),
	vec2(1, 0)
];

var tcs2 = [
	vec2(0, 0),
	vec2(0, 1),
	vec2(1, 1),
	vec2(1, 0)
];

function init() {
	var canvas = document.getElementById("gl-canvas");
	gl = WebGLUtils.setupWebGL(canvas);
	if (!gl) { alert("WebGL isn't available"); }

	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.clearColor(0.0, 0.0, 0.0, 1.0);

	program1 = initShaders(gl, "vertex-shader1", "fragment-shader1");
	gl.useProgram(program1);

	vBuff1 = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vBuff1);
	gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices1), gl.STATIC_DRAW);

	vPos1 = gl.getAttribLocation(program1, "vPosition");

	iBuff1 = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff1);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices1), gl.STATIC_DRAW);

	tBuff1 = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, tBuff1);
	gl.bufferData(gl.ARRAY_BUFFER, flatten(tcs1), gl.STATIC_DRAW);

	fTexCoord1 = gl.getAttribLocation(program1, "vTexCoord");

	sampler1 = gl.getUniformLocation(program1, "texture");

	texture1 = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture1);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, images[0]);
	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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

	gl.bindTexture(gl.TEXTURE_2D, null);

///////////////////////////////////////////////////////////////////////////////////////
/*
	program2 = initShaders(gl, "vertex-shader2", "fragment-shader2");
	gl.useProgram(program2);
*/
	vBuff2 = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vBuff2);
	gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices2), gl.STATIC_DRAW);

	vPos2 = gl.getAttribLocation(program1, "vPosition");

	iBuff2 = gl.createBuffer();
	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff2);
	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices2), gl.STATIC_DRAW);

	tBuff2 = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, tBuff2);
	gl.bufferData(gl.ARRAY_BUFFER, flatten(tcs2), gl.STATIC_DRAW);

	fTexCoord2 = gl.getAttribLocation(program1, "vTexCoord");
	gl.vertexAttribPointer(fTexCoord2, 2, gl.FLOAT, false, 0, 0);
	//gl.enableVertexAttribArray(fTexCoord2);

	sampler2 = gl.getUniformLocation(program1, "texture");

	texture2 = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture2);
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, images[1]);
	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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

	gl.bindTexture(gl.TEXTURE_2D, null);

	render();
};

function render() {
	gl.clear(gl.COLOR_BUFFER_BIT);

	gl.useProgram(program1);

	gl.bindBuffer(gl.ARRAY_BUFFER, vBuff1);
	gl.enableVertexAttribArray(vPos1);
	gl.vertexAttribPointer(vPos1, 4, gl.FLOAT, false, 0, 0);
  
	gl.bindBuffer(gl.ARRAY_BUFFER, tBuff1);
	gl.enableVertexAttribArray(fTexCoord1);
	gl.vertexAttribPointer(fTexCoord1, 2, gl.FLOAT, false, 0, 0);

	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture1);

	gl.uniform1i(sampler1, 0);

	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff1);
	gl.drawElements(gl.TRIANGLES, indices1.length, gl.UNSIGNED_BYTE, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER,vBuff2);
	gl.enableVertexAttribArray(vPos2);
	gl.vertexAttribPointer(vPos2, 4, gl.FLOAT, false, 0, 0);
  
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture2);

	gl.uniform1i(sampler2, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER,tBuff2);
	gl.enableVertexAttribArray(fTexCoord2);
	gl.vertexAttribPointer(fTexCoord2, 2, gl.FLOAT, false, 0, 0);

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuff2);

	gl.drawElements(gl.TRIANGLES, indices2.length, gl.UNSIGNED_BYTE, 0);

	requestAnimFrame(render);
}

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.crossOrigin = 'anonymous';
    img.src = url;
  });
}

async function loadImages(imgs) {
  images = await Promise.all(imgs.map(loadImage));
}

async function main() {
  await loadImages([
    'https://webglfundamentals.org/webgl/resources/f-texture.png',
    'https://webglfundamentals.org/webgl/lessons/resources/noodles-01.jpg',
  ]);
  init();
}
main();
<script id="vertex-shader1" type="x-shader/x-vertex">
  attribute vec4 vPosition;
  attribute vec2 vTexCoord;

  varying vec2 fTexCoord;

  void main() {
    fTexCoord = vTexCoord;
    gl_Position = vPosition;
  }

</script>

<script id="fragment-shader1" type="x-shader/x-fragment">
  precision mediump float;

  varying vec2 fTexCoord;

  uniform sampler2D texture;

  void main() {
    gl_FragColor = texture2D(texture, fTexCoord);
  }
</script>
<canvas id="gl-canvas"></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode