Question

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

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

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

但是屏幕上的纹理缝很烦人。这是怎么发生的，我该如何解决？谢谢你们。

        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。

如何在WebGl中使用Cube Texture

0 个答案: