OpenGL - textury

• Použití textury
  • Nahrání obrázku do bufferu
  • Definování souřadnic textury
  • Definice shaderů
• Více textur
  • Texture units
  • Opakování textury
  • Události myši
• Skybox
• Cubemap
  • Fullscreen
• Závěr

Použití textury

Použití textury je v zásadě jednoduché. Jen zase musíte udělat asi bambilión úkonů. Stručně sepsáno, jde o následující kroky:

1. Vytvoříte buffer pro každou texturu, kterou chcete použít.
2. Do bufferů nahrajete obrázek ve formátu, kterému OpenGL rozumí.
3. Definujete si souřadnice na textuře, které odpovídají vrcholům trojúhelníků, které chcete otexturovat.
4. Souřadnice textury (texture coordinate) nahrajete do bufferu pro attribute proměnnou z GLSL shaderu, obdobně, jako jakákoliv jiná vertex data.
5. V fragment shaderu si vytvoříte uniform proměnnou typu sampler2D (pro každou texturu). Tyto proměnné budou obsahovat ID bufferu textury.
6. V fragment shaderu použijete interní funkci texture(id,textureCoord) pro získání barvy fragmentu z textury. S touto barvou si pak můžete dělat co chcete.

Nahrání obrázku do bufferu

Začněme dvěma prvními body. Potřebujete vytvořit buffer pro texturu a nějaký obrázek v běžném formátu (JPG, PNG, GIF …) do bufferu nahrát ve formátu vhodném pro OpenGL.

Tyto dva kroky udělám ve funkci initBuffers(). Formát vhodný pro OpenGL je nekomprimovaný formát. Interní strukturu vám popisovat nebudu. Ke konverzi běžných obrázků použiji knihovnu stb_image.h.

Další problém s touto knihovnou je, že při jejím překladu překladač hlásí velké množství varování. A protože se jedná jen o hlavičkový soubor, tak se tato varování vypisují při každém překladu zdrojového souboru, který tento hlavičkový soubor includuje. Z tohoto důvodu jsem vytvořil soubory stb-image.h a stb-image.c.

S novou verzí stb_image.h už se žádné varování neukazuje, ale soubory stb-image.h a stb-image.c jsem už ve zdrojácích ponechal.

Soubor stb-image.h vypadá takto:

První řádek definuje makro, které se má definovat, podle dokumentace k stb_image.h. Nevím proč, bez řečí dokumentaci poslouchám. (Má se includovat v jednom souboru, aby se definovala jakási implementace.)

Další definovaná makra tu jsou kvůli kompatiblitě s gcc a Visual Studiem.

Následuje deklarace funkcí, které jsem definoval v stb-image.c:

První funkce volá stbi_load() z stb_image.h, která je zodpovědná na načtení a zkonvertování obrázku do formátu vhodného pro OpenGL. Vrací ukazatel na alokovanou paměť, kde je zkonvertovaný obrázek uložen. Druhá funkce se stará o uvolnění této alokované paměti.

První argument funkce je cesta v souborovém systému k obrázku. Do druhého a třetího argumentu funkce uloží šířku a výšku obrázku. Do čtvrtého argumentu uloží počet složek barvy, ze které se skládá jeden pixel. PNG a GIF obrázky mívají uložen alfa kanál (průhlednost), takže mají obvykle 4 složky (Red, Green, Blue, Alpha). JPEG průhlednost neukládá, takže má většinou 3 složky (RGB). (Ale může jich mít i méně.)

Tak to sme si udělali odbočku ke knihovně stbi_load.h a teď zpátky k našemu příkladu, k funkci initBuffer().

Na začátku se generují buffery pro (jeden) VAO a (dva) BO, jak už znáte z předchozích kapitol. Navíc se generuje buffer pro texturu pomocí funkce glGenTextures(). Globální proměnná TEX je definována jako GLuint TEX[1]; (prozatím si vystačíme s jednou texturou). To je tedy krok 1.

Následuje krok 2. Nejdříve se načte obrázek ze souboru do paměti, pak se pomocí funkce glTexImage2D() nahraje do bufferu grafické karty a nakonec se uvolní již nepotřebná paměť.

Buffery fungují, jako obvykle, jako stavové automaty. Nejdříve se tedy musí přibindovat voláním glBindTexture().

OpenGL podporuje mnoho druhů textur. Textura GL_TEXTURE_2D se používá pro 2D obrázek. Později v této kapitole vám ještě představím GL_TEXTURE_CUBE_MAP.
Jaké další existují můžete vidět v nápovědě k funkci glTexImage2D().

Než se dostanu k popisu této funkce, musím zmínit glTexParameteri(). Tato funkce se používá k nastavování všelijakých vlastností zrovna přibindované textury. Můžete mít přibindováno více textur různých druhů (ale vždy jen jednu texturu pro jeden druh), proto má jako první argument typ textury, na kterou se má nastavovavná vlastnost aplikovat. V příkladu se nastavuje funkce, která se má použít pri zmenšování (GL_TEXTURE_MIN_FILTER), resp. zvětšování obrázku (GL_TEXTURE_MAG_FILTER). V obou případech nastavuji funkci (resp. identifikátor GL funkce) na GL_LINEAR. Další možná funkce je např. GL_NEAREST. Jak se funce liší, najdete v dokumentaci (rozdíly jsou hlavně v kvalitě vs rychlosti). Nebo si je vyzkoušejte a uvidíte jak zvětšná/zmenšená textura vypadá. Jen vězte, že bez tohoto nastavení se vám textura nezobrazí.

A teď k argumentům funkce glTexImage2D().

První argument určuje, do bufferu jakého typu textury se obrázek nahraje. Jak už jsem psal, můžete mít přibindováno více bufferů pro různé typy textur, ale pro daný typ textury vždy jen jeden buffer. Takže určením typu textury jednoznačně určíte, do jakého bufferu se data nahrají.

Druhý argument se používá pro nahrávání tzv. mipmap. Zmenšování obrázku je výpočetně náročná operace a také zapříčiňuje ztrátu kvality. OpenGL můžete trochu ulehčit vygenerováním tzv. mipmap. OpenGL si předgeneruje obrázek v různých velikostech, takže pak při vykreslení textury použije nejbližší předgenerovanou mipmpapu a zmenšení/zvětšení už není tak náročné.

Zavoláním funkce glTexImage2D() s druhým argumentem 0 nahrajete „defaultní“ obrázek, ze kterého se počítají všechny další velikosti. Zavolání glTexImage2D() s druhým argumentem n > 0 vám umožňuje nahrát n-tou mipmapu. To vám umožňuje vylepšit kvalitu zmenšené textury, nebo při zmenšení použít úplně jinou texturu :-).

Třetí argument určuje interní formát, ve kterém bude textura uložena. Když necháme stranou některé exotické možnosti, tak nám zbývá GL_RGB nebo GL_RGBA. Pokud vás průhlednost nezajímá, respektive nahráváte obrázek, který průhlednost neobsahuje, pak použijte GL_RGB, které interně zabírá méně místa.

Další parametry popisují formát nahrávaného obrázku. Nejdříve se určuje šířka a výška obrázku, další argument, border, musí být vždy 0 (to je nějaký historický nesmysl). Další argument říká, jak jsou definované barvy pixelu (nejpoužívanější jsou zase GL_RGB nebo GL_RGBA) a poslední argument je odkaz na vlastní data obrázku.

Definování souřadnic textury

V druhé části funkce initBuffers() se nahrávají vertex data – vrcholy trojúhelníků a souřadnice textury odpovídající jednotlivým vrcholům. To už znáte z předchozích kapitol.

Vertex data jsem zase definoval v souboru vertex-data.h. Vrcholy trojúhelníků takto:

Trojúhelníky jsem od sebe malinko odsadil, aby byly lépe rozeznatelné. Pro lepší představu jsem vám tentorkát nakreslil i obrázek:

Vertex data – vertices

Souřadnice textury mají počátek [0,0] v levém dolním rohu. Pravý horní roh má souřadnice [1,1]. Viz následující obrázek.

Vertex data – TexCoord

Souřadnice textury, kde vrcholy obrázku odpovídají vrcholům trojúhelníků, vypadají takto:

Výsledné natočení obrázku je dáno nejen tím, jak definujete souřadnice textury, ale i tím, jak jsou definovány vrcholy trojúhelníků. Je rozdíl v tom, jestli jsou definované po směru nebo proti směru hodinových ručiček, protože v jednom případě se díváte na zadní stranu a v druhém na přední stranu trojúhelníka. Konec konců, v programu můžete scénu myší otáčet a tím si nastavit polohu trojúhelníka – pozici textury – interaktivně. Zkrátka, občas je to docela alchimie nastavit pozici textury tak, jak chcete.

Definice shaderů

Začněme vertex shaderem:

V shaderu můžete vidět nějaké pohrobky z kapitoly o osvětlení, těch si nemusíte všímat. Důležitá je jen definice textureCoord, kam se budou sypat souřadnice textury, dále out vec2 texCoord, což je proměnná, kterou se budou souřadnice předávat do fragment shaderu. A na konec poslední řádek, kde se souřadnice předávají do fragment shaderu skrze texCoord.

Souřadnice jsem mohl předat jednoduše takto: texCoord = textureCoord;. Proč jsem tak neučinil, to se dozvíte v zápětí.

A teď, o trochu zajímavější, fragment shader:

Uniform proměnná texture1 obsahuje index odkazující na naší texturu. Jak je to ale možné, když jsem nikde tuto proměnnou v main.c nenastavoval?

Pokud uniform nenastavíte, defaultně je 0. Ve chvíli, kdy texturu přibindujete (voláním funkce glBindTexute()), tak se textura spojí s tzv. texture unit. Defaultní texture unit je GL_TEXTURE0, které odpovídá index 0.
Podrobněji se k tomuto tématu vrátím v další části.

Získání barvy z textury je pak jen otázkou zavolání funkce texture(), tak jak vidíte v příkladu.

Jako takový bombónek na konec najdete v fragment shaderu kus kódu, který, v případě že uAmbientColor není černá barva, smíchá barvu s barvou textury pomocí funkce mix(). Tato funkce smíchá své dva první argumenty v poměru daném třetím argumentem (v příkladu 50:50). Poměr může být zadán číslem od 0.0 do 1.0.

Výsledek můžete vidět zde:

Textura

• Animace
• Shaders
• Vertex data
• Variables
• Buffers
• Mouse handlers
• Draw
• Start

Animace textury. V dalších záložkách můžete vidět WebGL použité pro tuto animaci.

<script id="shader-vs-textura" type="x-shader/x-vertex">
    attribute vec3 vertexPosition;
    attribute vec2 textureCoord;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec4 vColor;
    varying vec2 texCoord;

    void main(void) {
        vec4 mvPosition = uMVMatrix * vec4(vertexPosition, 1.0);
        gl_Position = uPMatrix * mvPosition;
        vColor = vec4(0.0, 0.0, 1.0, 1.0);
        texCoord = vec2(textureCoord.x, textureCoord.y);
    }
</script>

<script id="shader-fs-textura" type="x-shader/x-fragment">
    precision mediump float;

    uniform vec3 uAmbientColor;
    uniform sampler2D texture1;

    varying vec4 vColor;
    varying vec2 texCoord;

    void main(void) {
        vec3 vLightIntenzity = uAmbientColor;
        vec4 c = vec4(vColor.rgb * vLightIntenzity, vColor.a);
        if (uAmbientColor.r + uAmbientColor.g + uAmbientColor.b > 0.0) {
                gl_FragColor = mix(texture2D(texture1, texCoord), c, 0.5);
        }
        else {
                gl_FragColor = texture2D(texture1, texCoord);
        }
    }
</script>

var vertices = [
    // right triangle
    1.25, 1.0, 0.0,
    1.25, -1.0, 0.0,
    -0.75, -1.0, 0.0,
    // left triangle
    -1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    -1.0, -1.0, 0.0
];

var texCoord = [
    // right triangle
    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0,
    // left triangle
    1.0, 0.0,
    1.0, 1.0,
    0.0, 0.0
];

var variables = {};
var buffers = {};
var useColor = {};
useColor.ambient = 0;

function initVariables(gl, shaderProgram) {
    variables.vertexPositionLoc = gl.getAttribLocation(shaderProgram, "vertexPosition");
    variables.textureCoordLoc = gl.getAttribLocation(shaderProgram, "textureCoord");
    gl.enableVertexAttribArray(variables.vertexPositionLoc);
    gl.enableVertexAttribArray(variables.textureCoordLoc);

    variables.uMVMatrixLoc = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    variables.uPMatrixLoc = gl.getUniformLocation(shaderProgram, "uPMatrix");
    variables.uAmbientColorLoc = gl.getUniformLocation(shaderProgram, "uAmbientColor");
    variables.texture1 = gl.getUniformLocation(shaderProgram, "texture1");
}
 

var initBuffers = function(gl) {
    buffers.positionBuffer = gl.createBuffer();
    buffers.texCoordBuffer = gl.createBuffer();
    buffers.texture1 = gl.createTexture();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoord), gl.STATIC_DRAW);

    var logoImage = new Image();
    logoImage.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture1);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, logoImage);
        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);
    };
    logoImage.src = '/rc/sally/images/c/opengl/logo.gif';

}

    $(function() {
        var lastX, lastY;
        var canvas1 = document.getElementById('textura-canvas');
        var lastDownTarget;
        $(document).on('mousedown', function(event) {
            lastDownTarget = event.target;
            lastX = event.pageX; lastY = event.pageY;
        });

        $(document).on('mousemove', function(event) {
            if(lastDownTarget != canvas1)
                return;
            var buttonDown = event.buttons == null ?event.wich : event.buttons;
            if(!buttonDown) return;

            x = event.pageY - lastY;
            y = event.pageX - lastX;
            lastX = event.pageX;
            lastY = event.pageY;
               
            var xAngle = WebGLUtils.degToRad(x/5.0);
            var yAngle = WebGLUtils.degToRad(y/5.0);
            updateAngles(xAngle, yAngle);
            event.preventDefault();
            return false;
        });
    });

    var rotationMatrix = mat4.create();
    mat4.identity(rotationMatrix);

    function updateAngles(xAngle, yAngle) {
         var newRotationMatrix = mat4.create();
         mat4.identity(newRotationMatrix);
         mat4.rotate(newRotationMatrix, newRotationMatrix, xAngle, [1, 0, 0]);
         mat4.rotate(newRotationMatrix, newRotationMatrix, yAngle, [0, 1, 0]);
         mat4.multiply(rotationMatrix, newRotationMatrix, rotationMatrix);
    }

    function drawScene(gl, canvas) {
        gl.viewport(0, 0, canvas.width, canvas.height);
       
        gl.clearColor(1, 0,945, 0,8925, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        var uPMatrix = mat4.create();
        var uMVMatrix = mat4.create();

        mat4.identity(uPMatrix);
        mat4.identity(uMVMatrix);

        /********************************************/
        mat4.perspective(uPMatrix, WebGLUtils.degToRad(45), canvas.width / canvas.height, 1.0, 100.0);
        mat4.translate(uMVMatrix, uMVMatrix, [0.0, 0.0, -10.0]);
        mat4.multiply(uMVMatrix, uMVMatrix, rotationMatrix);
        /********************************************/
        gl.uniformMatrix4fv(variables.uMVMatrixLoc, false, uMVMatrix);
        gl.uniformMatrix4fv(variables.uPMatrixLoc, false, uPMatrix);

        if (useColor.ambient) {
                gl.uniform3f(variables.uAmbientColorLoc, 0.4, 0.4, 0.4);
        }
        else {
                gl.uniform3f(variables.uAmbientColorLoc, 0.0, 0.0, 0.0);
        }

        // vykresli logo
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture1);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
        gl.vertexAttribPointer(variables.vertexPositionLoc, 3, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
        gl.vertexAttribPointer(variables.textureCoordLoc, 2, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.TRIANGLES, 0, vertices.length/3);
    }

    function animate() {
    }

function tick(gl, canvas) {
    drawScene(gl, canvas);
    animate();
    requestAnimFrame(function() { tick(gl, canvas);});
}


function webGLStart() {
    var canvas = document.getElementById("textura");
    var gl = WebGLUtils.setupWebGL(canvas,{ antialias: true });
    if(!gl) return;
    var shaderProgram = WebGLUtils.initShaders(gl, "shader-vs-textura","shader-fs-textura");
    gl.useProgram(shaderProgram);
    initVariables(gl,shaderProgram);
    initBuffers(gl);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    tick(gl, canvas);
}

webGLStart();

Pozorný čtenář si jistě všiml, že je obrázek hlavou dolů. To je dáno tím, že data pro obrázek jsou nahraná od horního levého rohu a ne od dolního, jak se zadávají souřadnice. Otoční obrázku je jen otázkou změny y-ové souřadnice v vertex shaderu:

Můžete také použít funkci z stb_image.h, kterou stačí zavolat před načtením obrázku:

To už vám nechám za domácí úkol.

Více textur

V dalším příkladu se vám pokusím vysvětlit použití texture units. V příkladu budou použity dvě textury (v jednom shader programu), takže se použití texture units nedá vyhnout.

První obrázek je smějící se kuci.gif, druhý obrázek rozzuřený kuci2.gif.

V příkladu zopakuji obrázek na textuře 4x (v ose x i y). A navíc se rozzuřený „Kučí“ bude zobrazovat jen pokud bude myš nad oknem.

Jde tedy celkem o 3 změny, jejichž výsledek si můžete prohlédnout zde:

Textury

• Animace
• Shaders
• Vertex data
• Variables
• Buffers
• Mouse handlers
• Draw
• Start

<script id="shader-vs-textury" type="x-shader/x-vertex">
    attribute vec3 vertexPosition;
    attribute vec2 textureCoord;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec2 texCoord;
    varying vec4 position;

    void main(void) {
        vec4 mvPosition = uMVMatrix * vec4(vertexPosition, 1.0);
        gl_Position = uPMatrix * mvPosition;
        position = gl_Position;
        texCoord = vec2(textureCoord.x, textureCoord.y);
    }
</script>

<script id="shader-fs-textury" type="x-shader/x-fragment">
    precision mediump float;

    uniform sampler2D texture1;
    uniform sampler2D texture2;
    uniform bool mouseIn;

    varying vec2 texCoord;
    varying vec4 position;

    void main(void) {
        if(!mouseIn) {
                gl_FragColor = texture2D(texture1, texCoord);
                return;
        }
        if(texCoord.x > 1.0 && texCoord.x < 3.0 && texCoord.y > 1.0 && texCoord.y < 3.0) {
                gl_FragColor = texture2D(texture2, texCoord);
        }
        else {
                gl_FragColor = texture2D(texture1, texCoord);
        }
    }
</script>

var vertices = [
    // right triangle
    1.0, 1.0, 0.0,
    1.0, -1.0, 0.0,
    -1.0, -1.0, 0.0,
    // left triangle
    -1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    -1.0, -1.0, 0.0
];

var texCoord = [
        // right triangle
        4.0, 0.0,
        4.0, 4.0,
        0.0, 4.0,
        // left triangle
        0.0, 0.0,
        4.0, 0.0,
        0.0, 4.0
];

var variables = {};
var buffers = {};

function initVariables(gl, shaderProgram) {
    variables.vertexPositionLoc = gl.getAttribLocation(shaderProgram, "vertexPosition");
    variables.textureCoordLoc = gl.getAttribLocation(shaderProgram, "textureCoord");
    gl.enableVertexAttribArray(variables.vertexPositionLoc);
    gl.enableVertexAttribArray(variables.textureCoordLoc);

    variables.uMVMatrixLoc = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    variables.uPMatrixLoc = gl.getUniformLocation(shaderProgram, "uPMatrix");
    variables.mouseIn = gl.getUniformLocation(shaderProgram, "mouseIn");
    variables.texture1 = gl.getUniformLocation(shaderProgram, "texture1");
    variables.texture2 = gl.getUniformLocation(shaderProgram, "texture2");
}
 

var initBuffers = function(gl) {
    buffers.positionBuffer = gl.createBuffer();
    buffers.texCoordBuffer = gl.createBuffer();
    buffers.texture1 = gl.createTexture();
    buffers.texture2 = gl.createTexture();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoord), gl.STATIC_DRAW);

    var kuciImage = new Image();
    kuciImage.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture1);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, kuciImage);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    };
    kuciImage.src = '/rc/sally/images/c/opengl/kuci.gif';

    var kuci2Image = new Image();
    kuci2Image.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture2);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, kuci2Image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    };
    kuci2Image.src = '/rc/sally/images/c/opengl/kuci2.gif';
}

    var mouseIn = 0;
    $(function() {
        var lastX, lastY;
        var canvas1 = document.getElementById('textury-canvas');
        var lastDownTarget;
        $(document).on('mousedown', function(event) {
            lastDownTarget = event.target;
            lastX = event.pageX; lastY = event.pageY;
        });

        $(document).on('mousemove', function(event) {
            if(lastDownTarget != canvas1)
                return;
            var buttonDown = event.buttons == null ?event.wich : event.buttons;
            if(!buttonDown) return;

            x = event.pageY - lastY;
            y = event.pageX - lastX;
            lastX = event.pageX;
            lastY = event.pageY;
               
            var xAngle = WebGLUtils.degToRad(x/5.0);
            var yAngle = WebGLUtils.degToRad(y/5.0);
            updateAngles(xAngle, yAngle);
            event.preventDefault();
            return false;
        });
        $(canvas1).on('mouseenter', function(event) { mouseIn = 1; });
        $(canvas1).on('mouseleave', function(event) { mouseIn = 0; });
    });

    var rotationMatrix = mat4.create();
    mat4.identity(rotationMatrix);

    function updateAngles(xAngle, yAngle) {
         var newRotationMatrix = mat4.create();
         mat4.identity(newRotationMatrix);
         mat4.rotate(newRotationMatrix, newRotationMatrix, xAngle, [1, 0, 0]);
         mat4.rotate(newRotationMatrix, newRotationMatrix, yAngle, [0, 1, 0]);
         mat4.multiply(rotationMatrix, newRotationMatrix, rotationMatrix);
    }

    function drawScene(gl, canvas) {
        gl.viewport(0, 0, canvas.width, canvas.height);
       
        gl.clearColor(1, 0,945, 0,8925, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        var uPMatrix = mat4.create();
        var uMVMatrix = mat4.create();

        mat4.identity(uPMatrix);
        mat4.identity(uMVMatrix);

        /********************************************/
        mat4.perspective(uPMatrix, WebGLUtils.degToRad(45), canvas.width / canvas.height, 1.0, 100.0);
        mat4.translate(uMVMatrix, uMVMatrix, [0.0, 0.0, -2.5]);
        mat4.multiply(uMVMatrix, uMVMatrix, rotationMatrix);
        /********************************************/
        gl.uniformMatrix4fv(variables.uMVMatrixLoc, false, uMVMatrix);
        gl.uniformMatrix4fv(variables.uPMatrixLoc, false, uPMatrix);

        gl.uniform1i(variables.texture1, 0);
        gl.uniform1i(variables.texture2, 1);
        gl.uniform1i(variables.mouseIn, mouseIn);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture1);
        gl.activeTexture(gl.TEXTURE1);
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture2);

        // vykresli
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
        gl.vertexAttribPointer(variables.vertexPositionLoc, 3, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
        gl.vertexAttribPointer(variables.textureCoordLoc, 2, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.TRIANGLES, 0, vertices.length/3);
    }

    function animate() {
    }

function tick(gl, canvas) {
    drawScene(gl, canvas);
    animate();
    requestAnimFrame(function() { tick(gl, canvas);});
}


function webGLStart() {
    var canvas = document.getElementById("textura", { antialias: true });
    var gl = WebGLUtils.setupWebGL(canvas);
    if(!gl) return;
    var shaderProgram = WebGLUtils.initShaders(gl, "shader-vs-textury","shader-fs-textury");
    gl.useProgram(shaderProgram);
    initVariables(gl,shaderProgram);
    initBuffers(gl);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    tick(gl, canvas);
}

webGLStart();

Texture units

Pokud chcete použít více textur v jednom shaderu, musíte každou z nich připojit k jiné texture unit. To se dělá tak, že se nejdříve příslušná texutre unit aktivuje (pomocí glActiveTexture()) a pak se zavolá glBindTexture().

Funkce glActiveTexture() má jako argument id texture unit. První je GL_TEXTURE0, druhá GL_TEXTURE1 atd. Máte zaručeno, že existují alespoň dvě texture units.

Následující kus kódu určuje, kolik jich máte k dispozici:

Texture units můžete indexovat i jako GL_TEXTURE0 + i (kde i < max_combined_texture_image_units).

Prakticky to tedy znamená, že, oproti předchozímu příkladu, se ve funkci initBuffers() vytvoří dva TEX buffery, do každého se nahraje jeden obrázek (kuci.gif a kuci2.gif) a pak se zavolá následující:

Ve fragment shaderu se vytvoří potřebné uniform proměnné:

A ve funkci draw() (nebo kde se vám to hodí), se uniform proměnné inicializují:

A to je vše, co je potřeba pro použití více textur v jednom shader programu.

Opakování textury

Pokud určíte souřadnice textury větší než 1.0, například 4.0, pak textura vyplní na trojúhelníku vše, co odpovídá prostoru 0.0 až 1.0 (první čtvrtině). Čím se vyplní zbytek, prostor (1.0 až 4.0)? To se nastavuje pomccí parametru GL_TEXTURE_WRAP_S (pro směr x) a GL_TEXTURE_WRAP_T (pro směr y). Parametry se nastavují funkcí glTexParameteri() a mohou nabývat jedné z následujících hodnot: GL_REPEAT, GL_MIRRORED_REPEAT, GL_CLAMP_TO_EDGE a GL_CLAMP_TO_BORDER.

V příkladu chci texturu opakovat, takže souřadnice struktury vynásobím čtyřmi a někde po přibindování textury zavolám následující kód:

GL_REPEAT

říká, že se má obrázek opakovat

GL_MIRRORED_REPEAT

říká, že se má obrázek opakovat a každý druhý zrcadlově otočit.

GL_CLAMP_TO_EDGE

říká, že se má okraj obrázku protáhnout, jako duha, do konce vyplňované plochy.

GL_CLAMP_TO_BORDER

Zbytek plochy se vyplní border barvou.

Pokud použijete poslední možnost, musíte nastavit border barvu. Třeba nějak takto:

Obrázky Kučího, které jsem použil dříve, mají na okraji jen průhledné pozadí. Proto by se na nich GL_CLAMP_TO_EDGE moc hezky neukázalo. Přidal jsem tedy barevné pozadí:

Události myši

Druhá textura se zobrazí jen při najetí myši nad okno. Událostem vstupu/výstupu myši z okna se říká enter / leave events.

Ve funkci main() se zaregistruje funkce pro obsluhu těchto událostí:

Funkci cursor_enter_callback() jsem definoval v souboru events.h, spolu s globální proměnnou mouseIn, která udržuje informaci o tom, zda je myš nad oknem nebo ne:

Tuto globální proměnnou pak předám pomocí uniform proměnné do fragment shaderu (ve funkci draw()):

A to je vše (vytvoření a inicializaci variables.mouseIn zvládnete sami). Toto je výsledný fragment shader, který používá dvě textury:

Souřadnice textury byly definované od 0.0 do 4.0. Podmínka v shaderu zajistí, že se druhá textura použije uprostřed otexturovaného čtverce (pokud je mouseIn true), tj v rozsahu od 1.0 do 3.0.

Za domácí úkol můžete přepsat podmínku s pomocí position, aby se druhá textura používala uprostřed okna (bez ohledu na natočení čtverce).

Skybox

Skybox

Doposud všechny zobrazované objekty plavaly ve vzduchoprázdnu. Skybox je jedna z možností, jak simulovat prostor.

Na obrázku je příklad jednoho takového skyboxu. Jedná se o šest čtverců, které se namapují na krychli, uvnitř které se budou zobrazovat další objekty.

Přiklad vychází z prvního příkladu této kapitoly. Navíc jen definuje vertex data pro krychli a souřadnice textury.

Jednotlivé díly textury jsou v skyboxu rozdělené do tří řádků a čtyř sloupců. Takže souřadnice textur pro jednotivé strany krychle vypadají nějak takto:

Shadery vypadají stejně jako v prvním příkladu. Shader program se jen zavolá 2x. Jednou pro krychli se skyboxem a podruhé pro čtverec s logem.

Rozměry krychle jsem udělal od -1000.0 do 10000.0, takže se do krychle leccos vejde :-). Aby se krychle zobrazila, musil jsem zvětšit zorné pole perspektivy:

V tomto příkladu nebyla potřeba žádná nová dovednost. Ale je to hezká ukázka toho, že můžete použít jednu texturu pro otexturování více povrchů (a ještě nám na textuře zbylo volné (čeré) místo).

Skybox

• Animace
• Shaders
• Vertex data
• Variables
• Buffers
• Mouse handlers
• Draw
• Start

<script id="shader-vs-skybox" type="x-shader/x-vertex">
    attribute vec3 vertexPosition;
    attribute vec2 textureCoord;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec4 vColor;
    varying vec2 texCoord;

    void main(void) {
        vec4 mvPosition = uMVMatrix * vec4(vertexPosition, 1.0);
        gl_Position = uPMatrix * mvPosition;
        vColor = vec4(0.0, 0.0, 1.0, 1.0);
        texCoord = vec2(textureCoord.x, -textureCoord.y);
    }
</script>

<script id="shader-fs-skybox" type="x-shader/x-fragment">
    precision mediump float;

    uniform vec3 uAmbientColor;
    uniform sampler2D texture1;

    varying vec4 vColor;
    varying vec2 texCoord;

    void main(void) {
        vec3 vLightIntenzity = uAmbientColor;
        vec4 c = vec4(vColor.rgb * vLightIntenzity, vColor.a);
        if (uAmbientColor.r + uAmbientColor.g + uAmbientColor.b > 0.0) {
                gl_FragColor = mix(texture2D(texture1, texCoord), c, 0.5);
        }
        else {
                gl_FragColor = texture2D(texture1, texCoord);
        }
    }
</script>

var vertices = [
    // right triangle
    1.0, 1.0, 0.0,
    1.0, -1.0, 0.0,
    -1.0, -1.0, 0.0,
    // left triangle
    -1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    -1.0, -1.0, 0.0
];

var texCoord = [
        // right triangle
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0,
        // left triangle
        0.0, 0.0,
        1.0, 0.0,
        0.0, 1.0
];

var boxVertices = [
        // back
        -1000.0,  -1000.0, -1000.0,
         1000.0,  -1000.0, -1000.0,
        -1000.0,  1000.0, -1000.0,
         1000.0,  -1000.0, -1000.0,
         1000.0,  1000.0, -1000.0,
        -1000.0,  1000.0, -1000.0,
        // left
        -1000.0,  -1000.0,  1000.0,
        -1000.0,  -1000.0, -1000.0,
        -1000.0,  1000.0,  1000.0,
        -1000.0,  -1000.0, -1000.0,
        -1000.0,  1000.0, -1000.0,
        -1000.0,  1000.0,  1000.0,
        // right
        1000.0,  -1000.0,  1000.0,
        1000.0,  -1000.0, -1000.0,
        1000.0,  1000.0,  1000.0,
        1000.0,  -1000.0, -1000.0,
        1000.0,  1000.0, -1000.0,
        1000.0,  1000.0,  1000.0,
        // front
        -1000.0, -1000.0, 1000.0,
         1000.0, -1000.0, 1000.0,
        -1000.0,  1000.0, 1000.0,
         1000.0, -1000.0, 1000.0,
         1000.0,  1000.0, 1000.0,
        -1000.0,  1000.0, 1000.0,
        // bottom
        -1000.0, -1000.0,  1000.0,
        -1000.0, -1000.0, -1000.0,
         1000.0, -1000.0,  1000.0,
         1000.0, -1000.0,  1000.0,
        -1000.0, -1000.0, -1000.0,
         1000.0, -1000.0, -1000.0,
        // top
        -1000.0, 1000.0,  1000.0,
        -1000.0, 1000.0, -1000.0,
         1000.0, 1000.0,  1000.0,
        -1000.0, 1000.0, -1000.0,
         1000.0, 1000.0,  1000.0,
         1000.0, 1000.0, -1000.0
];

var boxTexCoord = [
        //back
        0.25, 1.0/3,
         .5,  1.0/3,
        0.25, 2.0/3,
         .5,  1.0/3,
         .5,  2.0/3,
        0.25, 2.0/3,
        //left
        0.0,  1.0/3,
         .25, 1.0/3,
        0.0,  2.0/3,
        0.25, 1.0/3,
         .25, 2.0/3,
        0.0,  2.0/3,
        //right
        0.75, 1.0/3,
         .5,  1.0/3,
        0.75, 2.0/3,
        0.5,  1.0/3,
         .5,  2.0/3,
        0.75, 2.0/3,
        //front
        1.0, 1.0/3,
        .75, 1.0/3,
        1.0, 2.0/3,
        0.75, 1.0/3,
        .75,  2.0/3,
        1.0,  2.0/3,
        // bottom
        0.5, 1.0/3,
        0.5,  0.0,
        0.25, 1.0/3,
        0.25, 1.0/3,
        0.5, 0.0,
        0.25, 0.0,
        // top
        0.25, 1.0,
        0.25, 2.0/3,
        0.5, 1.0,
        0.25, 2.0/3,
        0.5, 1.0,
        0.5, 2.0/3

];

var variables = {};
var buffers = {};
var useColor = {};
useColor.ambient = 0;

function initVariables(gl, shaderProgram) {
    variables.vertexPositionLoc = gl.getAttribLocation(shaderProgram, "vertexPosition");
    variables.textureCoordLoc = gl.getAttribLocation(shaderProgram, "textureCoord");
    gl.enableVertexAttribArray(variables.vertexPositionLoc);
    gl.enableVertexAttribArray(variables.textureCoordLoc);

    variables.uMVMatrixLoc = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    variables.uPMatrixLoc = gl.getUniformLocation(shaderProgram, "uPMatrix");
    variables.uAmbientColorLoc = gl.getUniformLocation(shaderProgram, "uAmbientColor");
    variables.texture1 = gl.getUniformLocation(shaderProgram, "texture1");
}
 

var initBuffers = function(gl) {
    //logo
    buffers.positionBuffer = gl.createBuffer();
    buffers.texCoordBuffer = gl.createBuffer();
    buffers.texture1 = gl.createTexture();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoord), gl.STATIC_DRAW);

    var logoImage = new Image();
    logoImage.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture1);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, logoImage);
        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);
    };
    logoImage.src = '/rc/sally/images/c/opengl/logo.gif';

    //skybox
    buffers.sPositionBuffer = gl.createBuffer();
    buffers.sTexCoordBuffer = gl.createBuffer();
    buffers.sTexture1 = gl.createTexture();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.sPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(boxVertices), gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.sTexCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(boxTexCoord), gl.STATIC_DRAW);

    var sboxImage = new Image();
    sboxImage.onload = function() {
        gl.bindTexture(gl.TEXTURE_2D, buffers.sTexture1);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sboxImage);
        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);
    };
    sboxImage.src = '/rc/sally/images/c/opengl/miramar_large.jpg';
}

    $(function() {
        var lastX, lastY;
        var canvas1 = document.getElementById('skybox-canvas');
        var lastDownTarget;
        $(document).on('mousedown', function(event) {
            lastDownTarget = event.target;
            lastX = event.pageX; lastY = event.pageY;
        });

        $(document).on('mousemove', function(event) {
            if(lastDownTarget != canvas1)
                return;
            var buttonDown = event.buttons == null ?event.wich : event.buttons;
            if(!buttonDown) return;

            x = event.pageY - lastY;
            y = event.pageX - lastX;
            lastX = event.pageX;
            lastY = event.pageY;
               
            var xAngle = WebGLUtils.degToRad(x/5.0);
            var yAngle = WebGLUtils.degToRad(y/5.0);
            updateAngles(xAngle, yAngle);
            event.preventDefault();
            return false;
        });
    });

    var rotationMatrix = mat4.create();
    mat4.identity(rotationMatrix);

    function updateAngles(xAngle, yAngle) {
         var newRotationMatrix = mat4.create();
         mat4.identity(newRotationMatrix);
         mat4.rotate(newRotationMatrix, newRotationMatrix, xAngle, [1, 0, 0]);
         mat4.rotate(newRotationMatrix, newRotationMatrix, yAngle, [0, 1, 0]);
         mat4.multiply(rotationMatrix, newRotationMatrix, rotationMatrix);
    }

    function drawScene(gl, canvas) {
        gl.viewport(0, 0, canvas.width, canvas.height);
       
        gl.clearColor(1.0, 1.0, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        var uPMatrix = mat4.create();
        var uMVMatrix = mat4.create();

        mat4.identity(uPMatrix);
        mat4.identity(uMVMatrix);

        /********************************************/
        mat4.perspective(uPMatrix, WebGLUtils.degToRad(45), canvas.width / canvas.height, 1.0, 2000.0);
        mat4.translate(uMVMatrix, uMVMatrix, [0.0, 0.0, -10.0]);
        mat4.multiply(uMVMatrix, uMVMatrix, rotationMatrix);
        /********************************************/
        gl.uniformMatrix4fv(variables.uMVMatrixLoc, false, uMVMatrix);
        gl.uniformMatrix4fv(variables.uPMatrixLoc, false, uPMatrix);

        if (useColor.ambient) {
                gl.uniform3f(variables.uAmbientColorLoc, 0.4, 0.4, 0.4);
        }
        else {
                gl.uniform3f(variables.uAmbientColorLoc, 0.0, 0.0, 0.0);
        }


        // vykresli skybox
        gl.bindTexture(gl.TEXTURE_2D, buffers.sTexture1);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.sPositionBuffer);
        gl.vertexAttribPointer(variables.vertexPositionLoc, 3, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.sTexCoordBuffer);
        gl.vertexAttribPointer(variables.textureCoordLoc, 2, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.TRIANGLES, 0, boxVertices.length/3);

        // vykresli logo
        gl.bindTexture(gl.TEXTURE_2D, buffers.texture1);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
        gl.vertexAttribPointer(variables.vertexPositionLoc, 3, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
        gl.vertexAttribPointer(variables.textureCoordLoc, 2, gl.FLOAT, false, 0, 0);

        gl.drawArrays(gl.TRIANGLES, 0, vertices.length/3);
    }

    function animate() {
    }

function tick(gl, canvas) {
    drawScene(gl, canvas);
    animate();
    requestAnimFrame(function() { tick(gl, canvas);});
}


function webGLStart() {
    var canvas = document.getElementById("textura");
    var gl = WebGLUtils.setupWebGL(canvas,{ antialias: true });
    if(!gl) return;
    var shaderProgram = WebGLUtils.initShaders(gl, "shader-vs-skybox","shader-fs-skybox");
    gl.useProgram(shaderProgram);
    initVariables(gl,shaderProgram);
    initBuffers(gl);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    tick(gl, canvas);
}

webGLStart();

Toto není jediný způsob, jak vytvořit iluzi prostoru. Můžete si vystačit i s jednou plochou, na kterou vykreslíte nějaké pozadí, a kterou budete otáčet vždy tak, aby čelila pohledu kamery. Nebo můžete vytvořit z mnoha trojúhleníků velkou kopuli, na kterou vykreslíte příslušnou texturu (vytvoření vhodné textury pro takovou polokouli není ale zrovna snadné).

Cubemap

Cubemap (GL_TEXTURE_CUBE_MAP) je další z několika druhů textury.

Používá se, jak název napovídá, k otexturování krychle. Tedy k něčemu podobnému, jako jsem popisoval u skyboxu. Jen se data nahrávají trochu jinak a i souřadnice textury se určují jinak.

Souřadnice textury se určují pomocí vektorů, viz obrázek níže. Jde o vektor, jehož počátek je uprostřed pomyslné krychle. Definováním vektoru (pomocí tří souřadnic) určíte směr. Místo, kde se vektor protne se stěnou krychle, určuje výslednou barvu.

Cubemap

Souřadnice cubemap textury jsou tedy trojrozměrné. Pro cubemap texturu se musí každá strana nahrávat zvlášť (viz ukázka zdrojového kódu dále), takže je potřeba skybox rozřezat na 6 samostatných obrázků.

Pro inicializování cubemap můžete použít následující funkci:

Funkce dostane jako první argument ID texture bufferu a jako druhý argument pole s názvy 6-ti souborů.

Funkce dělá v zásadě jen to, že přibinduje buffer s typem textury GL_TEXTURE_CUBE_MAP, nastavuje některé, vám již známé, parametry textury a dále nahraje obsah šesti obrázků do tzv. texture targets, které se adresují pomocí konstant z následující tabulky:

Tím se inicializuje všech šest stran krychle. Funkci můžete zavolat např. takto:

Vertex data pro krychli mohou vypadat nějak takto:

Dále je potřeba upravit vertex shader, protože souřadnice textury už nejsou 2D vektory, ale 3D.

Fragment shader se také musí upravit kvůli 3D souřadnicím textury, ale hlavně uniform proměnná pro texturu je nyní typu sampleCube.

A zde je výsledek:

Cubemap

• Animace
• Shaders
• Vertex data
• Variables
• Buffers
• Mouse handlers
• Draw
• Start

<script id="shader-vs-cubemap" type="x-shader/x-vertex">
    attribute vec3 vertexPosition;
    attribute vec3 textureCoord;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec3 texCoord;

    void main(void) {
        vec4 mvPosition = uMVMatrix * vec4(vertexPosition, 1.0);
        texCoord = textureCoord;
        gl_Position = uPMatrix * mvPosition;
    }
</script>

<script id="shader-fs-cubemap" type="x-shader/x-fragment">
    precision mediump float;

    uniform bool useAmbient;
    uniform vec3 uAmbientColor;
    uniform samplerCube texture1;

    varying vec3 texCoord;

    void main(void) {
        if (useAmbient) {
                vec4 vColor = vec4(0.0, 0.0, 1.0, 1.0);
                vec4 c = vec4(vColor.rgb * uAmbientColor, vColor.a);
                gl_FragColor = mix(textureCube(texture1, texCoord), c, 0.5);
        }
        else {
                gl_FragColor = textureCube(texture1, texCoord);
        }
    }
</script>

var boxVertices = [
 // Positions          
    -1000.0,  1000.0, -1000.0,
    -1000.0, -1000.0, -1000.0,
     1000.0, -1000.0, -1000.0,
     1000.0, -1000.0, -1000.0,
     1000.0,  1000.0, -1000.0,
    -1000.0,  1000.0, -1000.0,

    -1000.0, -1000.0,  1000.0,
    -1000.0, -1000.0, -1000.0,
    -1000.0,  1000.0, -1000.0,
    -1000.0,  1000.0, -1000.0,
    -1000.0,  1000.0,  1000.0,
    -1000.0, -1000.0,  1000.0,

     1000.0, -1000.0, -1000.0,
     1000.0, -1000.0,  1000.0,
     1000.0,  1000.0,  1000.0,
     1000.0,  1000.0,  1000.0,
     1000.0,  1000.0, -1000.0,
     1000.0, -1000.0, -1000.0,

    -1000.0, -1000.0,  1000.0,
    -1000.0,  1000.0,  1000.0,
     1000.0,  1000.0,  1000.0,
     1000.0,  1000.0,  1000.0,
     1000.0, -1000.0,  1000.0,
    -1000.0, -1000.0,  1000.0,

    -1000.0,  1000.0, -1000.0,
     1000.0,  1000.0, -1000.0,
     1000.0,  1000.0,  1000.0,
     1000.0,  1000.0,  1000.0,
    -1000.0,  1000.0,  1000.0,
    -1000.0,  1000.0, -1000.0,

    -1000.0, -1000.0, -1000.0,
    -1000.0, -1000.0,  1000.0,
     1000.0, -1000.0, -1000.0,
     1000.0, -1000.0, -1000.0,
    -1000.0, -1000.0,  1000.0,
     1000.0, -1000.0,  1000.0
];

var boxTexCoord = [
        // Positions          
        -1.0,  1.0, -1.0,
        -1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0,  1.0, -1.0,
        -1.0,  1.0, -1.0,
 
        -1.0, -1.0,  1.0,
        -1.0, -1.0, -1.0,
        -1.0,  1.0, -1.0,
        -1.0,  1.0, -1.0,
        -1.0,  1.0,  1.0,
        -1.0, -1.0,  1.0,
 
         1.0, -1.0, -1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0, -1.0,
         1.0, -1.0, -1.0,
   
        -1.0, -1.0,  1.0,
        -1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0, -1.0,  1.0,
        -1.0, -1.0,  1.0,
 
        -1.0,  1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
        -1.0,  1.0,  1.0,
        -1.0,  1.0, -1.0,
 
        -1.0, -1.0, -1.0,
        -1.0, -1.0,  1.0,
         1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0
];

var variables = {};
var buffers = {};
var useColor = {};
useColor.ambient = 0;

function initVariables(gl, shaderProgram) {
    variables.vertexPositionLoc = gl.getAttribLocation(shaderProgram, "vertexPosition");
    variables.textureCoordLoc = gl.getAttribLocation(shaderProgram, "textureCoord");
    gl.enableVertexAttribArray(variables.vertexPositionLoc);
    gl.enableVertexAttribArray(variables.textureCoordLoc);

    variables.uMVMatrixLoc = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    variables.uPMatrixLoc = gl.getUniformLocation(shaderProgram, "uPMatrix");
    variables.uAmbientColorLoc = gl.getUniformLocation(shaderProgram, "uAmbientColor");
    variables.texture1 = gl.getUniformLocation(shaderProgram, "texture1");
    variables.useAmbientLoc = gl.getUniformLocation(shaderProgram, "useAmbient");
}
 

var initBuffers = function(gl) {
    //logo
    buffers.positionBuffer = gl.createBuffer();
    buffers.texCoordBuffer = gl.createBuffer();
    buffers.texture1 = gl.createTexture();

    var faces = [
                "miramar_large/right.jpg",
                "miramar_large/left.jpg",
                "miramar_large/top.jpg",
                "miramar_large/bottom.jpg",
                "miramar_large/back.jpg",
                "miramar_large/front.jpg"
    ];
 
    load_cubemap(gl, buffers.texture1, faces);

    //cubemap
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(boxVertices), gl.STATIC_DRAW);

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(boxTexCoord), gl.STATIC_DRAW);
}

    $(function() {
        var lastX, lastY;
        var canvas1 = document.getElementById('cubemap-canvas');
        var lastDownTarget;
        $(document).on('mousedown', function(event) {
            lastDownTarget = event.target;
            lastX = event.pageX; lastY = event.pageY;
        });

        $(document).on('mousemove', function(event) {
            if(lastDownTarget != canvas1)
                return;
            var buttonDown = event.buttons == null ?event.wich : event.buttons;
            if(!buttonDown) return;

            x = event.pageY - lastY;
            y = event.pageX - lastX;
            lastX = event.pageX;
            lastY = event.pageY;
               
            var xAngle = WebGLUtils.degToRad(x/5.0);
            var yAngle = WebGLUtils.degToRad(y/5.0);
            updateAngles(xAngle, yAngle);
            event.preventDefault();
            return false;
        });
    });

    var rotationMatrix = mat4.create();
    mat4.identity(rotationMatrix);

    function updateAngles(xAngle, yAngle) {
         var newRotationMatrix = mat4.create();
         mat4.identity(newRotationMatrix);
         mat4.rotate(newRotationMatrix, newRotationMatrix, xAngle, [1, 0, 0]);
         mat4.rotate(newRotationMatrix, newRotationMatrix, yAngle, [0, 1, 0]);
         mat4.multiply(rotationMatrix, newRotationMatrix, rotationMatrix);
        var x = '';
        for(i = 0; i < rotationMatrix.length; i++)
                x += rotationMatrix[i]+',';
                if(!(i+1 % 4)) x+="<br />";
        $('#x').html(x);
    }

    function drawScene(gl, canvas) {
        gl.viewport(0, 0, canvas.width, canvas.height);
       
        gl.clearColor(1.0, 1.0, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        var uPMatrix = mat4.create();
        var uMVMatrix = mat4.create();

        mat4.identity(uPMatrix);
        mat4.identity(uMVMatrix);

        /********************************************/
        mat4.perspective(uPMatrix, WebGLUtils.degToRad(90), canvas.width / canvas.height, 1.0, 2000.0);
        //mat4.translate(uMVMatrix, uMVMatrix, [0.0, 0.0, -5.0]);
        //mat4.scale(uMVMatrix, uMVMatrix, [0.002, 0.002, 0.002]);
        mat4.multiply(uMVMatrix, uMVMatrix, rotationMatrix);
        /********************************************/
        gl.uniformMatrix4fv(variables.uMVMatrixLoc, false, uMVMatrix);
        gl.uniformMatrix4fv(variables.uPMatrixLoc, false, uPMatrix);
        gl.uniform3f(variables.uAmbientColorLoc, 0.4, 0.4, 0.4);
        gl.uniform1i(variables.useAmbientLoc, useColor.ambient);

        // vykresli cubemap
        gl.bindTexture(gl.TEXTURE_CUBE_MAP, buffers.texture1);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.positionBuffer);
        gl.vertexAttribPointer(variables.vertexPositionLoc, 3, gl.FLOAT, false, 0, 0);
        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.texCoordBuffer);
        gl.vertexAttribPointer(variables.textureCoordLoc, 3, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.TRIANGLES, 0, boxVertices.length/3);
    }

    function animate() {
    }

function tick(gl, canvas) {
    drawScene(gl, canvas);
    animate();
    requestAnimFrame(function() { tick(gl, canvas);});
}


function webGLStart() {
    var canvas = document.getElementById("textura");
    var gl = WebGLUtils.setupWebGL(canvas, { antialias: true });
    if(!gl) return;
    var shaderProgram = WebGLUtils.initShaders(gl, "shader-vs-cubemap","shader-fs-cubemap");
    gl.useProgram(shaderProgram);
    initVariables(gl,shaderProgram);
    initBuffers(gl);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    tick(gl, canvas);
}

webGLStart();

Poznámka na závěr: ve zdrojových kódech k tomuto příkladu jsem vám nechal zakomentované tyto dvě řádky: