57 WebGL纹理贴图报错texture bound to texture unit 0 is not renderable.

最新推荐文章于 2024-07-12 11:42:37 发布

暮志未晚NAN

最新推荐文章于 2024-07-12 11:42:37 发布

阅读量1.1w

点赞数 1

分类专栏： WebGL 文章标签： webgl 纹理报错

本文链接：https://blog.csdn.net/qq_30100043/article/details/77885107

版权

WebGL 专栏收录该内容

58 篇文章 74 订阅

订阅专栏

案例查看地址：点击这里

简介问题

在本人刚学纹理渲染的时候，发现控制台经常提示这样的错误：

WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

上面的这句话说的是，纹理没有渲染成功。是因为你使用的图片的分辨率不属于2的幂数。
这句话是什么意思呢，就是说，你的图片的分辨率不是标准的2x2 4x4 8x8 16x16 32x32 64x64 128x128 256x256。。。这种分辨率的图片。
问题来了，我们正常的图片又不是全部都是这种格式的，那怎么办呢？
所以，我们使用webgl设置图形纹理的时候，在设置水平和垂直如何填充的时候，设置成水平和垂直拉伸，代码如下：

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

将这两个代码添加进入，就不会报错了。

代码案例

比如，我使用一张501x580的图片，这张图片肯定是不符合尺寸的。然后我使用我的代码导入webgl，渲染到一个正方形上面：
这里写图片描述
最后，我也成功的渲染出来了。下面附上全部代码，库文件已经引入，只需要自己修改一下图片地址就可以了。
ps：文件一定要在环境当中打开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            text-align: center;
        }

        #canvas {
            margin: 0;
        }
    </style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="800"></canvas>
</body>
<script src="https://johnson2heng.github.io/webgl-demo/lib/webgl-utils.js"></script>
<script src="https://johnson2heng.github.io/webgl-demo/lib/webgl-debug.js"></script>
<script src="https://johnson2heng.github.io/webgl-demo/lib/cuon-utils.js"></script>
<script src="https://johnson2heng.github.io/webgl-demo/lib/cuon-matrix.js"></script>
<script>
    /*第一部分顶点着色器接收顶点的纹理坐标，传递给片元着色器*/
    var VSHADER_SOURCE = "" +
        "attribute vec4 a_Position;\n" +//
        "attribute vec2 a_TexCoord;\n" +//
        "varying vec2 v_TexCoord;\n" +//
        "void main(){\n" +
        "   gl_Position = a_Position;\n" +
        "   v_TexCoord = a_TexCoord;\n" +//
        "}\n";

    var FSHADER_SOURCE = "" +
        "precision mediump float;\n" +//
        "uniform sampler2D u_Sampler;\n" +//
        "varying vec2 v_TexCoord;\n" +//
        "void main(){\n" +
        "   gl_FragColor = texture2D(u_Sampler,v_TexCoord);\n" +//
        "}\n";

    /*第二部分 main()方法 初始化着色器，设置顶点信息，调用配置纹理方法*/
    function main() {
        var canvas = document.getElementById("canvas");
        var gl = getWebGLContext(canvas);
        if(!gl){
            console.log("你的电脑不支持WebGL！");
            return;
        }
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log("初始化着色器失败！");
            return;
        }

        //设置顶点的相关信息
        var n = initVertexBuffers(gl);

        if(n < 0){
            console.log("无法获取到点的数据");
            return;
        }

        //配置纹理
        if(!initTextures(gl,n)){
            console.log("无法配置纹理");
            return;
        }

    }

    /*第三部分 initVertexBuffers() 设置顶点坐标和纹理坐标 调用initTextures()进行下一步处理*/
    function initVertexBuffers(gl) {
        var verticesSizes = new Float32Array([
            //四个顶点的位置和纹理数据
            -0.5,0.5,0.0,1.0,
            -0.5,-0.5,0.0,0.0,
            0.5,0.5,1.0,1.0,
            0.5,-0.5,1.0,0.0
        ]);

        var n = 4;
        var vertexSizeBuffer = gl.createBuffer();
        if(!vertexSizeBuffer){
            console.log("无法创建缓冲区");
            return -1;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexSizeBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,verticesSizes,gl.STATIC_DRAW);
        var a_Position = gl.getAttribLocation(gl.program,"a_Position");
        if(a_Position < 0){
            console.log("无法获取到存储位置");
            return;
        }

        //获取数组一个值所占的字节数
        var fsize = verticesSizes.BYTES_PER_ELEMENT;

        //将顶点坐标的位置赋值
        gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,fsize*4,0);
        gl.enableVertexAttribArray(a_Position);

        //将顶点的纹理坐标分配给a_TexCoord并开启它
        var a_TexCoord = gl.getAttribLocation(gl.program,"a_TexCoord");
        if(a_TexCoord < 0){
            console.log("无法获取到存储位置");
            return;
        }

        //将纹理坐标赋值
        gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,fsize*4,fsize*2);
        gl.enableVertexAttribArray(a_TexCoord);
        return n;
    }

    /*第四部分 initTextures() 创建纹理对象 并调用纹理绘制方法*/
    function initTextures(gl,n) {
        var texture = gl.createTexture();//创建纹理对象
        if(!texture){
            console.log("无法创建纹理对象");
            return;
        }

        //获取u_Sampler的存储位置
        var u_Sampler = gl.getUniformLocation(gl.program,"u_Sampler");
        if(u_Sampler < 0){
            console.log("无法获取变量的存储位置");
            return;
        }

        //创建Image对象，并绑定加载完成事件
        var image = new Image();
        image.onload = function () {
            loadTexture(gl,n,texture,u_Sampler,image);
        };

        image.src = "../image/door/001.png";
        return true;
    }

    /*第五部分 设置纹理相关信息供WebGL使用，并进行绘制*/
    function loadTexture(gl,n,texture,u_Sampler,image) {
        //对纹理图像进行y轴反转
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
        //开启0号纹理单元
        gl.activeTexture(gl.TEXTURE0);
        //向target绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D,texture);
        //配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        //配置纹理图像
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
        //将0号纹理传递给着色器
        gl.uniform1i(u_Sampler,0);

        //绘制
        gl.clearColor(0.0,0.0,0.0,1.0);

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_STRIP,0,n);
    }

</script>
</html>