小编use*_*rJS的帖子

在webgl中转换法线

我有2点法线云.在webgl画布上渲染点之前,我需要将PointCloud1转换为与PointCloud2相同的坐标空间,并且我有转换矩阵T,(rot,scale,trans),它完美地适用于这些点.我想对法线做同样的事情.阅读了一些教程后,我尝试了这个:

n'=转置(反向(T))*n

我理解这背后的数学,但有些教程提到我应该只采用T中的上3*3矩阵.我不确定我是否应该做

  1. 乘以3*3 T,n = [abc]或
  2. 乘以4*4 T,n = [abc 0].

如果我使用第二个选项,我会得到n'= [a'b'c'd'].我应该将此向量除以d'以使其均匀吗?

opengl-es coordinate-systems webgl coordinate-transformation

2
推荐指数
1
解决办法
525
查看次数

文本渲染WebGL

我试图给2D图像中的不同元素提供文本标签.通过从3d投影获得2D元素.我有一些我希望包含为文本标签的元素ID.我已经尝试了2天而没有运气.我不知道出了什么问题.这是执行渲染的函数:

function drawOverlayTriangles()
{
    if (overlay.numElements <= 0)
    return;

    gl.enableVertexAttribArray(shaderProgram.aVertexPosition);
    gl.enableVertexAttribArray(shaderProgram.aVertexColor);

    // Turn off textures
    //gl.vertexAttrib1f(shaderProgram.aHasTexture, 0.0);

    // Upload Projection, ModelView matrices
    gl.uniformMatrix4fv(shaderProgram.uMVMatrix, false, pMVMatrix);
    gl.uniformMatrix4fv(shaderProgram.uPMatrix, false, perspM);

    for (var i = 0; i < overlay.numElements; i++) {
        // Upload overlay vertices                      
        gl.bindBuffer(gl.ARRAY_BUFFER, overlayVertices[i]);
        gl.vertexAttribPointer(shaderProgram.aVertexPosition, 3, gl.FLOAT, false, 0, 0);

        // Upload overlay colors
        gl.bindBuffer(gl.ARRAY_BUFFER, overlayTriangleColors[i]);    
        gl.vertexAttribPointer(shaderProgram.aVertexColor, 4, gl.FLOAT, false, 0, 0);

        var canvas = document.createElement("canvas");
        canvas.setAttribute("id","canvas");
        canvas.width="512";
        canvas.height="512";
        document.body.appendChild(canvas);

        var ctx = canvas.getContext('2d');
        var text = "element";//overlay.elementIDs[i];

        ctx.beginPath();
        ctx.clearRect(0,0,300,300); …
Run Code Online (Sandbox Code Playgroud)

html javascript textures webgl

1
推荐指数
1
解决办法
3576
查看次数