Небольшие примеры на WebGL - Gamedev - cоздание игр: Unity, OpenGL, DirectX - Страница 6

kvitaliy · 26.11.2017, 20:28

Всё это чрезвычайно интересно. И реально работает в обычном браузере.
Но одно пожелание - можно комментировать примеры, зачем нужны те или иные функции, какие параметры применяются. А то на первый взгляд все 5 страниц однотипного кода, т.е. что то можно не повторять, вносить только те изменения, которые влияют на результат. И т.п. тонкости.

8Observer8 · 26.11.2017, 21:07

Цитата:

Сообщение от kvitaliy

Всё это чрезвычайно интересно. И реально работает в обычном браузере.
Но одно пожелание - можно комментировать примеры, зачем нужны те или иные функции, какие параметры применяются. А то на первый взгляд все 5 страниц однотипного кода, т.е. что то можно не повторять, вносить только те изменения, которые влияют на результат. И т.п. тонкости.

На первой странице темы я привёл ссылку документацию. В документации описано, что делает каждая функцию, какие параметры принимает. К сожалению, у меня нет времени писать комментарии. Я был бы рад, чтобы кто-нибудь тоже публиковал сюда свои примеры либо с подробными комментариями, описанием, либо без них - я по коду и документации пойму. Я стараюсь делать примеры как можно меньше, чтобы каждый из них демонстрировал какую-то отдельную сущность, или комбинацию нескольких сущностей. Чтобы каждый пример был самостоятельный, законченный, и его можно было запустить на jsfiddle или скопировать и сохранить в index.html. Когда код однотипный, то мы невольно его лучше запоминаем и с каждым прочтением его лучше понимаем, потому что видим его часто и регулярно, пока он не оказывается в долговременной памяти.

8Observer8 · 27.11.2017, 21:40

WebGL 1.0. Вращение перед перемещением по клику мыши

https://jsfiddle.net/4fxmLhmc/

022_rotation_before_translation_by_mouse_click.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Rotation before translation on mouse click</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #e0aeae;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `precision mediump float;
            uniform vec3 u_Color;

            void main()
            {
                gl_FragColor = vec4(u_Color, 1.0);
            }`;

        var canvas = document.getElementById("renderCanvas");
        var gl = canvas.getContext("webgl");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        var angle = 0;
        var angleStep = 10;

        draw(angle);

        canvas.onmousedown = function ()
        {
            draw(angle);
            angle += angleStep;
        }

        function draw(angle)
        {
            mat4.identity(modelMatrix);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0));
            mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180);
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6));

            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.894, 0.976, 0.886, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 27.11.2017, 21:44

WebGL 2.0. Вращение перед перемещением по клику мыши

https://jsfiddle.net/cLxuo6jx/

022_rotation_before_translation_by_mouse_click.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Rotation before translation on mouse click</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #e0aeae;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;
            uniform vec3 u_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(u_Color, 1.0);
            }`;

        var canvas = document.getElementById("renderCanvas");
        var gl = canvas.getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        var angle = 0;
        var angleStep = 10;

        draw(angle);

        canvas.onmousedown = function ()
        {
            draw(angle);
            angle += angleStep;
        }

        function draw(angle)
        {
            mat4.identity(modelMatrix);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0));
            mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180);
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6));

            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.894, 0.976, 0.886, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 27.11.2017, 22:33

WebGL 1.0. Вращение после перемещения по клику мыши

https://jsfiddle.net/ue911jao/

023_rotation_after_translation_by_mouse_click.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Rotation after translation on mouse click</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #e0aeae;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `precision mediump float;
            uniform vec3 u_Color;

            void main()
            {
                gl_FragColor = vec4(u_Color, 1.0);
            }`;

        var canvas = document.getElementById("renderCanvas");
        var gl = canvas.getContext("webgl");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        var angle = 0;
        var angleStep = 10;

        draw(angle);

        canvas.onmousedown = function ()
        {
            draw(angle);
            angle += angleStep;
        }

        function draw(angle)
        {
            mat4.identity(modelMatrix);
            mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0));
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6));

            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.894, 0.976, 0.886, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 27.11.2017, 22:41

WebGL 2.0. Вращение после перемещения по клику мыши

https://jsfiddle.net/55xx969b/

023_rotation_after_translation_by_mouse_click.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Rotation after translation on mouse click</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #e0aeae;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;
            uniform vec3 u_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(u_Color, 1.0);
            }`;

        var canvas = document.getElementById("renderCanvas");
        var gl = canvas.getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        var angle = 0;
        var angleStep = 10;

        draw(angle);

        canvas.onmousedown = function ()
        {
            draw(angle);
            angle += angleStep;
        }

        function draw(angle)
        {
            mat4.identity(modelMatrix);
            mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0));
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6));

            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.894, 0.976, 0.886, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 28.11.2017, 10:44

WebGL 1.0. Масштабирование по клику мыши

https://jsfiddle.net/m86tq8t2/

024_scaling_on_mouse_click.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Scaling on mouse click</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #e0aeae;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `precision mediump float;
            uniform vec3 u_Color;

            void main()
            {
                gl_FragColor = vec4(u_Color, 1.0);
            }`;

        var canvas = document.getElementById("renderCanvas");
        var gl = canvas.getContext("webgl");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");

        var maxScale = 1.5;
        var minScale = 0.5;
        var currentscale = minScale;
        var scaleStep = 0.1;

        draw(currentscale);

        canvas.onmousedown = function ()
        {
            currentscale += scaleStep;

            if (currentscale > maxScale)
            {
                scaleStep *= -1;
                currentscale = maxScale;
            }
            else if (currentscale < minScale)
            {
                scaleStep *= -1;
                currentscale = minScale;
            }

            draw(currentscale);
        }

        function draw(scale)
        {
            mat4.identity(modelMatrix);
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(scale, scale, scale));

            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.894, 0.976, 0.886, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 28.11.2017, 10:48

WebGL 2.0. Масштабирование по клику мыши

https://jsfiddle.net/kffdhsvw/

024_scaling_on_mouse_click.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Scaling on mouse click</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #e0aeae;
        }
    </style>
</head>

<body>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;
            uniform vec3 u_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(u_Color, 1.0);
            }`;

        var canvas = document.getElementById("renderCanvas");
        var gl = canvas.getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");

        var maxScale = 1.5;
        var minScale = 0.5;
        var currentscale = minScale;
        var scaleStep = 0.1;

        draw(currentscale);

        canvas.onmousedown = function ()
        {
            currentscale += scaleStep;

            if (currentscale > maxScale)
            {
                scaleStep *= -1;
                currentscale = maxScale;
            }
            else if (currentscale < minScale)
            {
                scaleStep *= -1;
                currentscale = minScale;
            }

            draw(currentscale);
        }

        function draw(scale)
        {
            mat4.identity(modelMatrix);
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(scale, scale, scale));

            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.894, 0.976, 0.886, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 29.11.2017, 11:36

WebGL 1.0. Перемещение квадрата с помощью клавиш WASD и клавиш-стрелок

https://jsfiddle.net/tqnfyy53/

025_square_translation_using_keys.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Square translation using WASD and arrow keys</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #aaaaaa;
        }
    </style>
</head>

<body>
    <p>Click here to active the window</p>
    <p>Use WASD or arrow keys</p>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `attribute vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `precision mediump float;
            uniform vec3 u_Color;

            void main()
            {
                gl_FragColor = vec4(u_Color, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.635, 0.450, 0.125);

        var modelMatrix = mat4.create();
        var pos = { x: 0.1, y: 0.1 };
        var step = 0.2;

        window.addEventListener('keydown', function (event)
        {
            if (event.keyCode === 87 || event.keyCode === 38) // W, Up
                pos.y += step;
            else if (event.keyCode === 65 || event.keyCode === 37) // A, Left
                pos.x -= step;
            else if (event.keyCode === 83 || event.keyCode === 40) // S, Down
                pos.y -= step;
            else if (event.keyCode === 68 || event.keyCode === 39) // D, Right
                pos.x += step;
            draw(pos);
        });

        draw(pos);

        function draw(pos)
        {
            mat4.identity(modelMatrix);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(pos.x, pos.y, 0.0));
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.2, 0.2, 0.2));

            var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.898, 0.984, 0.905, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

8Observer8 · 29.11.2017, 11:41

WebGL 2.0. Перенос квадрата с помощью клавиш WASD и клавиш-стрелок

https://jsfiddle.net/14z5m5hh/

025_square_translation_using_keys.gif

Код:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Square translation using WASD and arrow keys</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #aaaaaa;
        }
    </style>
</head>

<body>
    <p>Click here to active the window</p>
    <p>Use WASD or arrow keys</p>
    <canvas id="renderCanvas" width="250" height="250"></canvas>

    <script>
        var vertexShaderSource =
            `#version 300 es
            
            in vec2 a_Position;
            uniform mat4 u_ModelMatrix;

            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
            }`;

        var fragmentShaderSource =
            `#version 300 es
            
            precision mediump float;
            uniform vec3 u_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(u_Color, 1.0);
            }`;

        var gl = document.getElementById("renderCanvas").getContext("webgl2");

        var vShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vShader, vertexShaderSource);
        gl.compileShader(vShader);

        var fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fragmentShaderSource);
        gl.compileShader(fShader);

        var program = gl.createProgram();
        gl.attachShader(program, vShader);
        gl.attachShader(program, fShader);
        gl.linkProgram(program);
        gl.useProgram(program);

        var vertices = new Float32Array([
            -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
        ]);

        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var u_Color = gl.getUniformLocation(program, "u_Color");
        gl.uniform3f(u_Color, 0.635, 0.450, 0.125);

        var modelMatrix = mat4.create();
        var pos = { x: 0.1, y: 0.1 };
        var step = 0.2;

        window.addEventListener('keydown', function (event)
        {
            if (event.keyCode === 87 || event.keyCode === 38) // W, Up
                pos.y += step;
            else if (event.keyCode === 65 || event.keyCode === 37) // A, Left
                pos.x -= step;
            else if (event.keyCode === 83 || event.keyCode === 40) // S, Down
                pos.y -= step;
            else if (event.keyCode === 68 || event.keyCode === 39) // D, Right
                pos.x += step;
            draw(pos);
        });

        draw(pos);

        function draw(pos)
        {
            mat4.identity(modelMatrix);
            mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(pos.x, pos.y, 0.0));
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.2, 0.2, 0.2));

            var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

            gl.clearColor(0.898, 0.984, 0.905, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
    </script>
</body>

</html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
WebGL developer	Ojoteam	Фриланс	0	19.05.2017 12:37
Ищу моделера для браузерной WebGL игры	Kempston	Gamedev - cоздание игр: Unity, OpenGL, DirectX	0	31.03.2016 21:23
Пример использования Gera WebGL 3D Library	rekodDeveloper	JavaScript, Ajax	5	02.06.2015 16:05
Вопрос по Webgl	Halk_blr	Помощь студентам	0	23.02.2014 23:19
WebGl, использование Three.js оптимизировать и подправить код	dem66	JavaScript, Ajax	0	23.06.2012 20:14

26.11.2017, 20:28	#51
kvitaliy Участник клуба Регистрация: 17.05.2011 Сообщений: 1,660	Всё это чрезвычайно интересно. И реально работает в обычном браузере. Но одно пожелание - можно комментировать примеры, зачем нужны те или иные функции, какие параметры применяются. А то на первый взгляд все 5 страниц однотипного кода, т.е. что то можно не повторять, вносить только те изменения, которые влияют на результат. И т.п. тонкости.