WebGL，如何从3D过渡到2D并返回

如何在WebGL中在三维视图和二维视图之间转换

---

我有一个场景的3D视图，我想显示一个2D视图，就像地图视图一样。如何在这两种类型的视图之间切换？

一般来说，要从3d切换到2d，只需使用a而不是a

如果要设置过渡动画，则在2之间进行lerping似乎是可行的

 const ortho = someOrthoFunc(left, right, top, bottom, orthoZNear, orthZFar);
 const persp = somePerspFunc(fov, aspect, perspZNear, perspZFar);
 const projection = [];
 for (let i = 0; i < 16; ++i) {
   projection[i] = lerp(ortho[i], persp[i], mixAmount);     
 }


 function lerp(a, b, l) {
   return a + (b - a) * l;
 }

对于3d相机，您将有一组不同的

cameraPosition

，

target

，

up

。您可以通过设置这3个变量来设置它们之间的转换动画

const vs=`
均匀mat4 u_世界视图投影；
属性向量4 a_位置；
属性向量2 a_texcoord；
可变vec4 v_位置；
可变矢量2 v_texcoord；
void main（）{
v_texcoord=a_texcoord；
gl_位置=u_世界视图投影*a_位置；
}
`;
常数fs=`
精密中泵浮子；
可变矢量2 v_texcoord；
均匀的二维u_纹理；
void main（）{
gl_FragColor=纹理2D（u_纹理，v_texcoord）；
}
`;
“严格使用”；
setDefaults（{attribPrefix:“a_”}）；
常数m4=twgl.m4；
常数v3=twgl.v3；
const gl=document.getElementById（“c”）.getContext（“webgl”）；
//编译着色器、链接程序、查找位置
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
//调用gl.createBuffer、gl.bindBuffer、gl.bufferData以获取位置、texcoords
const bufferInfo=twgl.primitives.createCubeBufferInfo（gl）；
//调用gl.createTexture、gl.bindTexture、gl.texImage2D、gl.texParameteri
常量tex=twgl.createTexture（gl{
最小值：gl最近值，
杂志：德国劳埃德船级社，
src:[
255, 0, 0, 255,
0, 192, 0, 255,
0, 0, 255, 255,
255, 224, 0, 255,
],
});
常量设置={
项目模式：2，
摄像机型号：2，
fov:30，
};
函数渲染（时间）{
时间*=0.001；
twgl.resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
总帐启用（总帐深度测试）；
总账启用（总账消隐面）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
const fov=settings.fov*Math.PI/180；
const aspect=gl.canvas.clientWidth/gl.canvas.clientHeight；
常数perspZNear=0.5；
常数perspZFar=10；
const persp=m4.透视图（视野、纵横比、透视近、透视远）；
//生成正交视图的大小是任意的。
//这里我们选择地面的单位数量
//远离顶部透视相机
地上恒高至Pview=7；
屏幕上的常数halfsizetofit=地面上到pview的高度*Math.tan（fov/2）；
const top=-halfsizetofit屏幕显示；
const-bottom=+halfsizetofit屏幕；
const left=顶部*侧面；
const right=底部*侧面；
常数正交=0.5；
常数正交法=10；
常量正交=m4.ortho（左、右、上、下、正交、正交、正交）；
让有机玻璃爬上去；
让我们共同努力；
开关（settings.projectionMode）{
案例0://2d
perspMixAmount=0；
打破
案例1://3d
perspMixAmount=1；
打破
案例2://动画
perspMixAmount=Math.sin（时间）*.5+.5；
打破
}
开关（设置.cameraMode）{
案例0://顶部
camMixAmount=0；
打破
案例1://角度
camMixAmount=1；
打破
案例2://动画
camMixAmount=数学sin（时间）*.5+.5；
打破
}
常量投影=[]；
for（设i=0；i<16；++i）{
投影[i]=lerp（正交[i]，persp[i]，perspMixAmount）；
}
常数perspEye=[1,4，-6]；
常量perptarget=[0,0,0]；
constperspup=[0,1,0]；
常数正交眼=[0，地上到pview的高度，0]；
常量正交目标=[0,0,0]；
常数orthoUp=[0,0,1]；
const-eye=v3.lerp（正交眼、有机玻璃眼、camMixAmount）；
const target=v3.lerp（正交目标、透视目标、camMixAmount）；
const up=v3.lerp（正交up、perspUp、camMixAmount）；
常量摄影机=m4。注视（眼睛、目标、向上）；
常量视图=m4。反向（摄像头）；
const viewProjection=m4.乘法（投影，视图）；
总账使用程序（programInfo.program）；
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
常数t=时间*.1；
for（设z=-1；z{
元素addEventListener（'change'，e=>{
如果（例如，选中目标）{
设置[属性]=parseInt（即target.value）；
}
});
});
}
函数lerp（a、b、l）{
返回a+（b-a）*l；
}

body{margin:0；}
画布{显示：块；宽度：100vw；高度：100vh；}
#ui{
位置：绝对位置；
左：10px；
顶部：10px；
z指数：2；
背景：rgba（255，255，255，0.9）；
填充：.5em；
}

投影：
正字法
观点
有生气的
摄像机：
顶部
角
有生气的
视野[]

Ps：这是从另一个问答中复制的。op更改了原始问题，使此答案与编辑的问题无关。看起来其他人可能会觉得这很有用，所以把它复制到这里

const cameraPosition = [x, groundHeight + distanceAboveGround, z];
const target = [x, groundHeight, z];
const up = [0, 0, 1];
const camera = someLookAtFunction(camearPosition, target, up);