Glsl 如何在WebGL上使用图层？

我正在使用灯光贴图制作一个平铺贴图，我想知道如何将一个平铺贴图（光栅化为两个三角形）声明为第1层，以及上面的其他平铺贴图（在某些部分具有透明度）以查看第一层？

WebGL是一个光栅化API。它只是画画。它没有“层”的概念

您可以按每一帧实现层，绘制第一个瓷砖贴图，然后在第一个瓷砖贴图的顶部绘制第二个瓷砖贴图。这与canvas 2D API没有什么不同

至于如何渲染只有两个三角形（或一个偶数）的平铺贴图

还有一个在中使用相同技术，但它也支持翻转和旋转瓷砖（90度），并有代码从中加载贴图。抱歉，这里没有文档。有关绘制层的着色器和代码以及从平铺加载贴图和平铺的代码，请参见

让我们从基础开始。首先，如果我们只画两个矩形，第二个（蓝色）是第一个（红色）上方的“层”

const ctx=document.querySelector（“canvas”）.getContext（“2d”）；
函数渲染（时间）{
时间*=0.001；//秒
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
var t1=时间*-1.1；
ctx.fillStyle=“红色”；
ctx.fillRect（50+数学sin（t1）*20,50+数学cos（t1）*20,128,64）；
var t2=时间*1.3；
ctx.fillStyle=“蓝色”；
ctx.fillRect（75+数学sin（t2）*20,30+数学cos（t2）*20,64,128）；
请求动画帧（渲染）；
}
请求动画帧（渲染）
canvas{边框：1px纯黑；}
好吧，我试着理解Toji的示例代码是如何工作的，他在for循环中绘制“层”（在webgl-tilemap.js中，从第237行到第247行），但我不明白他是如何声明平铺贴图将位于顶部的，我想它被声明为uniform2f，或者简单地声明为相同的顶点，并在上面栅格化，因为它们具有相同的坐标。我不确定他是否在顶部声明了一个。第一个画在底部，下一个画在上面，下一个画在上面。没有魔法。见答案