Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Путь к WebGL через THREE.js | OdessaFrontend Meetup #12

23 views

Published on

Современный фронтэнд – это не только React/Angular/Vue, вёрстка и анимации. Это ещё и полноценный 3D.
Вместе с Андреем Дьяковым мы разбираем основы компьютерной графики, WebGL и Three.js, говорим об оптимизации трёхмерных приложений в современных браузерах и создаём интерактивное 3D-приложение прямо на докладе.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Путь к WebGL через THREE.js | OdessaFrontend Meetup #12

  1. 1. Путь к WebGL через THREE.js
  2. 2. Web-based Graphics Library
  3. 3. gl = document.getElementById(‘glcanvas’).getContext(‘webgl’) HTML <canvas id="glcanvas"></canvas> JavaScript
  4. 4. Graphics Library Shader Language
  5. 5. 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); }
  6. 6. Код взят на MDN
  7. 7. Код взят на MDN
  8. 8. Особенности
  9. 9. Рендереры: Canvas, SVG или WebGL
  10. 10. Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)
  11. 11. Источники света: внешний, направленный, точечный; Тени: брошенные и полученные Камеры: перспективная или ортографическая Сцена: добавление и удаление объектов в режиме реального времени, туман Объекты: сети, частицы, спрайты, линии, скелетная анимация и другое Геометрия: плоскость, куб, сфера, тор, 3D текст и другое; Модификаторы: ткань, выдавливание А также загрузчики данных, экспорт и импорт утилиты, поддержка сообщества, постоянные обновления, отличная документация и невероятное количество примеров и много-много других плюшек
  12. 12. <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>
  13. 13. <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>
  14. 14. https://threejs.org/ https://discoverthreejs.com/tips-and-tricks/ https://thebookofshaders.com/ https://webglfundamentals.org/
  15. 15. СПАСИБО ЗА ВНИМАНИЕ
  16. 16. ВОПРОСЫ?

×