WebGL等距投影 [英] WebGL Isometric projection

问题描述

好的，这里要疯了.我正在做一些WebGL，并且正在尝试制作一个等距的多维数据集.我不想使用Three.js.我想首先了解我的代码出了什么问题.我一直在研究，发现唯一的教程似乎是针对OpenGL

Alright- going nuts here. I'm doing some WebGL and I'm trying to make an isometric cube. I don't want to use Three.js. I want to first understand what is going wrong in my code. I've been researching and the only tutorials I can find seem to be for OpenGL

无论如何-这是我的drawScene函数:

At any rate- here's my drawScene function:

function drawScene() {

this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, this.gl.viewportWidth / this.gl.viewportHeight, 0.1, 100.0, pMatrix);
mvMatrix = mat4.lookAt([0,0,40], [0, 0, 0], [0, 1, 0]);

_globalNext = this._first;

    while(_globalNext) {
    _globalNext.render();
    }

}

渲染功能为

function render() {

mvPushMatrix();

//transform. order matters.
mat4.translate(mvMatrix, [this._x, this._y, this._z]);
mat4.rotate(mvMatrix, 0.01745*this._rot, [this._axisX, this._axisY, this._axisZ]);
mat4.scale(mvMatrix,  [this._scaleX,this._scaleY,this._scaleZ]);

//bind the buffers.
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this._positionBuff);
this.gl.vertexAttribPointer(this._shader.vertexPositionAttribute, this._positionBuff.itemSize,   this.gl.FLOAT, false, 0, 0);

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this._colorBuff);
this.gl.vertexAttribPointer(this._shader.vertexColorAttribute, this._colorBuff.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this._indexBuff);
this.setMatrixUniforms(this.gl);
this.gl.drawElements(this.gl.TRIANGLES, this._indexBuff.numItems, this.gl.UNSIGNED_SHORT, 0);

    if(this._usePopper == false) {
    mvPopMatrix();
    } 

_globalNext = this._nextSib;
}

行人公平.我用它来画立方体.无论如何，在OpenGL示例中，它们似乎取消了透视功能，但是在这里，如果我将其省略，则我的场景是空白的.我知道lookAt函数可以正常工作，并且我必须对透视矩阵执行某事.一点帮助将不胜感激.谢谢！

Fairly pedestrian. I'm using it to draw cubes. Anyway, in the OpenGL examples they seem to do away with the perspective function, but here if I leave it out, my scene is blank. I know that the lookAt function is working properly, and I have to do something with the perspective matrix. A little help would be appreciated. Thank you!

推荐答案

投影矩阵所做的全部工作就是将场景的坐标系映射到X和Y轴上的[-1，1]范围，该范围是在将片段渲染到窗口时使用.可以以直接渲染到[-1，1]空间的方式构造场景，在这种情况下，不需要投影矩阵(这可能就是您在示例中省略了它所指的内容，但是通常不是这种情况.

All that the projection matrix does is map your scene's coordinate system to a [-1, 1] range on the X and Y axes, which is the space that is used when rendering fragments to your window. It is possible to construct your scene in such a way that it renders to that [-1, 1] space directly, in which case no projection matrix is needed (which may be what you were referring to with the examples leaving it out, but this is typically not the case.

在将透视矩阵用作投影矩阵时，X和Y坐标将按Z值缩放，从而使它们具有深度外观.如果这种效果不是所希望的，则可以使用正交矩阵消除深度缩放，例如:

When using a perspective matrix as your projection matrix, the X and Y coordinates are scaled by the Z value, giving them an appearance of depth. If that effect is undesirable, you can eliminate the depth scaling by using an orthographic matrix, like so:

mat4.ortho(left, right, bottom, top, 0.1, 100.0, pMatrix);

什么是左/右/上/下取决于您，但是通常这些将以某种方式与WebGL视口的尺寸相对应.例如，如果您的WebGL窗口为640x480，则可以执行以下操作:

What left/right/top/bottom are is up to you, but typically these will correspond in some way with the dimensions of your WebGL viewport. For example, if your WebGL window was 640x480 you could do:

mat4.ortho(0, 640, 0, 480, 0.1, 100.0, pMatrix);

这将导致在(0，0)处放置的任何顶点都在窗口的左下角呈现，并且在(648，480)处放置的任何顶点都将在窗口的右上角呈现.这些顶点的z分量将无效.这是一种流行的技术，可用于渲染GUI元素，子图形或等距图形，就像您尝试做的那样.

Which would cause any vertex placed at (0, 0) to render in the bottom left corner of the window, and any vertex placed at the (648, 480) to render in the top right. The z component of those vertices would have no effect. This is a popular technique to use for rendering GUI elements, sprites, or isometric graphics like you are attempting to do.

希望有帮助！

这篇关于WebGL等距投影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！