【OPENGL&WEBGL】将OpenGL里的gluProject和gluUnProject函数web化

阳光穿透心脏的1/2处 2022-06-06 04:56 107阅读 0赞

## 前言 ##

最近的需求需要涉及到在web上实现各个矩阵的变换和逆变换，不过功能也仅限于此，没必要因为这个功能而引用three.js，所以就想着gluProject和gluUnProject两个函数在JavaScript上实现一遍，于是对照着这两个函数的源码进行改写。改写用到了矩阵向量库[glMatrix][]。

## gluProject和gluUnProject源码 ##

GLint GLAPIENTRY
    gluProject(GLdouble objx, GLdouble objy, GLdouble objz, 
              const GLdouble modelMatrix[16], 
              const GLdouble projMatrix[16],
                  const GLint viewport[4],
              GLdouble *winx, GLdouble *winy, GLdouble *winz)
    {
        double in[4];
        double out[4];
    
        in[0]=objx;
        in[1]=objy;
        in[2]=objz;
        in[3]=1.0;
        __gluMultMatrixVecd(modelMatrix, in, out);
        __gluMultMatrixVecd(projMatrix, out, in);
        if (in[3] == 0.0) return(GL_FALSE);
        in[0] /= in[3];
        in[1] /= in[3];
        in[2] /= in[3];
        /* Map x, y and z to range 0-1 */
        in[0] = in[0] * 0.5 + 0.5;
        in[1] = in[1] * 0.5 + 0.5;
        in[2] = in[2] * 0.5 + 0.5;
    
        /* Map x,y to viewport */
        in[0] = in[0] * viewport[2] + viewport[0];
        in[1] = in[1] * viewport[3] + viewport[1];
    
        *winx=in[0];
        *winy=in[1];
        *winz=in[2];
        return(GL_TRUE);
    }
    
    
    GLint GLAPIENTRY
    gluUnProject(GLdouble winx, GLdouble winy, GLdouble winz,
            const GLdouble modelMatrix[16],                     //注意：模型视图矩阵
            const GLdouble projMatrix[16],
                    const GLint viewport[4],
                GLdouble *objx, GLdouble *objy, GLdouble *objz)
    {
        double finalMatrix[16];
        double in[4];
        double out[4];
        //合并MVP矩阵
        __gluMultMatricesd(modelMatrix, projMatrix, finalMatrix);
    
        //MVP矩阵求逆矩阵
        if (!__gluInvertMatrixd(finalMatrix, finalMatrix)) return(GL_FALSE);
    
        in[0]=winx;
        in[1]=winy;
        in[2]=winz;
        in[3]=1.0;
    
        //从屏幕坐标变换为0到1之间的坐标
        /* Map x and y from window coordinates */
        in[0] = (in[0] - viewport[0]) / viewport[2];
        in[1] = (in[1] - viewport[1]) / viewport[3];
    
        //从0到1之间变换到-1到1.
        /* Map to range -1 to 1 */
        in[0] = in[0] * 2 - 1;
        in[1] = in[1] * 2 - 1;
        in[2] = in[2] * 2 - 1;
    
        //乘以MVP逆矩阵之后得到世界空间的坐标
        __gluMultMatrixVecd(finalMatrix, in, out);
    
        //从齐次坐标变换为笛卡尔坐标
        if (out[3] == 0.0) return(GL_FALSE);
        out[0] /= out[3];
        out[1] /= out[3];
        out[2] /= out[3];
    
        //将结果赋值。
        *objx = out[0];
        *objy = out[1];
        *objz = out[2];
        return(GL_TRUE);
    }

## JavaScript改写版本 ##

其实，如果懂渲染管线的知识，应该这两个函数的源码应该非常清晰易懂。如果看不懂，请先搞懂各个坐标转换的知识。  
下面是两个函数的JavaScript版本改写，要先下载glMatrix.js。

//将世界坐标转换为屏幕坐标。
            function project(objX, objY, objZ, modelviewMatrix, projectMatrix, viewport, winX, winY, winZ) { 
                var input = new Array(4);
                var output = new Array(4);
    
                input[0] = objX;
                input[1] = objY;
                input[2] = objZ;
                input[3] = 1.0;
    
                vec4.transformMat4(output, input, modelviewMatrix);//模型视图变换
                vec4.transformMat4(input, output, projectMatrix);//投影变换
    
                //透视除法，进入标准化设备坐标
                if (input[3] == 0.0) return;
                input[0] /= input[3];
                input[1] /= input[3];
                input[2] /= input[3];
    
                //将坐标由-1到1，转换到0-1
                input[0] = input[0] * 0.5 + 0.5;
                input[1] = input[1] * 0.5 + 0.5;
                input[2] = input[2] * 0.5 + 0.5;
    
                //将x,y转换到屏幕坐标
                input[0] = input[0] * viewport[2] + viewport[0];
                input[1] = input[1] * viewport[3] + viewport[1];
    
                winX = input[0];
                winY = input[1];
                winZ = input[2];
            }
    
    //将屏幕坐标转换为世界坐标。
            function Unproject(winX, winY, winZ, modelviewMatrix, projectMatrix, viewport, objX, objY, objZ) { 
                var finalMatrix = mat4.create();
                var input = new Array(4);
                var output = new Array(4);
    
    
                mat4.invert(modelviewMatrix, modelviewMatrix);
                mat4.invert(projectMatrix, projectMatrix);
                //合并MVP矩阵
                mat4.multiply(finalMatrix, modelviewMatrix, projectMatrix);
    
    
    
                input[0] = winX;
                input[1] = winY;
                input[2] = winZ;
                input[3] = 1.0;
    
                //从屏幕坐标变换为0到1之间的坐标
                input[0] = (input[0] - viewport[0]) / viewport[2];
                input[1] = (input[1] - viewport[1]) / viewport[3];
    
                //从0到1之间变换到-1到1之间
                input[0] = input[0] * 2 - 1;
                input[1] = input[1] * 2 - 1;
                input[2] = input[2] * 2 - 1;
    
                //乘以MVP逆矩阵之后得到世界空间的坐标
                vec4.transformMat4(output, input, finalMatrix);
                //从齐次坐标变换为笛卡尔坐标
                if (output[3] == 0.0) return;
                output[0] /= output[3];
                output[1] /= output[3];
                output[2] /= output[3];
    
                //将结果赋值。
                objX = output[0];
                objY = output[1];
                objZ = output[2];
            }

我自己写了个小的测试例子，大家如果感兴趣可以下载，自行打断点进行测试。  
[下载地址][Link 1]

[glMatrix]: http://glmatrix.net/
[Link 1]: https://github.com/hahahuahai/Coordinatetransformation_js/