Форум программистов, компьютерный форум, киберфорум
Наши страницы
OpenGL
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.56/18: Рейтинг темы: голосов - 18, средняя оценка - 4.56
8Observer8
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
1

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

19.11.2017, 16:43. Просмотров 3224. Ответов 79

Предлагаю выкладывать в этой теме свои небольшие примеры на 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
1
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.11.2017, 16:43
Ответы с готовыми решениями:

Литература WebGL
подкиньте пожалуйста ссылочек на литературу, можно и платную, можно и...

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

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

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

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

79
8Observer8
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
26.11.2017, 19:05  [ТС] 41
WebGL 2.0. Вращение квадрата с помощью библиотеки glMatrix

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

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
26.11.2017, 19:27  [ТС] 42
WebGL 1.0. Масштабирование квадрата с помощью библиотеки glMatrix

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

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
26.11.2017, 19:32  [ТС] 43
WebGL 2.0. Масштабирование квадрата с помощью библиотеки glMatrix

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

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
27.11.2017, 21:39  [ТС] 44
WebGL 1.0. Вращение перед перемещением по клику мыши

https://jsfiddle.net/4fxmLhmc/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
27.11.2017, 21:44  [ТС] 45
WebGL 2.0. Вращение перед перемещением по клику мыши

https://jsfiddle.net/cLxuo6jx/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
27.11.2017, 22:31  [ТС] 46
WebGL 1.0. Вращение после перемещения по клику мыши

https://jsfiddle.net/ue911jao/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
27.11.2017, 22:41  [ТС] 47
WebGL 2.0. Вращение после перемещения по клику мыши

https://jsfiddle.net/55xx969b/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
28.11.2017, 10:42  [ТС] 48
WebGL 1.0. Масштабирование по клику мыши

https://jsfiddle.net/m86tq8t2/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
28.11.2017, 10:48  [ТС] 49
WebGL 2.0. Масштабирование по клику мыши

https://jsfiddle.net/kffdhsvw/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
29.11.2017, 11:35  [ТС] 50
WebGL 1.0. Перемещение квадрата с помощью клавиш WASD и клавиш-стрелок

https://jsfiddle.net/tqnfyy53/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
29.11.2017, 11:40  [ТС] 51
WebGL 2.0. Перенос квадрата с помощью клавиш WASD и клавиш-стрелок

https://jsfiddle.net/14z5m5hh/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
30.11.2017, 08:25  [ТС] 52
WebGL 1.0. Наложение текстуры на квадрат

https://jsfiddle.net/zjydm1ev/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
30.11.2017, 08:31  [ТС] 53
WebGL 2.0. Наложение текстуры на квадрат

https://jsfiddle.net/gd2uo3jg/

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

Размер: 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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
08.12.2017, 22:52  [ТС] 54
WebGL 1.0. Анимация вращения

https://jsfiddle.net/748jf6qw/

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

Размер: 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
с++
307 / 298 / 156
Регистрация: 15.07.2015
Сообщений: 1,577
Завершенные тесты: 6
08.12.2017, 23:02 55
Цитата Сообщение от 8Observer8 Посмотреть сообщение
WebGL 1.0. Анимация вращения
вы так в скором времени выложите движок
0
8Observer8
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
08.12.2017, 23:07  [ТС] 56
WebGL 2.0. Анимация вращения

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

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

Размер: 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
Опан
Юзер с абсолютным слухом
578 / 389 / 158
Регистрация: 17.12.2010
Сообщений: 1,164
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
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
09.01.2018, 22:36  [ТС] 58
Вывод текста

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

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

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

Размер: 157.5 Кб

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

Кликните для увеличения:
Небольшие примеры на WebGL
1
Igor3D
1227 / 594 / 74
Регистрация: 01.10.2012
Сообщений: 2,844
10.01.2018, 07:20 59
Опан, спасибо, приятно было увидеть хоть какое-то творчество в этой нескончаемой унылой череде примеров. Таких штучек можно изготовить немало с помощью SuperFormula (SuperEllipse). Ну то наверное Вы в курсе
0
8Observer8
2318 / 1478 / 245
Регистрация: 05.10.2013
Сообщений: 4,606
Записей в блоге: 58
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
Помогите сделать елочку на webgl, может кто делал.

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

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


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

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

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