Модератор
5047 / 3276 / 526
Регистрация: 01.06.2013
Сообщений: 6,806
Записей в блоге: 9
1

Высокая загрузка GPU и CPU на примерах по WebGL 2

21.09.2022, 13:16. Показов 864. Ответов 10
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Привет всем!
Просматриваю книжку
Real-Time 3D Graphics with WebGL 2 (Farhad Ghayour, Diego Cantor)
Высокая загрузка GPU и CPU на примерах по WebGL 2

к ней доступны примеры https://github.com/PacktPublis... th-WebGL-2
И вот, на примерах главы 5, где анимация начинается, в браузерах (проверял Edge,Chrome) тормоза, особенно по прошествии нескольких минут демонстрации, вплоть до невозможности редактировать строку адреса страницы в браузере.
Высокая загрузка GPU и CPU на примерах по WebGL 2

Например, на этой странице ch05/ch05_06_interpolation-final.html из архива.
Высокая загрузка GPU и CPU на примерах по WebGL 2


Железо i7-6700 3.40GHz, 8 GB. GeForce GT 730.
Ранее не замечал тормозов в браузере.

Вопрос: в чём причина? WebGL само по себе тормозное и требует более навороченного железа? У меня проблемы с компом? Конкретные примеры такие кривые?

p.s. Я в курсе что примеры нужно бы прикладывать прямо к письму, но там много зависимостей к файлам в том же архиве, авторские библиотеки js, модели. Дело не в одном конкретном примере, тормоза на всех хоть сколько то нетривиальных. Наверное, кто ни будь да знакомился с этой книжкой.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.09.2022, 13:16
Ответы с готовыми решениями:

Загрузка CPU и GPU
Здравствуйте. После покупки новой видеокарты возник вопрос. Это хорошо, что GPU грузиться на 95-99,...

Cisco 2950 высокая загрузка CPU
Доброго времени суток, Форумчане!) Столкнулся с одной проблемой, что на одной из Cisco 2950 в...

Неполная загрузка CPU и GPU
Добрый день ,в некоторых играх наблюдается неполная загрузка CPU и GPU ,при низком фпс (30-40 FPS)...

Realtek HD Audio (rthdcpl.exe) загрузка CPU и GPU. Майнер?
Видел много похожих тем и в каждой сказано, что процедура лечения предназначена для конкретного...

10
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 16:12 2
Цитата Сообщение от Curry Посмотреть сообщение
Железо i7-6700 3.40GHz, 8 GB. GeForce GT 730
Моё железо: i3 2.2 GHertz (2 cores), 8GB, GeForce GT 540M (1 GB)

Я сделал недавно эту демку на WebGL 1.0 с линейной интерполяцией и физическим движком Ammo.js. У меня вообще не тормозит. Только ноут со временем начинает шуметь выше среднего, но это из-за физического движка Ammo.js, на физическом движке Cannon-ES, по-моему, вообще не шумит.





Я книгу не читал, но пролистывал. Сложная она, пока она мне не нужна. Лучше начинать с WebGL. Программирование трехмерной графики (здесь примеры). Правда, в ней нет даже линейной интерполяции, которую я нашёл в других источниках (в примере из видео канала ThinMatrix в скелетной анимации). В примере темы я видел интерполяцию Лагранжа, не знаю её. Мне вполне хватает линейной. Тем более, что в glMatrix есть готовые функции для линейной интерполяции: vec3.lerp и quat.slerp

Я сегодня специально написал с нуля минимальный пример линейной интерполяции:

Название: linear-interpolation-webgl-js.gif
Просмотров: 61

Размер: 60.1 Кб

Песочница

PHP/HTML
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Linear Interpolation. WebGL, JavaScript</title>
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
    
    <script id="defaultVertexShader" type="x-shader/x-vertex">
        attribute vec2 aPosition;
        uniform mat4 uMvpMatrix;
        void main()
        {
            gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
        }
    </script>
 
    <script id="defaultFragmentShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec3 uColor;
        void main()
        {
            gl_FragColor = vec4(uColor, 1.0);
        }
    </script>
    
    <script>
        let gl, uMvpMatrixLocation;
 
        const mvpMatrix = glMatrix.mat4.create();
        const projViewMatrix = glMatrix.mat4.create();
        const modelMatrix = glMatrix.mat4.create();
        const rotationMatrix = glMatrix.mat4.create();
 
        let deltaTime, currentTime, lastTime;
        let currentAnimationTime, lastAnimationTime;
 
        let prevFrameIndex = 0;
        let nextFrameIndex = 1;
        let progression, totalTime;
        
        let prevTranslation = glMatrix.vec3.create();
        let nextTranslation = glMatrix.vec3.create();
        let prevRotation = glMatrix.quat.create();
        let nextRotation = glMatrix.quat.create();
        
        let currentTranslation = glMatrix.vec3.create();
        let currentRotation = glMatrix.quat.create();
 
        const timeLine = [0, 0.5, 1, 1.5, 2];
        const matrices = [
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 80, 20, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 80, 80, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 80, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1)
        ];
 
        // const m = glMatrix.mat4.create();
        // glMatrix.mat4.translate(m, m, glMatrix.vec3.fromValues(80, 20, 0));
        // glMatrix.mat4.rotate(m, m, 90 * Math.PI / 180, [0, 0, 1]);
        // console.log(m);
 
        function createWebGLContext(canvasName)
        {
            const canvas = document.getElementById(canvasName);
            if (!canvas) {
                console.log("Failed to get a canvas element with the name: " + canvasName);
                return null;
            }
            return canvas.getContext("webgl");
        }
 
        function createShader(shaderType, shaderSource)
        {
            const shader = gl.createShader(shaderType);
            gl.shaderSource(shader, shaderSource);
            gl.compileShader(shader);
            let ok = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!ok) {
                console.log(gl.getShaderInfoLog(shader));
                console.log("Shader: " + shaderSource);
                return null;
            };
            return shader;
        }
 
        function createProgram(vertexShaderName, fragmentShaderName)
        {
            const vShaderElement = document.getElementById(vertexShaderName);
            const fShaderElement = document.getElementById(fragmentShaderName);
 
            const vertShaderSource = vShaderElement.firstChild.textContent;
            const fragShaderSource = fShaderElement.firstChild.textContent;
 
            const vShader = createShader(gl.VERTEX_SHADER, vertShaderSource);
            const fShader = createShader(gl.FRAGMENT_SHADER, fragShaderSource);
            if (!vShader || !fShader) return null;
            
            const program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            ok = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!ok) {
                console.log("link: " + gl.getProgramInfoLog(program));
                return null;
            };
            return program;
        }
 
        function animationLoop()
        {
            requestAnimationFrame(animationLoop);
            
            currentTime = Date.now();
            deltaTime = (currentTime - lastTime) / 1000;
            lastTime = Date.now();
            currentAnimationTime += deltaTime;
            
            if (currentAnimationTime > timeLine[nextFrameIndex]) {
                prevFrameIndex++;
                nextFrameIndex++;
            }
 
            if (currentAnimationTime > lastAnimationTime) {
                currentAnimationTime = timeLine[0];
                prevFrameIndex = 0;
                nextFrameIndex = 1;
            }
 
            totalTime = timeLine[nextFrameIndex] - timeLine[prevFrameIndex];
            progression = (currentAnimationTime - timeLine[prevFrameIndex]) / totalTime;
 
            // Position
            glMatrix.mat4.getTranslation(prevTranslation, matrices[prevFrameIndex]);
            glMatrix.mat4.getTranslation(nextTranslation, matrices[nextFrameIndex]);
            glMatrix.vec3.lerp(currentTranslation, prevTranslation, nextTranslation, progression);
            // Rotation
            glMatrix.mat4.getRotation(prevRotation, matrices[prevFrameIndex]);
            glMatrix.mat4.getRotation(nextRotation, matrices[nextFrameIndex]);
            glMatrix.quat.slerp(currentRotation, prevRotation, nextRotation, progression);
            
            glMatrix.mat4.fromTranslation(modelMatrix, currentTranslation);
            glMatrix.mat4.fromQuat(rotationMatrix, currentRotation);
            glMatrix.mat4.mul(modelMatrix, modelMatrix, rotationMatrix);
            glMatrix.mat4.scale(modelMatrix, modelMatrix, [20, 20, 1]);
    
            glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
            gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
 
        function main()
        {
            gl = createWebGLContext("renderCanvas");
            if (!gl) return;
 
            const program = createProgram("defaultVertexShader", "defaultFragmentShader");
            if (!program) return;
            gl.useProgram(program);
            
            const projMatrix = glMatrix.mat4.create();
            glMatrix.mat4.ortho(projMatrix, 0, 100, 100, 0, -100, 100);
            
            const viewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.lookAt(viewMatrix, [0, 0, 90], [0, 0, 0], [0, 1, 0]);
 
            uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
            if (!uMvpMatrixLocation) {
                console.log("Failed to get a matrix location");
                return;
            }
            glMatrix.mat4.mul(projViewMatrix, projMatrix, viewMatrix);
            
            const uColorLocation = gl.getUniformLocation(program, "uColor");
            if (!uColorLocation) {
                console.log("Failed to get a color location");
                return;
            }
            const color = glMatrix.vec3.fromValues(0.5, 1, 0.5);
            gl.uniform3fv(uColorLocation, color);
            
            const vertPositions = [
                -0.5, -0.5,
                -0.5, 0.5,
                0.5, -0.5,
                0.5, 0.5
            ];
            const vertPosBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions), gl.STATIC_DRAW);
            
            const aPositionLocation = gl.getAttribLocation(program, "aPosition");
            gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPositionLocation);
            
            gl.clearColor(0.2, 0.2, 0.2, 1);
            
            currentAnimationTime = timeLine[0];
            lastAnimationTime = timeLine[timeLine.length - 1];
            lastTime = Date.now();
            animationLoop();
        }
        main();
    </script>
</body>
 
</html>
Миниатюры
Высокая загрузка GPU и CPU на примерах по WebGL 2
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 16:15 3
Curry, Моя демка с Jill сколько потребляет ресурсов у вас? У меня GPU 0%, скорее всего, из-за того, что браузер работает на интегрированной видеокарте ноутбук, у меня: Intel HD Graphics 3000 c OpenGL 3.1, но на график, видимо, её нельзя вывести.
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 16:25 4
Добавил поворот на 90 градусов на второй keyframe:

Название: linear-interpolation-webgl-js-rotation.gif
Просмотров: 65

Размер: 69.3 Кб

Песочница

PHP/HTML
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Linear Interpolation. WebGL, JavaScript</title>
    <script src="https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/gl-matrix-min.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
    
    <script id="defaultVertexShader" type="x-shader/x-vertex">
        attribute vec2 aPosition;
        uniform mat4 uMvpMatrix;
        void main()
        {
            gl_Position = uMvpMatrix * vec4(aPosition, 0.0, 1.0);
        }
    </script>
 
    <script id="defaultFragmentShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec3 uColor;
        void main()
        {
            gl_FragColor = vec4(uColor, 1.0);
        }
    </script>
    
    <script>
        let gl, uMvpMatrixLocation;
 
        const mvpMatrix = glMatrix.mat4.create();
        const projViewMatrix = glMatrix.mat4.create();
        const modelMatrix = glMatrix.mat4.create();
        const rotationMatrix = glMatrix.mat4.create();
 
        let deltaTime, currentTime, lastTime;
        let currentAnimationTime, lastAnimationTime;
 
        let prevFrameIndex = 0;
        let nextFrameIndex = 1;
        let progression, totalTime;
        
        let prevTranslation = glMatrix.vec3.create();
        let nextTranslation = glMatrix.vec3.create();
        let prevRotation = glMatrix.quat.create();
        let nextRotation = glMatrix.quat.create();
        
        let currentTranslation = glMatrix.vec3.create();
        let currentRotation = glMatrix.quat.create();
 
        const timeLine = [0, 0.5, 1, 1.5, 2];
 
        /*
        const matrices = [
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 80, 20, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 80, 80, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 80, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1)
        ];
        */
 
        const matrices = [
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1),
            glMatrix.mat4.fromValues(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 80, 20, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 80, 80, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 80, 0, 1),
            glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 20, 0, 1)
        ];
 
        /*
        const m = glMatrix.mat4.create();
        glMatrix.mat4.translate(m, m, glMatrix.vec3.fromValues(80, 20, 0));
        glMatrix.mat4.rotate(m, m, 90 * Math.PI / 180, [0, 0, 1]);
        console.log(m);
        */
 
        function createWebGLContext(canvasName)
        {
            const canvas = document.getElementById(canvasName);
            if (!canvas) {
                console.log("Failed to get a canvas element with the name: " + canvasName);
                return null;
            }
            return canvas.getContext("webgl");
        }
 
        function createShader(shaderType, shaderSource)
        {
            const shader = gl.createShader(shaderType);
            gl.shaderSource(shader, shaderSource);
            gl.compileShader(shader);
            let ok = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!ok) {
                console.log(gl.getShaderInfoLog(shader));
                console.log("Shader: " + shaderSource);
                return null;
            };
            return shader;
        }
 
        function createProgram(vertexShaderName, fragmentShaderName)
        {
            const vShaderElement = document.getElementById(vertexShaderName);
            const fShaderElement = document.getElementById(fragmentShaderName);
 
            const vertShaderSource = vShaderElement.firstChild.textContent;
            const fragShaderSource = fShaderElement.firstChild.textContent;
 
            const vShader = createShader(gl.VERTEX_SHADER, vertShaderSource);
            const fShader = createShader(gl.FRAGMENT_SHADER, fragShaderSource);
            if (!vShader || !fShader) return null;
            
            const program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            ok = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!ok) {
                console.log("link: " + gl.getProgramInfoLog(program));
                return null;
            };
            return program;
        }
 
        function animationLoop()
        {
            requestAnimationFrame(animationLoop);
            
            currentTime = Date.now();
            deltaTime = (currentTime - lastTime) / 1000;
            lastTime = Date.now();
            currentAnimationTime += deltaTime;
            
            if (currentAnimationTime > timeLine[nextFrameIndex]) {
                prevFrameIndex++;
                nextFrameIndex++;
            }
 
            if (currentAnimationTime > lastAnimationTime) {
                currentAnimationTime = timeLine[0];
                prevFrameIndex = 0;
                nextFrameIndex = 1;
            }
 
            totalTime = timeLine[nextFrameIndex] - timeLine[prevFrameIndex];
            progression = (currentAnimationTime - timeLine[prevFrameIndex]) / totalTime;
 
            // Position
            glMatrix.mat4.getTranslation(prevTranslation, matrices[prevFrameIndex]);
            glMatrix.mat4.getTranslation(nextTranslation, matrices[nextFrameIndex]);
            glMatrix.vec3.lerp(currentTranslation, prevTranslation, nextTranslation, progression);
            // Rotation
            glMatrix.mat4.getRotation(prevRotation, matrices[prevFrameIndex]);
            glMatrix.mat4.getRotation(nextRotation, matrices[nextFrameIndex]);
            glMatrix.quat.slerp(currentRotation, prevRotation, nextRotation, progression);
            
            glMatrix.mat4.fromTranslation(modelMatrix, currentTranslation);
            glMatrix.mat4.fromQuat(rotationMatrix, currentRotation);
            glMatrix.mat4.mul(modelMatrix, modelMatrix, rotationMatrix);
            glMatrix.mat4.scale(modelMatrix, modelMatrix, [20, 20, 1]);
    
            glMatrix.mat4.mul(mvpMatrix, projViewMatrix, modelMatrix);
            gl.uniformMatrix4fv(uMvpMatrixLocation, false, mvpMatrix);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        }
 
        function main()
        {
            gl = createWebGLContext("renderCanvas");
            if (!gl) return;
 
            const program = createProgram("defaultVertexShader", "defaultFragmentShader");
            if (!program) return;
            gl.useProgram(program);
            
            const projMatrix = glMatrix.mat4.create();
            glMatrix.mat4.ortho(projMatrix, 0, 100, 100, 0, -100, 100);
            
            const viewMatrix = glMatrix.mat4.create();
            glMatrix.mat4.lookAt(viewMatrix, [0, 0, 90], [0, 0, 0], [0, 1, 0]);
 
            uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
            if (!uMvpMatrixLocation) {
                console.log("Failed to get a matrix location");
                return;
            }
            glMatrix.mat4.mul(projViewMatrix, projMatrix, viewMatrix);
            
            const uColorLocation = gl.getUniformLocation(program, "uColor");
            if (!uColorLocation) {
                console.log("Failed to get a color location");
                return;
            }
            const color = glMatrix.vec3.fromValues(0.5, 1, 0.5);
            gl.uniform3fv(uColorLocation, color);
            
            const vertPositions = [
                -0.5, -0.5,
                -0.5, 0.5,
                0.5, -0.5,
                0.5, 0.5
            ];
            const vertPosBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPositions), gl.STATIC_DRAW);
            
            const aPositionLocation = gl.getAttribLocation(program, "aPosition");
            gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(aPositionLocation);
            
            gl.clearColor(0.2, 0.2, 0.2, 1);
            
            currentAnimationTime = timeLine[0];
            lastAnimationTime = timeLine[timeLine.length - 1];
            lastTime = Date.now();
            animationLoop();
        }
        main();
    </script>
</body>
 
</html>
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 16:35 5
Я использую WebGL 1.0 (базируется на OpenGL ES 2.0), потому что его вполне хватает и он есть на всех браузерах кроме мобильного Opera Mini: https://caniuse.com/webgl, а WebGL 2.0 (базируется на OpenGL ES 3.0) не поддерживается на четырёх браузерах: https://caniuse.com/webgl2 А ещё я собирал C++ приложения c OpenGL на Android из Qt и обнаружил, что на эмуляторе Android работает OpenGL ES 2.0, а OpenGL ES 3.0 почему-то не работал, поэтому я решил, чтобы не переписывать шейдеры с 2.0 и 3.0, использовать OpenGL 2.1 на Desktop, который переводится автоматически из Qt в OpenGL ES 2.0 для мобильных и WebGL 1.0 для веб.
0
Модератор
5047 / 3276 / 526
Регистрация: 01.06.2013
Сообщений: 6,806
Записей в блоге: 9
23.09.2022, 17:08  [ТС] 6
Цитата Сообщение от 8Observer8 Посмотреть сообщение
Curry, Моя демка с Jill сколько потребляет ресурсов у вас?
Походу у меня проблемы с компом. Открыл пример с jill. В браузере тормозов не заметил, но
Высокая загрузка GPU и CPU на примерах по WebGL 2




Цитата Сообщение от 8Observer8 Посмотреть сообщение
Я использую WebGL 1.0 (базируется на OpenGL ES 2.0), потому что его вполне хватает и он есть на всех браузерах кроме мобильного Opera Mini
Признаюсь что в WebGL я практически 0, разве что то что в половине вышеупомянутой книги прочитал. Просто возникла некая идея для которой нужно посмотреть в сторону 3D веб графики, ну и решил посмотреть, что такое WebGL. И по названиям доступных книг вижу где то WebGL 1, а где то и WebGL 2 описывается. Ну, думаю, WebGL 2 то по свежее будет, наверно сразу его нужно смотреть, сейчас быстро всё меняется, пока буду изучать, WebGL 1 уже устареет а выкатят какой ни будь WebGL 3. Возможно я переоценил прогресс в этой области.
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 18:02 7
Цитата Сообщение от Curry Посмотреть сообщение
а выкатят какой ни будь WebGL 3
Уже есть, называется WebGPU. Как в Википедии написано:

Он основан на API, предоставляемых Vulkan, Metal, and Direct3D 12 и предназначен для обеспечения высокой производительности через мобильные и настольные платформы.
Но, например, на моём ноутбуке его нет.

Цитата Сообщение от Curry Посмотреть сообщение
Ну, думаю, WebGL 2 то по свежее будет
Я заметил разницу только в добавлении VAO, в поддержке текстур размер которых не кратен 2 в степени n и в шейдерах вместо ключевых слов attribute/varying используются in/out. Есть, конечно, много чего что добавили и что я не использую, но в целом 2.0 включает в себя 1.0, потому перейти потом на 2.0 будет несложно. WebGPU я пока не рассматриваю, как и Vulkan (для dektop/mobile вместо OpenGL), потому на средних ноутбуках и средних Android'ах они отсутствуют. Изучать базу WebGL лучше всего на практике, делая маленькие игрушки или неигровые интерактивные примеры. Прочитайте хотя бы несколько первых глав этой книги, там отлично и просто объясняются основы работы шейдеров и матриц: WebGL. Программирование трехмерной графики
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 18:10 8
Судя по этой таблице: https://caniuse.com/?search=webgpu, WebGPU по умолчанию отключен во всех браузерах:



Зато WebGL на всех браузерах включен по умолчанию, кроме Opera Mini:



Миниатюры
Высокая загрузка GPU и CPU на примерах по WebGL 2
Высокая загрузка GPU и CPU на примерах по WebGL 2
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.09.2022, 18:22 9
Цитата Сообщение от 8Observer8 Посмотреть сообщение
отлично и просто объясняются основы работы шейдеров и матриц: WebGL. Программирование трехмерной графики
Я её сначала прочитал на русском в электронном виде, потому купил в бумажном на Ozon и прочитал и третий раз читаю кусками время от времени, когда что-то нужно вспомнить на английском в оригинале в электронном виде: WebGL Programming Guide
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
26.09.2022, 15:00 10
Одно из самых доступных для пониманию видео по введению в интерполяцию Лагранжа:



Добавлено через 3 минуты
Я считаю, что это по теме. Точнее, это дополняет тему, потому что в примере темы используется интерполяция Лагранжа. Видео - супер! Но сначала нужно понимать, как делать анимацию с помощью линейной интерполяции, как в моём примере в сообщении #3.
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
26.10.2022, 17:11 11
Добавил ещё линейную интерполяцию масштабирования: Анимация перемещения, поворота и масштабирования на keyframe'ах с помощью линейной интерполяции

0
26.10.2022, 17:11
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.10.2022, 17:11
Помогаю со студенческими работами здесь

GTX1060 + I5 6500 - низкая загрузка GPU, высока CPU. Bottleneck?
В Crysis 3 наблюдаю такую картину: Самый низкий фпс на карте welcome to the jungle (на скрине),...

Высокая загрузка CPU на "процессе" interrupts (около 20%)
Иногда Windows 7 начинает прилично тормозить. Это длится несколько минут. В это время Process...

Высокая температура GPU
Здравствуйте! Целую неделю ноутбук вырубается, в основном это происходит когда я пытаюсь играть в...

Высокая температура при низкой загрузки gpu?
Комплектующие: Видеоадаптер - MSI GeForce RTX 2060 VENTUS Тип ЦП -Intel Xeon E3-1240 Системная...

CPU и GPU
Всем привет! Кто знает в чем может быть проблема. После восстановления Винды10 к заводским...

GPU и CPU
Здравствуйте. Помогите понять - стоит ли вообще заниматься распараллеливанием на CPU, или теперь...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru