Web 3D Graphics Introduction with Three.js
"Explore the world of web 3D graphics using Three.js with topics ranging from WebGL basics to meshes, materials, lights, transforms, and cameras. Discover how to create immersive 3D experiences on the web!"
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
FIRST STEPS INTO WEB 3D GRAPHICS WITH THREE.JS
Pavel Kolev Software Developer @ Telerik Working on TelerikPlatform (TelerikAppBuilder Web Client) Die hard JavaScript fan Love huskies
Table of Contents What is WebGL Materials, Textures and Lights Camera, Perspective, Viewports, Projection Scene Shaders Anathomy of a WebGLApp ThreeJSto save the day Common problems
WebGL Standartfor 3d graphics on the web Supported by all major browsers + mobile Based on OpenGL (KronosGroup) Api Combines with other web content Royalty free It is for mortal developers
3D Graphics 3D Coordinate System Mesh an object composed of one or more polygonal shapes, constructed out of vertices
Materials, Textures and Lights Material - defining the surface properties of a mesh Can be really simple just color Textures define the literal surface look Rely on the presence of lights
Transforms and Matrices Animations move your mesh without looping through every vertex Support for scale, rotation, translation(move) Represented by a matrix array of values, used to compute the transformed position of vertices
Cameras, Perspective, Viewports, and Projections Camera a point of view relative to the scene Perspective the size of the field Camera properties combined deliver what you see rendered in 2D viewport Position and orientation Translation (projection matrix) how to translate from 3D to 2D
Anatomy of a WebGL Application 1. Create a canvas element 2.Obtain a drawing context for the canvas 3. Initialize the viewport 4. Create one or more buffers containing the data to be rendered 5. Create one or more matrices to define the transformation from vertex buffers to screen space 6. Create one or more shaders 7. Initialize the shaders 8. Draw
three.js +Hides details for 3D rendering Scene, light, mesh and camera +Object-oriented +Feature-rich tons of prebuilt objects +Fast using best practices +Support interaction +Does the math for you +Built in file format support -Not a game engine -No built network support -No physics
Common problems Object position Light Scale Coordinate system
Thank you i.pavelkolev@gmail.com
