Advertisement
Advertisement

More Related Content

Similar to Путь к WebGL через THREE.js | Odessa Frontend Meetup #12(18)

More from OdessaFrontend(20)

Advertisement

Recently uploaded(20)

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

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