Форум программистов, компьютерный форум, киберфорум
Наши страницы
OpenGL
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 2, средняя оценка - 5.00
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
#1

Небольшие примеры на WebGL - OpenGL

19.11.2017, 16:43. Просмотров 2582. Ответов 69
Метки нет (Все метки)

Предлагаю выкладывать в этой теме свои небольшие примеры на WebGL. Лучший способ чему-то научиться - это много практиковаться, создавая примеры.

Какими браузерами поддерживается WebGL, можно посмотреть здесь:
Краткое описание, что такое WebGL, и ссылки на спецификации: https://www.khronos.org/webgl/

Книга на русском по WebGL 1.0: WebGL. Программирование трехмерной графики
Исходники к книге: examples.zip
Исходники к книге на JSFiddle

Chapter 02. Your First Step with WebGL
ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/
ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/
ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/
ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/
ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/

Chapter 03. Drawing and Transforming Triangles
ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/
ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/
ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/
ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/
ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/
ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/
ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/
ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/
ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/
ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/
ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/

Chapter 04. More Transformations and Basic Animation
ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/
ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/
ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/
ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/
ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/
ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/

Chapter 05. Using Colors and Texture Images
ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/
ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/
ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/
ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/
ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/
ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/
ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/
ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/
ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/

Chapter 07. Toward the 3D World
ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/
ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/
ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/
ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/
ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/
ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/
ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/
ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/
ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/
ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/
ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/
ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/
ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/
ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/
ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/
ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/

Chapter 08. Lighting Objects
ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/
ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/
ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/
ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/
ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/
ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/
ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/
ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/
ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/
ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/

Chapter 09. Hierarchical Objects
ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/
ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/
ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/

Chapter 10. Advanced Techniques
ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/
ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/
ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/
ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/
ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/
ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/
ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/
ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/
ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/
ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/
ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/
ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/
ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/
ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/
ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/
ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/
ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/

Gifts
gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/
gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/
gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/
gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/
gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/
gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/
gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/
appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/

Appendix
appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/
appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/


Туториал на русском по WebGL 1.0
Туториал на английском по WebGL 2.0
http://www.cyberforum.ru/opengl/thread927687.html
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.11.2017, 16:43
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Небольшие примеры на WebGL (OpenGL):

Не отрисовывается фигура в Webgl
Здравствуйте. Начинаю осваивать webgl. Начал с изучения этих уроков. Прочитал и...

Не правильное вращение пирамиды WebGL
Привет. Не могу понять из-за чего пирамида так странно поварачивается. Если...

WebGL - глубина отрисовки объектов
Прошу помочь тех кто сталкивался или знает как решить проблему: Суть: есть...

Нужно сделать цветочек на Webgl
Помогите сделать цветочек простой на webgl. Может кто делал уже.

Нужно сделать ёлку на Webgl
Помогите сделать елочку на webgl, может кто делал.

69
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
26.11.2017, 19:05  [ТС] #41
WebGL 2.0. Вращение квадрата с помощью библиотеки glMatrix

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

Название: 020_rotate_square_using_gl_matrix.png
Просмотров: 24

Размер: 2.1 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
26.11.2017, 19:27  [ТС] #42
WebGL 1.0. Масштабирование квадрата с помощью библиотеки glMatrix

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

Название: 021_scale_square_using_gl_matrix.png
Просмотров: 23

Размер: 794 байт

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
26.11.2017, 19:32  [ТС] #43
WebGL 2.0. Масштабирование квадрата с помощью библиотеки glMatrix

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

Название: 021_scale_square_using_gl_matrix.png
Просмотров: 24

Размер: 794 байт

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
27.11.2017, 21:39  [ТС] #44
WebGL 1.0. Вращение перед перемещением по клику мыши

https://jsfiddle.net/4fxmLhmc/

Название: 022_rotation_before_translation_by_mouse_click.gif
Просмотров: 22

Размер: 21.4 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
27.11.2017, 21:44  [ТС] #45
WebGL 2.0. Вращение перед перемещением по клику мыши

https://jsfiddle.net/cLxuo6jx/

Название: 022_rotation_before_translation_by_mouse_click.gif
Просмотров: 22

Размер: 21.4 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
27.11.2017, 22:31  [ТС] #46
WebGL 1.0. Вращение после перемещения по клику мыши

https://jsfiddle.net/ue911jao/

Название: 023_rotation_after_translation_by_mouse_click.gif
Просмотров: 87

Размер: 95.1 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
27.11.2017, 22:41  [ТС] #47
WebGL 2.0. Вращение после перемещения по клику мыши

https://jsfiddle.net/55xx969b/

Название: 023_rotation_after_translation_by_mouse_click.gif
Просмотров: 87

Размер: 95.1 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
28.11.2017, 10:42  [ТС] #48
WebGL 1.0. Масштабирование по клику мыши

https://jsfiddle.net/m86tq8t2/

Название: 024_scaling_on_mouse_click.gif
Просмотров: 85

Размер: 34.6 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
28.11.2017, 10:48  [ТС] #49
WebGL 2.0. Масштабирование по клику мыши

https://jsfiddle.net/kffdhsvw/

Название: 024_scaling_on_mouse_click.gif
Просмотров: 84

Размер: 34.6 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
29.11.2017, 11:35  [ТС] #50
WebGL 1.0. Перемещение квадрата с помощью клавиш WASD и клавиш-стрелок

https://jsfiddle.net/tqnfyy53/

Название: 025_square_translation_using_keys.gif
Просмотров: 83

Размер: 20.1 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
29.11.2017, 11:40  [ТС] #51
WebGL 2.0. Перенос квадрата с помощью клавиш WASD и клавиш-стрелок

https://jsfiddle.net/14z5m5hh/

Название: 025_square_translation_using_keys.gif
Просмотров: 83

Размер: 20.1 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!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>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
30.11.2017, 08:25  [ТС] #52
WebGL 1.0. Наложение текстуры на квадрат

https://jsfiddle.net/zjydm1ev/

Название: 026_applying_a_texture_to_a_square.png
Просмотров: 80

Размер: 99.1 Кб

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Applying a texture to a square</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;
            attribute vec2 a_TexCoord;
            uniform mat4 u_ModelMatrix;
            varying vec2 v_TexCoord;
 
            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
                v_TexCoord = a_TexCoord;
            }`;
 
        var fragmentShaderSource =
            `
            precision mediump float;
            uniform sampler2D u_Sampler;
            varying vec2 v_TexCoord;
 
            void main()
            {
                gl_FragColor = texture2D(u_Sampler, v_TexCoord);
            }`;
 
        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 verticesAndTexCoords = new Float32Array([
            -0.5, 0.5, 0.0, 1.0,    // (x, y), (u, v)
            -0.5, -0.5, 0.0, 0.0,
            0.5, 0.5, 1.0, 1.0,
            0.5, -0.5, 1.0, 0.0
        ]);
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW);
 
        var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT;
 
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);
 
        var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord");
        gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_TexCoord);
 
        var image = new Image();
 
        image.onload = function ()
        {
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
            gl.activeTexture(gl.TEXTURE0);
 
            var texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
 
            var u_Sampler = gl.getUniformLocation(program, "u_Sampler");
            gl.uniform1i(u_Sampler, 0);
 
            var modelMatrix = mat4.create();
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5));
 
            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);
        }
        image.crossOrigin = "";
        image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg';
    </script>
</body>
 
</html>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
30.11.2017, 08:31  [ТС] #53
WebGL 2.0. Наложение текстуры на квадрат

https://jsfiddle.net/gd2uo3jg/

Название: 026_applying_a_texture_to_a_square.png
Просмотров: 80

Размер: 99.1 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Applying a texture to a square</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;
            in vec2 a_TexCoord;
            uniform mat4 u_ModelMatrix;
            out vec2 v_TexCoord;
 
            void main()
            {
                gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
                v_TexCoord = a_TexCoord;
            }`;
 
        var fragmentShaderSource =
            `#version 300 es
 
            precision mediump float;
            uniform sampler2D u_Sampler;
            in vec2 v_TexCoord;
            out vec4 fragColor;
 
            void main()
            {
                fragColor = texture(u_Sampler, v_TexCoord);
            }`;
 
        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 verticesAndTexCoords = new Float32Array([
            -0.5, 0.5, 0.0, 1.0,    // (x, y), (u, v)
            -0.5, -0.5, 0.0, 0.0,
            0.5, 0.5, 1.0, 1.0,
            0.5, -0.5, 1.0, 0.0
        ]);
 
        var vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
        gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW);
 
        var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT;
 
        var a_Position = gl.getAttribLocation(program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);
 
        var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord");
        gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE);
        gl.enableVertexAttribArray(a_TexCoord);
 
        var image = new Image();
 
        image.onload = function ()
        {
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
            gl.activeTexture(gl.TEXTURE0);
 
            var texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D , 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
 
            var u_Sampler = gl.getUniformLocation(program, "u_Sampler");
            gl.uniform1i(u_Sampler, 0);
 
            var modelMatrix = mat4.create();
            mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5));
 
            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);
        }
        image.crossOrigin = "";
        image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg';
    </script>
</body>
 
</html>
1
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
08.12.2017, 22:52  [ТС] #54
WebGL 1.0. Анимация вращения

https://jsfiddle.net/748jf6qw/

Название: 27_rotation_animation.gif
Просмотров: 69

Размер: 261.8 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 1.0. Rotation animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #a8bdc4;
        }
    </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 u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
 
        gl.clearColor(0.894, 0.976, 0.886, 1.0);
 
        var ANGLE_STEP = 45.0; // Rotation angle (degrees/second)
        var g_last = Date.now();
 
        var currentAngle = 0.0;
        var modelMatrix = mat4.create();
 
        var tick = function ()
        {
            currentAngle = animate(currentAngle);  // Update the rotation angle
            draw(4, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle
            requestAnimationFrame(tick, canvas); // Request that the browser calls tick
        };
        tick();
 
        function draw(n, currentAngle, modelMatrix, u_ModelMatrix)
        {
            mat4.identity(modelMatrix);
            mat4.rotateZ(modelMatrix, modelMatrix, currentAngle * Math.PI / 180);
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
        }
 
        function animate(angle)
        {
            // Calculate the elapsed time
            var now = Date.now();
            var elapsed = now - g_last;
            g_last = now;
            // Update the current rotation angle (adjusted by the elapsed time)
            var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
            return newAngle %= 360;
        }
    </script>
</body>
 
</html>
1
Antikl
с++
272 / 268 / 146
Регистрация: 15.07.2015
Сообщений: 1,471
Завершенные тесты: 6
08.12.2017, 23:02 #55
Цитата Сообщение от 8Observer8 Посмотреть сообщение
WebGL 1.0. Анимация вращения
вы так в скором времени выложите движок
0
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
08.12.2017, 23:07  [ТС] #56
WebGL 2.0. Анимация вращения

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

Название: 27_rotation_animation.gif
Просмотров: 70

Размер: 261.8 Кб

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>WebGL 2.0. Rotation animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
    <style>
        #renderCanvas {
            border: 5px solid #a8bdc4;
        }
    </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 u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
 
        gl.clearColor(0.894, 0.976, 0.886, 1.0);
 
        var ANGLE_STEP = 45.0; // Rotation angle (degrees/second)
        var g_last = Date.now();
 
        var currentAngle = 0.0;
        var modelMatrix = mat4.create();
 
        var tick = function ()
        {
            currentAngle = animate(currentAngle);  // Update the rotation angle
            draw(4, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle
            requestAnimationFrame(tick, canvas); // Request that the browser calls tick
        };
        tick();
 
        function draw(n, currentAngle, modelMatrix, u_ModelMatrix)
        {
            mat4.identity(modelMatrix);
            mat4.rotateZ(modelMatrix, modelMatrix, currentAngle * Math.PI / 180);
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
        }
 
        function animate(angle)
        {
            // Calculate the elapsed time
            var now = Date.now();
            var elapsed = now - g_last;
            g_last = now;
            // Update the current rotation angle (adjusted by the elapsed time)
            var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
            return newAngle %= 360;
        }
    </script>
</body>
 
</html>
1
Опан
Юзер с абсолютным слухом
558 / 369 / 152
Регистрация: 17.12.2010
Сообщений: 1,122
09.01.2018, 11:07 #57
Программное рисование кругового узора и других замысловатых математических рисунков.
8Observer8, я сделал небольшое изменение строк с 56 по 65 в Вашем примере в посте #7 в этой теме, задал размер точки в один пиксель и добился рисования чуть более сложных рисунков, как на прикреплённых скринах. Соответственно, вариант 1:
Javascript
1
2
3
4
5
6
7
8
var radius = 1;
for (var angle = 0; angle < 360; angle += 0.003){
    radius = 0.5 + 0.5 * Math.sin(angle / 100);
    var x = radius * Math.sin(angle * Math.PI / 180) * Math.sin(angle * Math.PI / 180 * 173);
    var y = radius * Math.cos(angle * Math.PI / 180) * Math.sin(angle * Math.PI / 180 * 171);
    gl.vertexAttrib2f(a_Position, x, y);
    gl.drawArrays(gl.POINTS, 0, 1);
}
Вариант 2:
Javascript
1
2
3
4
5
6
7
8
9
var radius = 1, sdvig = 0;
for (var angle = 0; angle < 3600; angle += 0.1){
    var x = radius * Math.sin(angle * Math.PI / 180) * Math.sin((angle + sdvig) * Math.PI / 180 * 8);
    var y = radius * Math.cos(angle * Math.PI / 180) * Math.sin((angle + sdvig) * Math.PI / 180 * 8);
    radius -= 0.000017;
    sdvig -= 0.0012;
    gl.vertexAttrib2f(a_Position, x, y);
    gl.drawArrays(gl.POINTS, 0, 1);
}
3
Миниатюры
Небольшие примеры на WebGL  
Изображения
 
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
09.01.2018, 22:36  [ТС] #58
Вывод текста

Живая демка + исходники: https://plnkr.co/edit/GqmJ4uB5XmNB1Cu7qlhl?p=preview
Скачать исходники архивом: drawing-text.zip

Шрифты были созданы из TrueType и OpenType с помощью программы Bitmap Font Generator

Название: DrawingText2.gif
Просмотров: 55

Размер: 157.5 Кб

гифка побольше

Кликните для увеличения:
Небольшие примеры на WebGL
1
Igor3D
1227 / 594 / 74
Регистрация: 01.10.2012
Сообщений: 2,844
10.01.2018, 07:20 #59
Опан, спасибо, приятно было увидеть хоть какое-то творчество в этой нескончаемой унылой череде примеров. Таких штучек можно изготовить немало с помощью SuperFormula (SuperEllipse). Ну то наверное Вы в курсе
0
8Observer8
2037 / 1330 / 216
Регистрация: 05.10.2013
Сообщений: 4,219
Записей в блоге: 56
10.01.2018, 07:33  [ТС] #60
Математические формулы к сообщению #57

Называется "Dwitter", любой приходит, кодит, сразу видит результат, публикует в общую ленту, все лайкают. Суть в том, чтоб минимумом кода изобразить наиболее впечатляющую визуалку. Особенно оценят те, кто застал в 90-е эпоху микроскопических исполняемых файлов, рисующих сложную красоту.



Вот лучшие работы: https://www.dwitter.net/top


Если вы программист, и у вас много работы, то предупреждаю, вещь привязчивая, можно там зависнуть вместо основной работы.
Небольшие примеры на WebGL
1
10.01.2018, 07:33
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.01.2018, 07:33
Привет! Вот еще темы с решениями:

WebGl 2.0 Vertex Array Object (VAO)
Всем привет. Помогите пожалуйста разобраться с Vertex Array Object (VAO)....

WebGL, детализация текстуры при приближении
WebGL не совсем OpenGL, но мне бы просто идею узнать. А может кто и с threejs...

Технология освещения и нормали. Не могу разобраться (WebGL)
Изучаю WebGL по книге &quot;WebGL программирование трехмерной графики&quot;, вот ссылка...

Из какого 3d редактора и как можно экспортировать анимацию в WebGL?
С WebGL дело имею первый раз потому заранее извиняюсь за глупый вопрос и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
60
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru