WebGL - 3D programming
Download as PPTX, PDF0 likes178 views
WebGL is a JavaScript API for rendering 3D graphics in web browsers without plugins. It is supported in modern desktop and mobile browsers depending on the graphics card. Three.js is a popular open-source WebGL framework that handles 3D scene graph management and rendering. It allows creating 3D scenes with meshes made from geometries and materials, adding cameras, and rendering with common patterns like box geometries, basic materials, and perspective cameras. Examples include simple cubes and panoramic views.
WebGL - 3D programming
- 1. WebGL Programming MINH NGUYEN @LINKNODE AUGUST, 2015
- 2. WebGL ? Web Graphic Library: Javascript API for rendering 3D graphics in web browser without the use of plug-ins Cross-browser: Supported in most modern browsers (desktop & mobile) Depending on graphic card (GPU)
- 4. THREE.JS Framework Open source project: http://threejs.org/ Scene Mesh Geometry Material Camera Renderer Create mesh: var geometry = new THREE.BoxGeometry( 200, 200, 200 ); var material = new THREE.MeshBasicMaterial({ color: 'red' }); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(mesh); Create scene: Setup camera to render scene: var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.render(scene, camera); <script src="http://threejs.org/build/three.min.js") %>"></script>
- 5. Examples * Demo cube (cube.htm) * Demo panorama view Scene Geometry Material Camera
- 6. Portal Code Review * Terrain Height Map ◦ How to by-pass OAuth? ◦ PlaneGeometry: from array to triangle mesh * Texture Camera https://dev.ventusar.com/MapGL/ViewLayoutMapGL/1121
- 7. Future works * Multiple tiled-based loading to make use of terrain and overlay cache * Turbine model: height, colour * Solar panel / Transmission model / … ?
Editor's Notes
- #7: Ex: Dev Projects Abergoki minh test Live Projects Cuthill Towers CMM4