gifts/ThreeDUI

This is an example from the book "WebGL Programming Guide" by Kouichi Matsuda and Rodger Lea

by Ivan Enzhaev

HTML

<canvas id="webgl" width="400" height="400" style="position: absolute; z-index: 0">
        Please use a browser that supports "canvas"
    </canvas>
    <canvas id="hud" width="400" height="400" style="position: absolute; z-index: 1"></canvas>

    <script type="x-shader/x-vertex" id="ColorVertexShader">
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        uniform mat4 u_MvpMatrix;
        varying vec4 v_Color;

        void main()
        {
            gl_Position = u_MvpMatrix * a_Position;
            v_Color = a_Color;
        }
    </script>

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

        varying vec4 v_Color;

        void main()
        {
            gl_FragColor = v_Color;
        }
    </script>

    <script type="x-shader/x-vertex" id="TextureVertexShader">
        attribute vec4 a_Position;
        attribute vec2 a_TexCoord;
        uniform mat4 u_MvpMatrix;
        varying vec4 v_Color;
        varying vec2 v_TexCoord;

        void main()
        {
            gl_Position = u_MvpMatrix * a_Position;
            v_TexCoord = a_TexCoord;
        }
    </script>

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

        uniform sampler2D u_Sampler;
        varying vec2 v_TexCoord;

        void main()
        {
            gl_FragColor = texture2D(u_Sampler, v_TexCoord);
        }
    </script>

    <script src="https://dl.dropboxusercontent.com/s/ylw7v7a44xtrwv0/webgl-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/iz1n21c8xafd76n/webgl-debug.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/subm1yzylxuao8v/cuon-utils.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/jw3p82lq1cjwekg/cuon-matrix.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

// ThreeDUI.js (c) 2012 matsuda and itami
// This is an example from the book "WebGL Programming Guide"
// by Kouichi Matsuda and Rodger Lea

var g_program_color;
var g_program_texture;

var a_Position;
var a_Color;
var a_TexCoord;
var u_MvpMatrix;
var u_Sampler;
var u_IsTexture;

var g_viewProjMatrix = new Matrix4();
var g_panelDefaultMatrix = new Matrix4();
var g_vertexColorBuffer;
var g_vertexTexCoordBuffer;
var picturePanel = null;
var nextPicturePanel = null;

//var pictureInfos = new Array(
//  new pictureItem("'../resources/7herbs.jpg',          'Nanakusa\n\nUse arrow keys!'"),
//  new pictureItem("'../resources/blueflower.jpg',      'Blue\nFlower'"),
//  new pictureItem("'../resources/blueflower2.jpg',     'Blue\nFlower2'"),
//  new pictureItem("'../resources/lightblueflower.jpg', 'Light\nBlue\nFlower'"),
//  new pictureItem("'../resources/orange.jpg',          'Orange'"),
//  new pictureItem("'../resources/parasol.jpg',         'Parasol'"),
//  new pictureItem("'../resources/pinkflower.jpg',      'Pink\nFlower'"),
//  new pictureItem("'../resources/redflower.jpg',       'Red\nFlower'"),
//  new pictureItem("'../resources/sky.jpg',             'Sky'"),
//  new pictureItem("'../resources/sky_cloud.jpg',       'Sky\nCloud'"),
//  new pictureItem("'../resources/sky_roof.jpg',        'Sky\nand\nRoof'"),
//  new pictureItem("'../resources/yellowflower.jpg',    'Yellow\nFlower'")
//);

var pictureInfos = new Array(
  new pictureItem("'https://dl.dropboxusercontent.com/s/wl4akzer41ltthl/7herbs.jpg',          'Nanakusa\n\nUse arrow keys!'"),
  new pictureItem("'https://dl.dropboxusercontent.com/s/ehr1prs0ibt9m26/blueflower.jpg',      'Blue\nFlower'"),
  new pictureItem("'https://dl.dropboxusercontent.com/s/8a93y62dw6ld33t/blueflower2.jpg',     'Blue\nFlower2'"),
  new pictureItem("'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg', 'Light\nBlue\nFlower'"),
  new pictureItem("'https://dl.dropboxusercontent.com/s/yigp9iznm12lu3b/orange.jpg', ...