Using textures in WebGL

. , , .

::

//
//     .
//     -    .
//
function loadTexture(gl, url) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  //       ,
  //      .
  //        , 
  //     .   
  //    .
  const level = 0;
  const internalFormat = gl.RGBA;
  const width = 1;
  const height = 1;
  const border = 0;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]);  //  
  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                width, height, border, srcFormat, srcType,
                pixel);

  const image = new Image();
  image.onload = function() {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
                  srcFormat, srcType, image);

    //  WebGL1    ,    2,
    //       2,  ,  
    //    2   .
    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
       //    2.  MIP'.
       gl.generateMipmap(gl.TEXTURE_2D);
    } else {
       //     2.
       //  MIP'     
       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);
    }
  };
  image.src = url;

  return texture;
}

function isPowerOf2(value) {
  return (value & (value - 1)) == 0;
}

loadTexture() WebGL texture createTexture(). , texImage2D(). ( ) , .

, Image src , . , image.onload, . texImage2D(), . , , 2 .

WebGL1 , 2, NEAREST LINEAR , mipmap. CLAMP_TO_EDGE. , 2 , WebGL , mipmap REPEAT MIRRORED_REPEAT.

, .

UV- texParameteri(). , 2 (NPOT - non-power-of-two), , UV-, UV-, , .

//   gl.NEAREST  gl.LINEAR,   mipmap.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
//     s-.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
//     t-.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

, WebGL ( ). WebGL NPOT-, rgba(0,0,0,0).

loadTexture() main(). initBuffers(gl).

//  
const texture = loadTexture(gl, 'cubetexture.png');

. . , initBuffers().

  const textureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

  const textureCoordinates = [
    // Front
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    // Back
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    // Top
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    // Bottom
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    // Right
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
    // Left
    0.0,  0.0,
    1.0,  0.0,
    1.0,  1.0,
    0.0,  1.0,
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
                gl.STATIC_DRAW);

...
  return {
    position: positionBuffer,
    textureCoord: textureCoordBuffer,
    indices: indexBuffer,
  };

WebGL , , , .

textureCoordinates , . , 0.0 1.0. 0.0 1.0, .

, , WebGL .

, , .

, .

  const vsSource = `
    attribute vec4 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    varying highp vec2 vTextureCoord;

    void main(void) {
      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
      vTextureCoord = aTextureCoord;
    }
  `;

, , , , .

:

  const fsSource = `
    varying highp vec2 vTextureCoord;

    uniform sampler2D uSampler;

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

, ( ), vTextureCoord, ( ).

uniform-

uniform-,

  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
    },
    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
    },
  };

drawScene().

-, , , :

//  WebGL,      
{
    const num = 2; //     2 
    const type = gl.FLOAT; //      32 bit float
    const normalize = false; //  
    const stride = 0; //        
    const offset = 0; //       
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
    gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, num, type, normalize, stride, offset);
    gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
}

, , :

  //  WebGL,      0
  gl.activeTexture(gl.TEXTURE0);

  //     0
  gl.bindTexture(gl.TEXTURE_2D, texture);

  //  ,        0
  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

WebGL 8 ; gl.TEXTURE0. , 0. bindTexture(), TEXTURE_2D 0. , uSampler 0.

, texture drawScene().

drawScene(gl, programInfo, buffers, texture, deltaTime);
...
function drawScene(gl, programInfo, buffers, texture, deltaTime) {

.

|

-

- - . , CORS . . HTTP access control.

hacks.mozilla.org , CORS WebGL .

Tainted (--) 2D canvas WebGL. , 2D <canvas> "tainted", - .