Question

我正在将图像加载到画布上。我想在画布上加载同一图像大约10000次。我的最终目标是在webgl中逐帧渲染1920 * 1080视频，我想检查一下Fps。我是webgl的新手，我使用过drawArraysInstanced方法渲染矩形10000次并从图像设置纹理坐标。但显示出实例drawArrays不是浏览器中的函数

    const img = new Image();

     img.src = "/A.jpg";
     img.onload = function (){

   //1.Get rendering context for webgl 
   var canvas = document.getElementById('game-surface');
  var gl = canvas.getContext("webgl");
 if(!gl)
   {
       alert("No support for webgl");
    }


       //2.define geometry and create buffer

         var  vertices = //Vertex info of triangle in JS Array
  [
      //X,   Y  
       -1,  -1,   
        -1,   1, 
          1,   1, 


     -1,  -1,
     1,   1,
      1,  -1 
    ]
 canvas.width = img.naturalWidth;
 canvas.height = img.naturalHeight;


 var vertex_buffer = gl.createBuffer();//empty buffer created 
  gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);//bind the buffer with 
   enum signifying it contains vertex info
   gl.bufferData(gl.ARRAY_BUFFER,new       
  Float32Array(vertices),gl.STATIC_DRAW);//pass the actual JS array into 
      32bit array compatible for openGl to process vertex info in GPU


      //3.create and complile shader program

  var vertexShader = gl.createShader(gl.VERTEX_SHADER);//Create a vertex 
  shader 
   var vertexShaderCode =
   'attribute vec2 coordinates;' + 
   'varying vec2 texCoords;'+
   'void main(void) {' + 'texCoords = (coordinates + 1.0)/2.0 ; 
    texCoords.y = 1.0 - texCoords.y ; gl_Position = vec4(coordinates,0.0, 
    1.0);' + '}';//in a  string format store the GLSL code

    gl.shaderSource(vertexShader,vertexShaderCode);//link the vertex shader with source code
   gl.compileShader(vertexShader);//compile it

  if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS))//check if 
 compiled successfully
 {
      console.error('ERROR compiling vertex 
     shader!',gl.getShaderInfoLog(vertexShader));
     return;
 }

   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//Create a 
 fragment shader
var fragmentShaderCode = 'precision mediump float;uniform sampler2D 
 textureSampler;varying vec2 texCoords ; void main(void) {' + 
'gl_FragColor = texture2D(textureSampler,texCoords);' + '}';;//in a  
string format store the GLSL code

gl.shaderSource（fragmentShader，fragmentShaderCode）; //链接片段带源代码的着色器 gl.compileShader（fragmentShader）; //编译它

  if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS))//check if 
  compiled successfully
{
     console.error('ERROR compiling fragment 
  shader!',gl.getShaderInfoLog(fragmentShader)); 
    return;
 }

   var shaderProgram = gl.createProgram();//create a joint shader program 
  for using both the shader
  gl.attachShader(shaderProgram,vertexShader);//attach vertexshader in 
 the program
   gl.attachShader(shaderProgram,fragmentShader);//attach fragmentshader 
  in the program
 gl.linkProgram(shaderProgram);//link the shader
 gl.useProgram(shaderProgram);//once linked specify the program to be used


 //4.Associate the buffer to the shader program 

  var coordattribLocation = 
   gl.getAttribLocation(shaderProgram,"coordinates");//get the location 
of each attribute

// var colorattribLocation = gl.getAttribLocation（shaderProgram，“ vertColor”）;

 gl.vertexAttribPointer(
  coordattribLocation,
2,//Number of elements per attribute
gl.FLOAT,//Type of elements
false,
0, // Size of an individual vertex
0 //offset from the beginning of single vertex to the attribute
);

gl.enableVertexAttribArray（coordattribLocation）;

 gl.clearColor(1.0, 0.8, 0.1, 1.0);//color to be used in canvas

背景 gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）;

 const texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);

///将图像上传到屏幕

 gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,img);

 //PARAMETER SET TO RENDER ANY SIZE
  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.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);






   //5.Draw the object
 gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)








 gl.drawArraysInstanced(gl.TRIANGLES,
     0, 
   6,
   100

   )

}

我只想渲染10000次或更多次纹理。请建议我一种有效的方法

如何在WebGL中多次渲染同一张图片？

0 个答案: