为什么这表明WebGL是2D API而不是3D API？ [英] Why does this state that WebGL is a 2D API, not a 3D API?
本文介绍了为什么这表明WebGL是2D API而不是3D API？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们可以在WebGL顶点着色器和片段着色器中指定X，Y，Z坐标。我无法理解2D和3D图形API之间的区别。你能解释他们为什么说这是一个2D API吗？解析方案
WebGL是一个rasteration API而不是3D api。您必须提供投影坐标。这与Canvas没有什么不同。它只是更快。我们来比较一下。
以下是Canvas中的3D
window.onload = main;
function main（）{
var cubeVertices = [
-1，-1，-1，
1，-1，-1，
1，-1，
-1,1，-1，
-1，-1,1，
1，-1,1，
1,1， 1，
-1，1，1，
];
var indices = [
0,1，
1,2，
2,3，
3，0，
4,5，
5，6，
6，7，
7，4，
0,4，
1,5，
2,6，
3，7，
];
var canvas = document.getElementById（c）;
var ctx = canvas.getContext（2d）;
var clock = 0;
var then = Date.now（）* 0.001;
函数render（）{
var now = Date.now（）* 0.001;
时钟+ =现在 - 然后;
then = now;
var scale = 2;
ctx.clearRect（0，0，canvas.width，canvas.height）;
ctx.save（）;
ctx.translate（canvas.width / 2，canvas.height / 2）;
ctx.scale（canvas.width / scale，canvas.height / scale）;
ctx.lineWidth = scale / canvas.width;
ctx.strokeStyle =black;
var fieldOfView = Math.PI * 0.25;
var aspect = canvas.width / canvas.height;
var projection = m.perspective（fieldOfView，aspect，1，500）;
var radius = 5;
var eye = [
Math.sin（clock）* radius，
1，
Math.cos（clock）* radius];
var target = [0，0，0];
var up = [0，1，0];
var view = m.lookAt（eye，target，up）;
var worldViewProjection = m.multiplyMatrix（view，projection）;
drawLines（cubeVertices，indices，worldViewProjection）;
ctx.restore（）;
requestAnimFrame（render）;
}
render（）;
函数drawLines（cubeVertices，indices，worldViewProjection）{
ctx.beginPath（）;
//
//将点从3D转换为2D。
//
var points = [];
for（var ii = 0; ii< cubeVertices.length; ii + = 3）{
points.push（m.transformPoint（
worldViewProjection，
[cubeVertices [ii + 0]，cubeVertices [ii + 1]，cubeVertices [ii + 2]]））; （var ii = 0; ii< indices.length; ii + = 2）{
var p0 = points [indices [ii + 0]]的
}
;
var p1 = points [indices [ii + 1]];
ctx.moveTo（p0 [0]，p0 [1]）;
ctx.lineTo（p1 [0]，p1 [1]）;
}
ctx.stroke（）;
$ / code $ / pre
这里是WebGL中的同一个3D
< script>
window.onload = main;
function main（）{
var cubeVertices = [
-1，-1，-1，
1，-1，-1，
1，-1，
-1,1，-1，
-1，-1,1，
1，-1,1，
1,1， 1，
-1，1，1，
];
var indices = [
0,1，
1,2，
2,3，
3，0，
4,5，
5，6，
6，7，
7，4，
0,4，
1,5，
2,6，
3，7，
];
var canvas = document.getElementById（c）;
var gl = getWebGLContext（c）;
var clock = 0;
var then = Date.now（）* 0.001;
var program = createProgramFromScripts（
gl，[2d-vertex-shader，2d-fragment-shader]）;
gl.useProgram（program）;
var positionLoc = gl.getAttribLocation（program，a_position）;
var worldViewProjectionLoc =
gl.getUniformLocation（program，u_worldViewProjection）;
var buffer = gl.createBuffer（）;
gl.bindBuffer（gl.ARRAY_BUFFER，buffer）;
gl.bufferData（
gl.ARRAY_BUFFER，
new Float32Array（cubeVertices），
gl.STATIC_DRAW）;
gl.enableVertexAttribArray（positionLoc）;
gl.vertexAttribPointer（positionLoc，3，gl.FLOAT，false，0，0）;
var buffer = gl.createBuffer（）;
gl.bindBuffer（gl.ELEMENT_ARRAY_BUFFER，buffer）;
gl.bufferData（
gl.ELEMENT_ARRAY_BUFFER，
new Uint16Array（indices），
gl.STATIC_DRAW）;
函数render（）{
var now = Date.now（）* 0.001;
时钟+ =现在 - 然后;
then = now;
var scale = 4;
gl.clear（gl.COLOR_BUFFER_BIT）;
var fieldOfView = Math.PI * 0.25;
var aspect = canvas.width / canvas.height;
var projection = m.perspective（fieldOfView，aspect，0.0001，500）;
var radius = 5;
var eye = [
Math.sin（clock）* radius，
1，
Math.cos（clock）* radius];
var target = [0，0，0];
var up = [0，1，0];
var view = m.lookAt（eye，target，up）;
var worldViewProjection = m.multiplyMatrix（view，projection）;
gl.uniformMatrix4fv（
worldViewProjectionLoc，false，worldViewProjection）;
gl.drawElements（gl.LINES，indices.length，gl.UNSIGNED_SHORT，0）;
requestAnimFrame（render）;
}
render（）;
}
< / script>
<！ - 顶点着色器 - >
< script id =2d-vertex-shadertype =x-shader / x-vertex>
属性vec4 a_position;
uniform mat4 u_worldViewProjection;
void main（）{
//
//将点从3D转换为2D。
//
gl_Position = u_worldViewProjection * a_position;
}
< / script>
<！ - 片段着色器 - >
< script id =2d-fragment-shadertype =x-shader / x-fragment>
void main（）{
gl_FragColor = vec4（0,0,0,1）;
}
< / script>
如果您想要看到它们，请立即这是画布版本和这是webgl版本。
查看全文
