Benutzer:Coolcat/Tutorial WebGL: Unterschied zwischen den Versionen

// our WebGL rendering context, it might be useful to use a global variable for this
var gl = null;

// grab the canvas object and its dimensions
var canvas = document.getElementById("canvas");
var viewportWidth = canvas.width;
var viewportHeight = canvas.height;

// request rendering context from the canvas
try {
    // using Mozilla? (e.g. Firefox, ...) 
    if (!gl) { gl = canvas.getContext("moz-webgl"); } 
} catch (e) { }
try {
    // using Webkit? (e.g. Google Chrome, ...)
    if (!gl) { gl = canvas.getContext("webkit-3d"); } 
} catch (e) { }

if (!gl) {
    alert("No known OpenGL context detected! Is it enabled?");
    return;
}

function loadShader(shaderType, shaderSource) {
    var shader = gl.createShader(shaderType);
    if (!shader) { return null; }    
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    
    if (!gl.getShaderi(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }    
    
    return shader;
}

var vertexShaderSource = "...Vertexshader als String...";
var fragmentShaderSource = "...Fragmentshader als String...";

var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) {
	alert("Shader problem");
}

// create program object
var program = gl.createProgram();

// attach our two shaders to the program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// setup attributes and uniforms (optional)
gl.bindAttribLocation(program, 0, "aPosition");
gl.bindAttribLocation(program, 1, "aNormal");
gl.bindAttribLocation(program, 2, "aTexCoord");
gl.uniform1i(gl.getUniformLocation(program, "uTexture"), 0);

// linking
gl.linkProgram(program);
if (!gl.getProgrami(program, gl.LINK_STATUS)) {
    alert(gl.getProgramInfoLog(program));
}

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec3 aTexCoord;
varying vec3 vNormal;
varying vec2 vTexCoord; 
void main()	{
    gl_Position = vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
    vNormal = aNormal;
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
varying vec3 vNormal;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
void main()	{
    gl_FragColor = texture2D(uTexture, vTexCoord);
}
</script>

function getShaderSource(id) {
    var script = document.getElementById(id);
    if (!script) { return null; }
    
    var source = "";
    var child = script.firstChild;
    while (child) {
        if (child.nodeType == 3) {
            source += child.textContent;
        }
        child = child.nextSibling;
    }
    return source;
}

var vertexShaderSource = getShaderSource("shader-vs");
var fragmentShaderSource = getShaderSource("shader-fs");

function loadTexture(filename) {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    var image = new Image();
    image.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, 0, image);
        gl.generateMipmap(gl.TEXTURE_2D);
        draw(); // texture now available, we can redraw the scene
    }
    image.onerror = function() {
        alert("error while loading image '"+filename+"'.");
    }
    image.src = filename;
    return texture;
}