Computergrafik

Web GL Textures

← WebGL Shader Beispiel | ● | WebGL Szenengraphen →

Modifizierter Shader für 2D Texturen:

Fragment-Shader

#ifdef GL_ES
precision highp float;
#endif

varying vec4 color;
varying vec2 texCoord;

uniform sampler2D sampler;

void main()
{
   vec4 texColor = texture2D(sampler, texCoord);
   gl_FragColor = color * texColor; // simulate GL_MODULATE
}
[Get Code]

Vertex-Shader

attribute vec3 vertexPosition;
attribute vec4 vertexColor;
attribute vec2 vertexTexCoord;

varying vec4 color;
varying vec2 texCoord;

uniform mat4 mvpMatrix;

void main()
{
   color = vertexColor;
   texCoord = vertexTexCoord;
   gl_Position = mvpMatrix * vec4(vertexPosition, 1.0);
}
[Get Code]

Eine Textur muss geladen und als Textur-Objekt gespeichert werden:

var texture = gl.createTexture();

texture.image = new Image();
texture.image.onload = function()
{
   gl.bindTexture(gl.TEXTURE_2D, texture);
   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.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);
   gl.bindTexture(gl.TEXTURE_2D, null);
}
texture.image.src = url;
[Get Code]

Das Textur-Objekt muss gebunden werden:

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(shader.samplerUniform, 0);
[Get Code]

Nun müssen nur noch Textur-Koordinaten als weiteres Attribut definiert sein:

shader.vertexTexCoordAttribute = gl.getAttribLocation(shader, "vertexTexCoord");
gl.enableVertexAttribArray(shader.vertexTexCoordAttribute);

var crdBuffer = gl.createBuffer();

...

gl.bindBuffer(gl.ARRAY_BUFFER, crdBuffer);
gl.vertexAttribPointer(shader.vertexTexCoordAttribute, crdBuffer.itemSize, gl.FLOAT, false, 0, 0);
[Get Code]

Web GL Shader mit 2D Texturen.

Weitere WebGL Beispiele:

http://webglsamples.org/


← WebGL Shader Beispiel | ● | WebGL Szenengraphen →

Options: