Практическое применение системы оздоровления Игоря Шиманского
Практическое применение WebGL
-
Upload
vasilika-klimova -
Category
Internet
-
view
88 -
download
1
Transcript of Практическое применение WebGL
![Page 1: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/1.jpg)
Практическое применение
WebGL
Василика Климова
Разработчик интерфейсов
Artec 3D @lik04ka
![Page 2: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/2.jpg)
Artec 3D
• Artec 3D
• Shapify
• Viewshape
2
![Page 3: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/3.jpg)
Shapify Booth3
![Page 4: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/4.jpg)
Содержание
• WebGL
• Язык шейдеров
• Фильтрация текстур
• Постобработка
• Частицы
• Отладка
4
![Page 5: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/5.jpg)
![Page 11: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/11.jpg)
Unity 3D11
![Page 12: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/12.jpg)
Blend4Web
blend4web.com
12
![Page 13: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/13.jpg)
GL-React
projectseptemberinc.gitbooks.io
13
![Page 14: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/14.jpg)
WebGL 1.0
• HTML5 <canvas>
• OpenGL ES 2.0
• GLSL ES 1.1
• 2D/3D
14
![Page 16: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/16.jpg)
Проверка поддержки WebGL
get.webgl.org
Your browser supports WebGLYou should see a spinning cube. If you do not, please
visit the support site for your browser.
16
![Page 17: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/17.jpg)
WebGL
+ + GLSL ES
17
![Page 18: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/18.jpg)
Программа на WebGL18
![Page 19: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/19.jpg)
Точка19
![Page 21: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/21.jpg)
Взаимосвязь21
![Page 22: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/22.jpg)
Взаимосвязь22
![Page 23: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/23.jpg)
Взаимосвязь23
![Page 24: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/24.jpg)
Взаимосвязь24
![Page 25: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/25.jpg)
Шейдеры
![Page 26: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/26.jpg)
GLSL
• Синтаксис C
• Типы
• Задействует GPU
• Строки
• Runtime
26
![Page 27: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/27.jpg)
Виды шейдеров
• Вершинные шейдеры
• Фрагментные шейдеры
27
![Page 28: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/28.jpg)
Растеризация
28
![Page 29: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/29.jpg)
Типы данных
• bool
• int
• float
• vec2 / vec3 / vec4
• mat2 / mat3 / mat4
• sampler2D
29
![Page 30: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/30.jpg)
Типы классификаторовОписатели/Шейдеры Вершинный Фрагментный
attribute READ -
uniform READ READ
varying READ/WRITE READ
30
![Page 31: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/31.jpg)
Матрица Модели-Вида-Проекции31
![Page 32: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/32.jpg)
Вершинный шейдер
<script type="x-shader/x-vertex" id="vshader">
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
</script>
01.
02.
03.
04.
05.
06.
07.
08.
32
![Page 33: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/33.jpg)
Фрагментный шейдер.Текстурирование
<script type="x-shader/x-fragment" id="fshader">
uniform sampler2D u_Sampler;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(u_Sampler, vUv);
}
</script>
01.
02.
03.
04.
05.
06.
07.
33
![Page 34: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/34.jpg)
Материал из шейдераvar vShader = document.getElementById("vshader").text;
var fShader = document.getElementById("fshader").text;
object.material = new THREE.ShaderMaterial({
uniforms: {
u_Sampler: {type: "t", value: texture}
},
vertexShader: vShader,
fragmentShader: fShader,
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
34
![Page 35: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/35.jpg)
Модель с текстурой35
![Page 36: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/36.jpg)
Черно-белый фильтрfilter: grayscale(100%);
36
![Page 37: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/37.jpg)
Черно-белый фильтр37
![Page 38: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/38.jpg)
Фрагментный шейдер. ЧБ текстура
<script type="x-shader/x-fragment" id="fshader">
uniform sampler2D u_Sampler;
varying vec2 vUv;
void main() {
vec4 color = texture2D(u_Sampler, vUv);
color.rgb = vec3(color.r + color.g + color.b)/3.0;
gl_FragColor = color;
}
</script>
01.
02.
03.
04.
05.
06.
07.
08.
09.
38
![Page 39: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/39.jpg)
Сепия
float tone = 0.299 * col.r + 0.587 * col.g + 0.114 * col.b;
col.r = (tone > (0.81)) ? 1.0 : tone + 0.19;
col.g = (tone < (0.055)) ? 0.0 : tone - 0.055;
col.b = (tone < (0.22)) ? 0.0 : tone - 0.22;
gl_FragColor = col;
01.
02.
03.
04.
05.
39
![Page 40: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/40.jpg)
Сепия40
![Page 41: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/41.jpg)
Отрисовка
renderer = new THREE.WebGLRenderer()
animate();
animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
01.
02.
03.
04.
05.
06.
41
![Page 42: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/42.jpg)
Cartoon шейдер. Примеры42
![Page 43: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/43.jpg)
Cartoon шейдер. КодHueLevels[0] = 0.0;
HueLevels[1] = 80.0;
HueLevels[2] = 160.0;
HueLevels[3] = 240.0;
HueLevels[4] = 320.0;
HueLevels[5] = 360.0;
if (color == "Hue")
for (int i = 0; i<HueLevCount-1; i++)
if (col >= HueLevels[i] && col <= HueLevels[i+1])
return HueLevels[i+1];
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
43
![Page 44: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/44.jpg)
Постобработка
composer = new THREE.EffectComposer(renderer);
composer.addPass( new THREE.RenderPass(scene, camera) );
Toon = { uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
};
effect = new THREE.ShaderPass(Toon);
effect.renderToScreen = true;
composer.addPass(effect);
01.
02.
03.
04.
05.
06.
44
![Page 45: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/45.jpg)
Отображениеanimate();
animate: function() {
requestAnimationFrame(animate);
composer.render();
}
01.
02.
03.
04.
05.
45
![Page 46: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/46.jpg)
Сцена с постобработкой
threejs.org/examples
46
![Page 47: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/47.jpg)
Частицы
![Page 48: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/48.jpg)
Сравнение визуализации частиц48
![Page 49: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/49.jpg)
Частицы
particleObj = new THREE.ParticleSystem(geometry, material);
particleObj.position.set(0, 50, 0);
particleObj.dynamic = true;
particleObj.sortParticles = true;
scene.add( particleObj );
01.
02.
03.
04.
05.
49
![Page 50: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/50.jpg)
Частицы
http://oos.moxiecode.com/js_webgl/particles_morph/
50
![Page 51: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/51.jpg)
Отладка
• Three.js Inspector
• WebGL-Inspector
• Mozilla Shader Editor
51
![Page 52: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/52.jpg)
Преимущества WebGL
• Производительность за счет GPU
• Отсутствие компиляции
• Кроссплатформенность
• Автоматическое управление памятью
• Открытый стандарт
52
![Page 53: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/53.jpg)
Недостатки
• Многополигональные сцены
• Требуется оптимизация
• Растровая графика
53
![Page 54: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/54.jpg)
Практическое применение WebGL
• Визуализации растровой графики
• Редактирование и анализ изображений
• Фильтрация видео
• Интерактивая графика
• Игры
• Статистика в виде графиков
54
![Page 55: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/55.jpg)
Интерактивность55
![Page 57: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/57.jpg)
Полезные ссылки
• learningwebgl.com
• webglacademy.com
• davidscottlyons.com/threejs
• Книга WebGL. Программирование трехмерной графики
• Видео уроки Никиты Северинова diductio.ru/course/2060/
57
![Page 59: Практическое применение WebGL](https://reader034.fdocument.pub/reader034/viewer/2022042604/588148661a28abf65a8b76ff/html5/thumbnails/59.jpg)
Василика Климова
likita
vasilika.klimova
lik04ka
Спасибо за внимание!
59