Criar uma textura WebGL a partir de uma foto

Use qualquer foto para criar uma textura WebGL para o exemplo do Warp.

Carregando a foto

O WebGL usa fotos para criar texturas que tornam as formas mais realísticas ou úteis. Embora você possa usar qualquer tamanho de foto no exemplo do Warp, o WebGL precisa da imagem em um tamanho definido para funcionar. Para dimensionar a imagem que você escolher, o exemplo usa um processo de três etapas para criar uma textura WebGL.

O código e as etapas a seguir descrevem como o exemplo do Warp usa comandos de canvas 2D para redimensionar uma imagem antes de carregá-la como uma textura.

Esse código obtém a imagem, dimensionando-a e colocando-a em uma canvas 2D.


// load a the user's image.
this.loadImageX = function (dataURL) {
    var image = new Image();
    
    image.onload = function () {
        renderer.loadImage2(image);
    }

    image.src = dataURL;
}

// This function does the heavy lifting of creating the texture from the image.
this.loadImage2 = function (image) {
    // Convert the image to a square image via the temporary 2d canvas. 
    var canvas = document.getElementById("2dcanvas");
    var ctx = canvas.getContext("2d");
    var canvHeight = document.getElementById("2dcanvas").height;

    var x = 0;
    var y = 0;
    var xx = canvHeight;
    var yy = canvHeight;

    ctx.clearRect(0, 0, canvHeight, canvHeight);
    // If image isn't square, adjust width, height, and origin so it's centered.
       if (image.width < image.height) {
        // Change origin and dimensions if the image isn't square.
        // Change x, xx
        xx = image.width / image.height * canvHeight;
        x = (canvHeight - xx) / 2;
    }
    if (image.width > image.height) {
        // Change y, yy 
      yy = image.height / image.width * canvHeight;
      y = (canvHeight - yy) / 2;
    }

// Put the image on the canvas, scaled using xx & yy.
    ctx.drawImage(image, 0, 0, image.width, image.height, x, y, xx, yy);


  1. Crie um objeto Image e um evento para chamar a função loadImage2 quando o carregamento da foto terminar.
  2. Quando o carregamento da imagem é concluído, ele chama loadImage2.
  3. LoadImage2 obtém a canvas 2D do código HTML usando document.getElementById.
  4. Usando a canvas, a função obtém o contexto 2D do elemento de canvas usando getContext("2d").
  5. Obtenha a altura da tela e crie quatro variáveis; origem x, origem y, altura e largura, que são usadas para colocar a imagem na canvas. Como a canvas é quadrada, a altura é usada tanto para altura quanto para largura.
  6. Limpe a canvas usando clearRect.
  7. Obtenha a maior dimensão da imagem. Se a imagem não for quadrada, calcule uma altura ou largura dimensionada e um deslocamento para a canvas no lado mais curto.
  8. Coloque a imagem na canvas usando drawImage. O método drawImage coloca a imagem na canvas em uma origem específica e a escala automaticamente com base na origem, na altura e na largura especificadas para a canvas.

LoadImage2 cria um objeto de textura e carrega a imagem da canvas usando as seguintes etapas:


// Create a texture object that will contain the image.
var texture = gl.createTexture();

// Bind the texture the target (TEXTURE_2D) of the active texture unit.
gl.bindTexture(gl.TEXTURE_2D, texture);

// Flip the image's Y axis to match the WebGL texture coordinate space.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    
// Set the parameters so we can render any size image.        
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);

  // Upload the resized canvas image into the texture.
//    Note: a canvas is used here but can be replaced by an image object. 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);


  1. Obtenha o contexto WebGL (gl) e crie um novo objeto WebGLTexture usando createTexture. CreateTexture aceita o objeto WebGLTexture e o tipo de textura a ser usado (TEXTURE_2D ou TEXTURE_CUBE_MAP). O exemplo do Warp usa TEXTURE_2D.
  2. Associe a textura para torná-la ativa usando bindTexture. Tornar essa textura ativo faz com que ela seja usada por operações de textura subsequentes.
  3. Mude o sistema de coordenadas da textura para que ele corresponda ao sistema de coordenadas da textura WebGL com pixelStorei. Usar o sinalizador UNPACK_FLIP_Y_WEBGL muda o eixo Y de zero no canto esquerdo superior para zero no canto inferior esquerdo. Veja a nota abaixo.
  4. Use texParameteri com TEXTURE_WRAP_S e TEXTURE_WRAP_T para especificar como o WebGL deve lidar com a quebra automática de uma imagem. Essas constantes instruem o WebGL como preencher áreas ao lado ou na parte superior e na parte inferior ao preencher uma área maior do que a da imagem. O parâmetro CLAMP_TO_EDGE instrui ao WebGL para colocar a imagem lado a lado. Por exemplo, se você obtiver uma amostra da imagem na coordenada 1.5, isso será o mesmo de fazer uma amostragem em 0.5.
  5. Use também texParameteri com as constantes TEXTURE_MIN_FILTER e TEXTURE_MAX_FILTER para especificar como as cores são calculadas. Usar o sinalizador LINEAR instrui o WebGL a usar os quatro pixels mais próximos para calcular a cor de pixels novos conforme a textura se expande para além do tamanho inicial.
  6. A imagem é carregada na textura usando texImage2D com o tipo de textura de destino (TEXTURE_2D), o nível (sempre 0), o formato interno e o formato de imagem (ambos RGBA), o tipo de dados da textura (UNSIGNED_BYTE) e, finalmente, a imagem (nesse caso, a canvas 2D).
  7. Limpe a canvas com clearRect.

Observação  

Texturas usam um sistema chamado de sistema de coordenadas s/t, com origem de 0,0, no canto inferior esquerdo. O eixo s segue horizontalmente, enquanto o eixo t segue verticalmente. Pense nisso como ir para o lado e ir para cima... você verá isso mais tarde. Usar a nomeação s/t a diferencia do sistema de coordenadas x/y/z que WebGL usa em outros contextos. Ao copiar uma imagem para uma textura, você pode definir texImage2D para inverter a imagem quando está é transferido para a GPU usando pixelStorei. Para alternar a foto de um sistema de coordenadas no qual o canto superior esquerdo é a origem 0,0 para o sistema s/t, no qual a origem 0,0 está no canto inferior esquerdo, chame pixelStorei com o sinalizador UNPACK_FLIP_Y_WEBGL. Isso pode ser importante ao usar várias texturas de uma só vez.

Em Suporte para a interface do usuário, você tem uma visão geral do exemplo, de como obter um arquivo, do movimento do mouse e de como salvar o arquivo.

Tópicos relacionados

Usar GLSL para escrever sombreadores WebGL
Suporte para interface do usuário
Demonstrações, referências e recursos WebGL

 

 

Mostrar:
© 2014 Microsoft