javascript - 在 Javascript 中模拟texture2D

Question

我编写了一个着色器，通过高度图纹理转换顶点位置。由于几何图形是在顶点着色器上进行转换的，因此如果不对着色器进行逆向工程以将顶点置于其转换后的位置，我就无法在 javascript 中使用传统的拾取算法。我对 GLSL 中的texture2D 函数的理解似乎有问题。如果忽略纹理环绕，您将如何在 JS 中模拟相同的功能？这就是我目前的做法:

    /**
    * Gets the normalized value of an image's  pixel from the x and y coordinates. The x and y coordinates expected here must be between 0 and 1
    */
    sample( data, x, y, wrappingS, wrappingT )
    {
        var tempVec = new Vec2();

        // Checks the texture wrapping and modifies the x and y accordingly
        this.clampCoords( x, y, wrappingS, wrappingT, tempVec );

        // Convert the normalized units into pixel coords
        x = Math.floor( tempVec.x * data.width );
        y = Math.floor( tempVec.y * data.height );

        if ( x >= data.width )
            x = data.width - 1;
        if ( y >= data.height )
            y = data.height - 1;

        var val= data.data[ ((data.width * y) + x) * 4 ];

        return val / 255.0;
    }

这个函数似乎产生了正确的结果。我有一个 409 像素宽 x 434 像素高的纹理。我将图像涂成黑色，除了最后一个像素涂成红色(408、434)。所以当我在 JS 中调用采样器函数时:

this.sample(imgData, 0.9999, 0.9999. wrapS, wrapT)

结果是 1。对我来说这是正确的，因为它指的是红色像素。

但这似乎不是 GLSL 给我的。在 GLSL 中我使用这个(作为测试):

float coarseHeight = texture2D( heightfield, vec2( 0.9999, 0.9999 ) ).r;

我希望coarseHeight也应该是1 - 但它是0。我不明白这一点...有人可以让我深入了解我哪里出错了吗？

Answer 1

您可能已经注意到任何渲染的纹理都是镜像的。

OpenGL 并且 WebGL 纹理原点位于左下角，因为使用 Canvas 2d 方法加载时的缓冲区数据具有左上角起源。

因此，您要么需要重写缓冲区，要么反转您的 v 坐标。