Advertisement
Check these out next
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
May. 22, 2019•0 likes•176 views
0 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Современный фронтэнд – это не только React/Angular/Vue, вёрстка и анимации. Это ещё и полноценный 3D. Вместе с Андреем Дьяковым мы разбираем основы компьютерной графики, WebGL и Three.js, говорим об оптимизации трёхмерных приложений в современных браузерах и создаём интерактивное 3D-приложение прямо на докладе.
OdessaFrontendFollow
OdessaFrontendAdvertisement
Advertisement
Advertisement
Recommended
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18OdessaFrontend
Как правильно делать анимацию и добиться 60fps на различных девайсах | Odessa...OdessaFrontend
20111204 computer graphics_galinsky_lecture12_real_timeComputer Science Club
«3D-плеер на WebGL», Василика Климова, MoscowJS 21MoscowJS
JS Fest 2019. Игорь Березин и Николай Крещенко. Эволюция архитектуры многогра...JSFestUA
Интерактивные 3D-карты своими руками / Александр Амосов (Avito)Ontico
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
- Путь к WebGL через THREE.js
- Web-based Graphics Library
- gl = document.getElementById(‘glcanvas’).getContext(‘webgl’) HTML <canvas id="glcanvas"></canvas> JavaScript
- Graphics Library Shader Language
- 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); }
- Код взят на MDN
- Код взят на MDN
- Особенности
- Рендереры: Canvas, SVG или WebGL
- Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)
- Источники света: внешний, направленный, точечный; Тени: брошенные и полученные Камеры: перспективная или ортографическая Сцена: добавление и удаление объектов в режиме реального времени, туман Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; Модификаторы: ткань, выдавливание А также загрузчики данных, экспорт и импорт утилиты, поддержка сообщества, постоянные обновления, отличная документация и невероятное количество примеров и много-много других плюшек
- <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>
- <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>
- https://threejs.org/ https://discoverthreejs.com/tips-and-tricks/ https://thebookofshaders.com/ https://webglfundamentals.org/
- СПАСИБО ЗА ВНИМАНИЕ
- ВОПРОСЫ?
Advertisement