-
Be the first to like this
Upcoming SlideShare
Путь к WebGL через THREE.js | OdessaFrontend 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. ВОПРОСЫ?
Be the first to comment