Glsl 如何使用6 sampler2D实现textureCube

在我使用取样器立方体渲染立方体之前

这是我以前的fragmentShader代码

"uniform samplerCube tCubeTgt;",
"varying vec3 posTgt;",
"void main() {",
    "vec4 reflectedColorTgt = textureCube( tCubeTgt, vec3( -posTgt.x, posTgt.yz ) );",
    "gl_FragColor = reflectedColorTgt ;",
"}"

现在我想使用6Sampler2D渲染立方体

我该怎么办

为什么

在任何情况下，查看多维数据集映射的工作原理时，OpenGL ES 2.0规范中都有一个函数和表，显示了多维数据集映射的工作原理

其中sc、tc和ma来自此表

表3.21：基于纹理坐标长轴方向的立方体地图图像选择

使用它，您可以使用6个2d纹理（而不是一个立方体贴图）生成应用相同逻辑的函数

“严格使用”；
/*全局文档，twgl，requestAnimationFrame*/
常数vs=`
统一mat4-u_模型；
统一的mat4 u_视图；
均匀mat4u_投影；
均匀vec3u_相机；
属性向量4位置；
属性向量3正常；
可变vec3 v_正常；
可变的vec3 v_眼睛到表面；
void main（）{
vec4世界=u_模型*位置；
gl_位置=u_投影*u_视图*世界；
v_eyeToSurface=world.xyz-u_摄像头；
v_normal=（u_模型*vec4（normal，0））.xyz；
}
`;
常数fs=`
精密中泵浮子；
可变的vec3 v_眼睛到表面；
可变vec3 v_正常；
均匀的二维u_纹理[6]；
无效立方体贴图（vec3 r，out float texId，out vec2 st）{
vec3 uvw；
vec3 absr=abs（r）；
if（absr.x>absr.y&&absr.x>absr.z）{
//大调
浮动负x=阶跃（r.x，0.0）；
uvw=vec3（r.zy，absr.x）*vec3（mix（-1.0,1.0，negx），-1,1）；
texId=negx；
}else if（absr.y>absr.z）{
//y大调
浮动负y=阶跃（r.y，0.0）；
uvw=vec3（r.xz，absr.y）*vec3（1.0，混合（1.0，-1.0，负），1.0）；
texId=2.0+negy；
}否则{
//z大调
float negz=阶跃（r.z，0.0）；
uvw=vec3（r.xy，absr.z）*vec3（混合（1.0，-1.0，负z），-1,1）；
texId=4.0+negz；
}
st=vec2（uvw.xy/uvw.z+1.）*.5；
}
vec4 texCubemap（vec3 uvw）{
浮动texId；
vec2 st；
立方体贴图（uvw、texId、st）；
vec4颜色=vec4（0）；
对于（int i=0；i<6；++i）{
vec4侧=纹理2d（u_纹理[i]，st）；
浮动选择=步进（浮动（i）-0.5，texId）*
步骤（texId，float（i）+.5）；
颜色=混合（颜色、侧面、选择）；
}
返回颜色；
}
void main（）{
vec3正常=正常化（v_正常）；
vec3 eyeToSurface=规格化（v_eyeToSurface）；
gl_FragColor=texCubemap（反射（眼睛到表面，法线））；
}
`;
常数m4=twgl.m4；
const gl=document.getElementById（“c”）.getContext（“webgl”）；
//编译着色器，查找位置
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
//创建缓冲区
常数模型=[
twgl.primitives.createSphereBufferInfo（gl，1，12，8），
twgl.primitives.createCubeBufferInfo（gl，1.5），
twgl.primitives.createTorusBufferInfo（gl.7.5.12.8），
];
常量纹理=twgl.createTextures（gl{
posx:{minMag:gl.LINEAR，wrap:gl.CLAMP_到_边，交叉原点：“匿名”，src:'https://twgljs.org/examples/images/yokohama/posx.jpg', },
negx:{minMag:gl.LINEAR，wrap:gl.CLAMP_到_边，交叉原点：“匿名”，src:'https://twgljs.org/examples/images/yokohama/negx.jpg', },
位置：{minMag:gl.LINEAR，包裹：gl.CLAMP_到_边，交叉原点：“匿名”，src:'https://twgljs.org/examples/images/yokohama/posy.jpg', },
negy:{minMag:gl.LINEAR，wrap:gl.CLAMP_到_边，交叉原点：“匿名”，src:'https://twgljs.org/examples/images/yokohama/negy.jpg', },
posz:{minMag:gl.LINEAR，wrap:gl.CLAMP_到_边，交叉原点：“匿名”，src:'https://twgljs.org/examples/images/yokohama/posz.jpg', },
negz:{minMag:gl.LINEAR，wrap:gl.CLAMP_到_边，交叉原点：“匿名”，src:'https://twgljs.org/examples/images/yokohama/negz.jpg', },
});
警察制服={
u_纹理：[
.posx，
.negx，
波西先生，
内基先生，
posz先生，
negz先生，
],
};
函数渲染（时间）{
时间*=0.001；
twgl.resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
总帐启用（总帐深度测试）；
总账启用（总账消隐面）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
常数fov=30*Math.PI/180；
const aspect=gl.canvas.clientWidth/gl.canvas.clientHeight；
常数zNear=0.5；
常数zFar=20；
常量投影=m4.透视图（视野、纵横比、zNear、zFar）；
常数眼=[
数学。罪（时间）*7，
数学单（时间*.5）*3，
数学cos（时间）*7，
];
常量目标=[0,0,0]；
const up=[0,1,0]；
常量摄影机=m4。注视（眼睛、目标、向上）；
常量视图=m4。反向（摄像头）；
制服。u_摄像头=眼睛；
1.u_投影=投影；
uniforms.u_view=视图；
总账使用程序（programInfo.program）；
models.forEach（（bufferInfo，ndx）=>{
设u=ndx/（models.length-1）*2-1；
设model=m4.平移（[u*（models.length-1），0，0]）；
模型=m4.旋转（模型，时间*（ndx+1）*0.7）；
0.u_模型=m4.rotateX（模型，时间*（ndx+1）*0.2）；
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
twgl.设置制服（程序信息、制服）；
总帐付款人（总帐三角形，缓冲信息，总帐无符号单位短，0）；
});
请求动画帧（渲染）；
}
请求动画帧（渲染）
正文{
保证金：0；
}
帆布{
显示：块；
宽度：100vw；
高度：100vh；
}

samplerCube的作用是根据给定3D向量的方向计算出立方体的哪一侧/哪层进行采样。您现在只需手动执行同样的操作。我确信OpenGL规范详细说明了使用的算法。您是想“渲染立方体”，还是想进行立方体映射？因为这些不是同一件事。非常感谢你的回答。你的回答解决了一直困扰我的问题。但我不太清楚为什么6个2d纹理而不是一个立方体贴图会慢得多。如果对性能的影响非常大，我可能需要找到其他方法。如果没有其他方法，循环通过6个纹理会更慢
Major Axis Direction|        Target             |sc |tc |ma |
--------------------+---------------------------+---+---+---+
       +rx          |TEXTURE_CUBE_MAP_POSITIVE_X|−rz|−ry| rx|
       −rx          |TEXTURE_CUBE_MAP_NEGATIVE_X| rz|−ry| rx|
       +ry          |TEXTURE_CUBE_MAP_POSITIVE_Y| rx| rz| ry|
       −ry          |TEXTURE_CUBE_MAP_NEGATIVE_Y| rx|−rz| ry|
       +rz          |TEXTURE_CUBE_MAP_POSITIVE_Z| rx|−ry| rz|
       −rz          |TEXTURE_CUBE_MAP_NEGATIVE_Z|−rx|−ry| rz|
--------------------+---------------------------+---+---+---+