Fatal编程技术网
  • webgl/
  • WebGL：简单纹理渲染问题（“绘制到比视口矩形小的目标矩形”。”

WebGL：简单纹理渲染问题（“绘制到比视口矩形小的目标矩形”。”

webgl

WebGL：简单纹理渲染问题（“绘制到比视口矩形小的目标矩形”。”,webgl,rendering,texture2d,Webgl,Rendering,Texture2d,我目前正在尝试用WebGL渲染一个简单的纹理。 这基本上是一个来自普通系统OpenGL的端口。 它似乎不起作用，我真的不知道出了什么问题，因为调试这些东西似乎也很困难 但我在Firefox上遇到了一个错误： “错误：WebGL:抽屉元素：绘制到小于视口矩形的目标矩形。（此警告仅给出一次）” 视口/投影矩阵/位置似乎是正确的，为什么会出现这种错误 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g

我目前正在尝试用WebGL渲染一个简单的纹理。 这基本上是一个来自普通系统OpenGL的端口。 它似乎不起作用，我真的不知道出了什么问题，因为调试这些东西似乎也很困难

但我在Firefox上遇到了一个错误： “错误：WebGL:抽屉元素：绘制到小于视口矩形的目标矩形。（此警告仅给出一次）”

视口/投影矩阵/位置似乎是正确的，为什么会出现这种错误

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Test</title>
  <style>
  .canstyle {
    width: 800px;
    height: 600px;
  }
  </style>
</head>
<body>
  <canvas id="canvas0" class="canstyle">
  </canvas>
  <script type='text/javascript'>
  var vertexShaderSrc = `
            precision mediump float;

            attribute vec2 aVertexPosition;
            attribute vec2 aTextureCoord;

            uniform mat3 projectionMatrix;

            varying vec2 vTextureCoord;

            void main() {
               gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
               vTextureCoord = aTextureCoord;
            }
  `;

  var fragmentShaderSrc = `

          precision mediump float;

          varying vec2 vTextureCoord;

          uniform sampler2D uSampler;

          void main() {
            gl_FragColor = texture2D(uSampler, vTextureCoord);
          }
  `;

  var img1 = new Image(); // HTML5 Constructor
  img1.src = 'bunny.png';
  img1.alt = 'alt';
  img1.onload = function() {
    render();
  }

  function render() {
    var canvas = document.getElementById("canvas0");
    var gl = canvas.getContext("webgl", {
      alpha: false,
      depth: false,
      stencil: true,
      premultipliedAlpha: false
    });

    var funcs = Object.getOwnPropertyNames(gl.__proto__).filter(function(p) {
      return typeof gl[p] === 'function';
    });

    function HookFunction(func, callback) {
      return function() {
        var res = func.apply(this, arguments);
        callback(arguments);
        return res;
      };
    }

    var endFrame = false;
    var afterFrame = 8;
    funcs.forEach(function(funcName) {
      gl[funcName] = HookFunction(gl[funcName], function(args) {
        if (endFrame) {
          if (afterFrame == 0) {
            return;
          }
          afterFrame -= 1;
        }
        if (funcName == "drawElements") {
          endFrame = true;
        }
        var KK = [];
        var dumpArr = [];
        for (var item in args) {
          var arg = args[item];
          if (arg === null) {
            KK.push("null");
          } else if (arg instanceof ArrayBuffer || arg instanceof Float32Array || arg instanceof Uint8Array || arg instanceof Uint16Array) {
            dumpArr.push(new Uint8Array(arg.buffer));
          } else {
            KK.push(arg);
          }
        }
        console.log("WebGL Interceptor: ", funcName, "(", KK.join(', '), ")");
        if (dumpArr.length) {
          console.log(dumpArr);
        }

      });
    });

    gl.disable(gl.DEPTH_TEST);
    gl.disable(gl.CULL_FACE);
    gl.disable(gl.STENCIL_TEST);
    gl.enable(gl.BLEND);
    gl.enable(gl.SCISSOR_TEST);

    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    gl.viewport(0, 0, 800, 600);
    gl.scissor(0, 0, 800, 600);

    gl.clearColor(0.06274509803921569, 0.6, 0.7333333333333333, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var vertexDataCount = 4;
    var vertexByteSize = vertexDataCount * 4;
    var BatchSize = 2000;

    var totalIndices = BatchSize * 6;

    var vertices = new ArrayBuffer(BatchSize * vertexByteSize * 4);
    var indices = new ArrayBuffer(totalIndices * 2);

    var indicesUint16View = new Uint16Array(indices);
    var verticesFloat32View = new Float32Array(vertices);

    var j = 0;
    for (var i = 0; i < totalIndices; i += 6, j += 4) {
      indicesUint16View[i + 0] = j + 0;
      indicesUint16View[i + 1] = j + 1;
      indicesUint16View[i + 2] = j + 2;
      indicesUint16View[i + 3] = j + 0;
      indicesUint16View[i + 4] = j + 2;
      indicesUint16View[i + 5] = j + 3;
    }

    var indexBuffer = gl.createBuffer();
    var vertexBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicesUint16View, gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, verticesFloat32View, gl.DYNAMIC_DRAW);

    function compileShader(shaderSource, shaderType) {
      var shader = gl.createShader(shaderType);
      gl.shaderSource(shader, shaderSource);
      gl.compileShader(shader);
      var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
      if (!success) {
        throw "could not compile shader:" + gl.getShaderInfoLog(shader);
      }
      return shader;
    }

    function createProgram(vertexShader, fragmentShader) {
      var program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      var success = gl.getProgramParameter(program, gl.LINK_STATUS);
      if (!success) {
        throw ("program filed to link:" + gl.getProgramInfoLog(program));
      }
      return program;
    }

    var vertexShad = compileShader(vertexShaderSrc, gl.VERTEX_SHADER);
    var fragShad = compileShader(fragmentShaderSrc, gl.FRAGMENT_SHADER);

    var shaderProg = createProgram(vertexShad, fragShad);
    gl.useProgram(shaderProg);

    var vertLoc = gl.getAttribLocation(shaderProg, "aVertexPosition");
    var texCoordLoc = gl.getAttribLocation(shaderProg, "aTextureCoord");

    gl.enableVertexAttribArray(vertLoc);
    gl.enableVertexAttribArray(texCoordLoc);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.vertexAttribPointer(vertLoc, 2, gl.FLOAT, false, vertexByteSize, 0);
    gl.vertexAttribPointer(texCoordLoc, 2, gl.FLOAT, false, vertexByteSize, 2 * 4);


    var currIndex = 0;
    verticesFloat32View[currIndex++] = 174; // pos
    verticesFloat32View[currIndex++] = 113; // pos
    verticesFloat32View[currIndex++] = 0; // UV
    verticesFloat32View[currIndex++] = 0; // UV

    verticesFloat32View[currIndex++] = 226; // pos
    verticesFloat32View[currIndex++] = 113; // pos
    verticesFloat32View[currIndex++] = 1; // UV
    verticesFloat32View[currIndex++] = 0; // UV

    verticesFloat32View[currIndex++] = 226; // pos
    verticesFloat32View[currIndex++] = 187; // pos
    verticesFloat32View[currIndex++] = 1; // UV
    verticesFloat32View[currIndex++] = 1; // UV

    verticesFloat32View[currIndex++] = 174; // pos
    verticesFloat32View[currIndex++] = 187; // pos
    verticesFloat32View[currIndex++] = 0; // UV
    verticesFloat32View[currIndex++] = 1; // UV

    gl.bufferSubData(gl.ARRAY_BUFFER, 0, verticesFloat32View);

    // | 2 / Width | 0          | -1
    // | 0         | 2 / Height | -1
    // | 0         | 0          | 1
    var rawProjectionMat = new Float32Array([
      0.00249999994, 0, 0, 0, -0.00333333341, 0, -1, 1, 1
    ]);

    gl.uniformMatrix3fv(gl.getUniformLocation(shaderProg, "projectionMatrix"), false, rawProjectionMat);

    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
    gl.activeTexture(gl.TEXTURE0);

    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);

    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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img1);

    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

  }
  </script>
</body>
</html>


试验
康斯泰尔先生{
宽度：800px；
高度：600px；
}
变量vertexShaderSrc=`
精密中泵浮子；
属性向量2；
属性向量2编码；
均匀mat3投影矩阵；
可变向量2 vTextureCoord；
void main（）{
gl_位置=vec4（（投影矩阵*vec3（1.0））.xy，0.0，1.0）；
vTextureCoord=ATextureCord；
}
`;
var fragmentShaderSrc=`
精密中泵浮子；
可变向量2 vTextureCoord；
均匀取样器；
void main（）{
gl_FragColor=纹理2d（uSampler，vTextureCoord）；
}
`;
var img1=新图像（）；//HTML5构造函数
img1.src='bunny.png'；
img1.alt='alt'；
img1.onload=函数（）{
render（）；
}
函数render（）{
var canvas=document.getElementById（“canvas0”）；
var gl=canvas.getContext（“webgl”{
阿尔法：错，
深度：假，
模具：是的，
前乘性阿尔法：假
});
var funcs=Object.getOwnPropertyNames（gl.\uuuu proto\uuuu）.filter（函数（p）{
总账返回类型[p]=“函数”；
});
函数HookFunction（func，回调）{
返回函数（）{
var res=func.apply（这是参数）；
回调（参数）；
返回res；
};
}
var-endFrame=false；
var afterFrame=8；
funcs.forEach（函数（funcName）{
gl[funcName]=钩子函数（gl[funcName]，函数（args）{
如果（结束帧）{
如果（后帧==0）{
返回；
}
后帧-=1；
}
if（funcName==“抽屉元素”）{
endFrame=true；
}
var KK=[]；
var dumpArr=[]；
for（参数中的变量项）{
var arg=args[项目]；
如果（arg==null）{
KK.推送（“空”）；
}else if（arg instanceof ArrayBuffer | | arg instanceof Float32Array | | | arg instanceof Uint8Array | | arg instanceof Uint16Array）{
dumpArr.push（新的Uint8Array（arg.buffer））；
}否则{
KK.推力（arg）；
}
}
log（“WebGL拦截器：”，funcName，”（“，KK.join（“，”），”））；
if（转储阵列长度）{
控制台日志（dumpArr）；
}
});
});
gl.禁用（gl.深度测试）；
总账禁用（总账消隐面）；
总帐禁用（总帐模板测试）；
总账启用（总账混合）；
总帐启用（总帐剪刀测试）；
gl.bindFramebuffer（gl.FRAMEBUFFER，null）；
总图视口（0,0,800,600）；
gl.剪刀（0,0,800,600）；
gl.clearColor（0.06274509803921569,0.6,0.7333333,1）；
总账清除（总账颜色缓冲位）；
变量vertexDataCount=4；
var vertexByteSize=vertexDataCount*4；
var BatchSize=2000；
var TotalIndexes=BatchSize*6；
var顶点=新的ArrayBuffer（BatchSize*vertexByteSize*4）；
var指数=新阵列缓冲（总指数*2）；
var指标UINT16视图=新UINT16阵列（指标）；
var verticesFloat32View=新的Float32Array（顶点）；
var j=0；
对于（var i=0；i<canvas width="800" height="600"></canvas>

someCanvasElement.width = 800;
someCanvasElement.height = 600;