Meine Werkzeuge
Namensräume
Varianten

WebGL Jumpstart/Texturen laden

Aus indiedev
Wechseln zu: Navigation, Suche
WebGL Jumpstart
Texturen laden
Thumbnail WebGL Jumpstart 03.png
Autor Astrorenales
Programmier­sprache JavaScript
Kategorie WebGL
Diskussion Thread im Forum
Lizenz indiedev article license


Hinweis Dieser Artikel wird gerade geschrieben bzw. bearbeitet und erfüllt noch nicht die Qualitätsstandards von indiedev.
Bitte bearbeite diesen Artikel nur, wenn du kleine Fehler korrigieren möchtest oder der Autor bist.

Inhaltsverzeichnis

Das Inhaltsverzeichnis

Einleitung

In diesem kleinen Tutorial werde ich erklären, wie man Texturen aus einfachen Bilddateien in WebGL lädt und entsprechend rendert. Dabei legen wir den Code des vorigen Tutorials zum zeichnen eines farbigen Dreiecks zugrunde. Allerdings werden nun anstatt drei, vier Vertices verwenden, um einen Quad zu zeichnen. Desweiteren wird der ColorBuffer durch einen TextureCoordinateBuffer ersetzt und auch der Shader wurde angepasst. Auf diese Veränderungen wird nun im Detail eingegangen.

Das Texturobjekt

Laden mit dem Img-Element

Rendern der Textur

Das Endergebnis

WebGL Jumpstart

Und hier noch einmal der ganze Code:


<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>WebGL Jumpstart</title>
  <script type="text/javascript" src="gl-matrix-min.js"></script>
  <script type="text/javascript" src="shader-utils.js"></script>
  <script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 Position;
    attribute vec2 TexCoord;
    uniform mat4 WorldViewProj;
    varying vec2 vertexTexture;
    void main(void) {
      gl_Position = WorldViewProj * vec4(Position, 1.0);
      vertexTexture = TexCoord;
    }
  </script>
  <script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D DiffuseMap;
    varying vec2 vertexTexture;
    void main(void) {
      gl_FragColor = texture2D(DiffuseMap, vertexTexture);
    }
  </script>
</head>
<body>
  <canvas id="glcanvas" width="400" height="275" style="border:1px solid black"></canvas>
  <script>
  window.onload = function () {
    var surface = window.document.getElementById("glcanvas");
    var gl = surface.getContext("experimental-webgl") || surface.getContext("webgl");
    
    var vertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      -100.0, -75.0, 0.0,
      -100.0,  75.0, 0.0,
       100.0,  75.0, 0.0,
       100.0,  -75.0, 0.0]), gl.STATIC_DRAW);
    vertexPositionBuffer.itemSize = 3;
    vertexPositionBuffer.numItems = 4;
    
    var vertexTextureBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexTextureBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      0.0, 0.0,
      0.0, 1.0,
      1.0, 1.0,
      1.0, 0.0]), gl.STATIC_DRAW);
    vertexTextureBuffer.itemSize = 2;
    vertexTextureBuffer.numItems = 4;
    
    var vertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
    vertexIndexBuffer.itemSize = 1;
    vertexIndexBuffer.numItems = 6;
    
    proj = mat4.create();
    mat4.ortho(proj, 0.0, surface.width, surface.height, 0.0, 0.0, 1.0);
    gl.viewport(0, 0, surface.width, surface.height);
    
    shaderProgram = getShaderProg(gl, "shader-vs", "shader-fs");
    gl.useProgram(shaderProgram);
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "Position");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    shaderProgram.texCoordAttribute = gl.getAttribLocation(shaderProgram, "TexCoord");
    gl.enableVertexAttribArray(shaderProgram.texCoordAttribute);
    shaderProgram.worldViewProjUniform = gl.getUniformLocation(shaderProgram, "WorldViewProj");
    shaderProgram.diffuseMapUniform = gl.getUniformLocation(shaderProgram, "DiffuseMap");
    
    var diffuseMap = gl.createTexture();
    diffuseMap.image = new Image();
    diffuseMap.image.onload = function() {
      gl.bindTexture(gl.TEXTURE_2D, diffuseMap);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, diffuseMap.image);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.bindTexture(gl.TEXTURE_2D, null);
    }
    diffuseMap.image.src = "WebGL_Jumpstart_Example_Texture.png";
    
    setTimeout(function() {
      gl.clearColor(0.392, 0.584, 0.929, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      
      gl.enable(gl.BLEND);
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    
      gl.useProgram(shaderProgram);
      
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
      gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
      
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexTextureBuffer);
      gl.vertexAttribPointer(shaderProgram.texCoordAttribute, vertexTextureBuffer.itemSize, gl.FLOAT, false, 0, 0);
      
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer);
      
      gl.bindTexture(gl.TEXTURE_2D, diffuseMap);
      gl.activeTexture(gl.TEXTURE0);
      gl.uniform1i(shaderProgram.diffuseMapUniform, 0);
      
      var world = mat4.create();
      world = mat4.translate(world, world, vec3.fromValues(surface.width / 2, surface.height / 2, 0));
      var wvp = mat4.create();
      wvp = mat4.multiply(wvp, proj, world);
      gl.uniformMatrix4fv(shaderProgram.worldViewProjUniform, false, wvp);
      
      gl.drawElements(gl.TRIANGLES, vertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    }, 100);
  }
  </script>
</body>
</html>

Navigation
Tutorials und Artikel
Community Project
Werkzeuge