Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
•
0 likes•180 views
Современный фронтэнд – это не только React/Angular/Vue, вёрстка и анимации. Это ещё и полноценный 3D. Вместе с Андреем Дьяковым мы разбираем основы компьютерной графики, WebGL и Three.js, говорим об оптимизации трёхмерных приложений в современных браузерах и создаём интерактивное 3D-приложение прямо на докладе.
Recommended
Recommended
More Related Content
Similar to Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
Similar to Путь к WebGL через THREE.js | Odessa Frontend Meetup #12 (18)
More from OdessaFrontend
More from OdessaFrontend (20)
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
- 1. Путь к WebGL через THREE.js
- 10. gl = document.getElementById(‘glcanvas’).getContext(‘webgl’) HTML <canvas id="glcanvas"></canvas> JavaScript
- 11. Graphics Library Shader Language
- 15. uniform Transformation { mat4 projection_matrix; mat4 modelview_matrix; }; in vec3 vertex; void main() { gl_Position = projection_matrix * modelview_matrix * vec4(vertex, 1.0); } VERTEX SHADER FRAGMENT SHADER void main(void){ gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }
- 17. Код взят на MDN
- 18. Код взят на MDN
- 22. Особенности
- 23. Рендереры: Canvas, SVG или WebGL
- 24. Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)
- 25. Источники света: внешний, направленный, точечный; Тени: брошенные и полученные Камеры: перспективная или ортографическая Сцена: добавление и удаление объектов в режиме реального времени, туман Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; Модификаторы: ткань, выдавливание А также загрузчики данных, экспорт и импорт утилиты, поддержка сообщества, постоянные обновления, отличная документация и невероятное количество примеров и много-много других плюшек
- 26. <html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </html>
- 27. <html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </html>
- 31. ВОПРОСЫ?