Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > разработка игр, графический дизайн и моделирование > Gamedev - cоздание игр: Unity, OpenGL, DirectX
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 25.11.2017, 21:05   #41
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 1.0. Рисование многоугольника с помощью gl.TRIANGLE_STRIP

https://jsfiddle.net/8Observer8/586ss160/

017_drawing_polygon_using_triangle_strip.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a polygon using gl.TRIANGLE_STRIP</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </style>
</head>

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

    <script>
        var vertexShaderSource =
            `
            attribute vec2 a_Position;
            attribute vec3 a_Color;
            varying vec3 v_Color;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `
            precision mediump float;

            varying vec3 v_Color;

            void main()
            {
                gl_FragColor = vec4(v_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.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v2
            0.0, -0.5, 1.0, 0.0, 0.0,   // v3
            0.2, 0.7, 0.0, 1.0, 0.0,    // v4
            0.4, -0.5, 0.0, 0.0, 1.0,   // v5
            0.6, 0.3, 1.0, 0.0, 0.0,    // v6
        ]);

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

        var FSIZE = vertices.BYTES_PER_ELEMENT;

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

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 5 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_Color);

        gl.clearColor(0.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>
8Observer8 вне форума Ответить с цитированием
Старый 25.11.2017, 21:10   #42
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 2.0. Рисование многоугольника с помощью gl.TRIANGLE_STRIP

https://jsfiddle.net/8Observer8/6ccLwmwo/

017_drawing_polygon_using_triangle_strip.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a polygon using gl.TRIANGLE_STRIP</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </style>
</head>

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

    <script>
        var vertexShaderSource =
            `#version 300 es

            in vec2 a_Position;
            in vec3 a_Color;
            out vec3 v_Color;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            in vec3 v_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(v_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.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v2
            0.0, -0.5, 1.0, 0.0, 0.0,   // v3
            0.2, 0.7, 0.0, 1.0, 0.0,    // v4
            0.4, -0.5, 0.0, 0.0, 1.0,   // v5
            0.6, 0.3, 1.0, 0.0, 0.0,    // v6
        ]);

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

        var FSIZE = vertices.BYTES_PER_ELEMENT;

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

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 5 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_Color);

        gl.clearColor(0.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>
8Observer8 вне форума Ответить с цитированием
Старый 25.11.2017, 23:11   #43
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 1.0. Рисование многоугольника с помощью gl.TRIANGLE_FAN

https://jsfiddle.net/8Observer8/y95djnh7/

018_drawing_polygon_using_triangle_fan.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Drawing a polygon using gl.TRIANGLE_FAN</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </style>
</head>

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

    <script>
        var vertexShaderSource =
            `
            attribute vec2 a_Position;
            attribute vec3 a_Color;
            varying vec3 v_Color;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `
            precision mediump float;

            varying vec3 v_Color;

            void main()
            {
                gl_FragColor = vec4(v_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.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            0.0, -0.7, 1.0, 0.0, 0.0,   // v2
            0.4, -0.5, 0.0, 0.0, 1.0,   // v3
            0.6, 0.3, 1.0, 0.0, 0.0,    // v4
            0.2, 0.7, 0.0, 1.0, 0.0,    // v5
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v6
        ]);

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

        var FSIZE = vertices.BYTES_PER_ELEMENT;

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

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 5 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_Color);

        gl.clearColor(0.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_FAN, 0, 7);
    </script>
</body>

</html>
8Observer8 вне форума Ответить с цитированием
Старый 25.11.2017, 23:17   #44
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 2.0. Рисование многоугольника с помощью gl.TRIANGLE_FAN

https://jsfiddle.net/8Observer8/zpktzLdt/

018_drawing_polygon_using_triangle_fan.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Drawing a polygon using gl.TRIANGLE_FAN</title>
    <style>
        #renderCanvas {
            border: 5px solid #8f84e9;
        }
    </style>
</head>

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

    <script>
        var vertexShaderSource =
            `#version 300 es

            in vec2 a_Position;
            in vec3 a_Color;
            out vec3 v_Color;

            void main()
            {
                gl_Position = vec4(a_Position, 0.0, 1.0);
                v_Color = a_Color;
            }`;

        var fragmentShaderSource =
            `#version 300 es

            precision mediump float;

            in vec3 v_Color;
            out vec4 fragColor;

            void main()
            {
                fragColor = vec4(v_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.6, 0.3, 1.0, 0.0, 0.0,   // v0 (x, y), (r, g, b)
            -0.4, -0.5, 0.0, 1.0, 0.0,  // v1
            0.0, -0.7, 1.0, 0.0, 0.0,   // v2
            0.4, -0.5, 0.0, 0.0, 1.0,   // v3
            0.6, 0.3, 1.0, 0.0, 0.0,    // v4
            0.2, 0.7, 0.0, 1.0, 0.0,    // v5
            -0.2, 0.7, 0.0, 0.0, 1.0,   // v6
        ]);

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

        var FSIZE = vertices.BYTES_PER_ELEMENT;

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

        var a_Color = gl.getAttribLocation(program, "a_Color");
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 5 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_Color);

        gl.clearColor(0.956, 0.968, 0.890, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLE_FAN, 0, 7);
    </script>
</body>

</html>
8Observer8 вне форума Ответить с цитированием
Старый 26.11.2017, 18:18   #45
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

https://jsfiddle.net/8Observer8/t2q4rmnm/

019_translate_square_using_gl_matrix.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Translate a square using glMatrix</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>
    <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();
        mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0));

        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 вне форума Ответить с цитированием
Старый 26.11.2017, 18:23   #46
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

https://jsfiddle.net/8Observer8/o7bmuaaj/

019_translate_square_using_gl_matrix.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Translate a square using glMatrix</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>
    <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();
        mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0));

        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 вне форума Ответить с цитированием
Старый 26.11.2017, 19:01   #47
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 1.0. Вращение квадрата с помощью библиотеки glMatrix

https://jsfiddle.net/8Observer8/cqyu7zx9/

020_rotate_square_using_gl_matrix.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Rotate a square using glMatrix</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 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.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        mat4.rotateZ(modelMatrix, modelMatrix, 20 * Math.PI / 180);

        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        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 вне форума Ответить с цитированием
Старый 26.11.2017, 19:05   #48
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 2.0. Вращение квадрата с помощью библиотеки glMatrix

https://jsfiddle.net/8Observer8/v4atjmfh/

020_rotate_square_using_gl_matrix.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Rotate a square using glMatrix</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 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.207, 0.635, 0.125);

        var modelMatrix = mat4.create();
        mat4.rotateZ(modelMatrix, modelMatrix, 20 * Math.PI / 180);

        var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
        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 вне форума Ответить с цитированием
Старый 26.11.2017, 19:28   #49
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 1.0. Масштабирование квадрата с помощью библиотеки glMatrix

https://jsfiddle.net/8Observer8/xuz9wcxm/

021_scale_square_using_gl_matrix.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Scale a square using glMatrix</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #7cc1d3;
        }
    </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 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.486, 0.372, 0.749);

        var modelMatrix = mat4.create();
        mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.5, 0.5, 0.5));

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

        gl.clearColor(0.941, 0.960, 0.819, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>
8Observer8 вне форума Ответить с цитированием
Старый 26.11.2017, 19:33   #50
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

WebGL 2.0. Масштабирование квадрата с помощью библиотеки glMatrix

https://jsfiddle.net/8Observer8/6pLyzwaj/

021_scale_square_using_gl_matrix.png

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Scale a square using glMatrix</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #7cc1d3;
        }
    </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 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.486, 0.372, 0.749);

        var modelMatrix = mat4.create();
        mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.5, 0.5, 0.5));

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

        gl.clearColor(0.941, 0.960, 0.819, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

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

</html>
8Observer8 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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