1

最近，我一直在从单个环境纹理中解压缩 6 张图像以渲染反射通道。

源图片

事实证明，在 webGl 中很难在这种工作中使用 texImage2D，因为 texImage2D 不提供 xoffset，也不提供 yoffset。授予 copyTexImage2D 和 texSubImage2D 确实提供了偏移参数，但是，通过使用这两个函数从未为我运行

最后，我通过将图像渲染到画布然后将画布传递给 texImage2D 找到了解决方案。 渲染结果

但是我在屏幕上出现了恼人的纹理接缝。这是怎么发生的，我该如何解决？多谢你们。

        var texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);



        var myCanvas = document.createElement("canvas");
        myCanvas.width = 512; 
        myCanvas.height = 512;
        var myCanvasContext = myCanvas.getContext("2d"); // Get canvas 2d context

        myCanvasContext.drawImage(_this._data.image, 1024, 512, 512,512,0,0,512,512);         
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);

        myCanvasContext.drawImage(_this._data.image, 0, 512, 512,512,0,0,512,512); 
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);

        myCanvasContext.drawImage(_this._data.image, 512, 1024, 512,512,0,0,512,512); 
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);

        myCanvasContext.drawImage(_this._data.image, 512,0, 512,512, 0,0,512,512); 
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);

        myCanvasContext.drawImage(_this._data.image, 512, 512,512,512,0,0,512,512); 
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);


        myCanvasContext.drawImage(_this._data.image, 1536, 512,512,512,0,0,512,512); 
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
        gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myCanvas);

_this._data.image 是环境图像；每个纹理块为 512X512。

4

0 回答 0