WebGL HOTSHOT

WebGL HOTSHOT

by Mitch Williams
Released May 2014
Publisher(s): Packt Publishing
ISBN: 9781783280919

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Create interactive 3D content for web pages and mobile devices

In Detail

This book presents many popular applications for the Web including examples of deploying 3D applications such as building interactive products for e-commerce, extending social media, visualizing big data, and more. It helps you master how to instantly create and deploy Web3D content, demonstrating a variety of common and unique web applications and exploring the artistic features of 3D. It is ideal for current web developers or those looking for a starting point to learn about 3D graphics technology in a bleeding-edge field.

What You Will Learn

  • Get well-versed with fundamental technologies of 3D graphics including the design of 3D objects, lighting scenes, and viewing scenes from various camera positions
  • Discover how to send data to control 3D from a web browser to the graphics card for rich and engaging graphical presentation
  • Understand the role of graphics card programming using shader languages to control the appearance of a 3D scene down to each individual pixel
  • Explore how to load 3D objects created by artists in modeling tools in the background
  • Integrate Web3D content with databases and other web applications such as social media to extend common applications with 3D
  • Control the parameters of cameras such as field-of-view, removal of distant objects, and environmental effects such as fog and night scenes

Publisher resources

Download Example Code

Table of contents

  1. WebGL HOTSHOT
    1. Table of Contents
    2. WebGL HOTSHOT
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
        4. Prepare for lift off
        5. Engage thrusters
        6. Objective complete – mini debriefing
        7. Classified intel
      6. Mission accomplished
      7. A Hotshot challenge / Hotshot challenges
      8. Reader feedback
      9. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Building Great Web3D
      1. A second coming
      2. Comprehensive solutions
      3. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      4. Introduction to 3D fundamentals
        1. Engage thrusters
        2. Objective complete – mini debriefing
      5. Transformations – translation, rotation, and scaling
        1. Engage thrusters
        2. Objective complete – mini debriefing
      6. Lights, camera, action!
        1. Engage thrusters
      7. Navigating between multiple viewpoints
        1. Engage thrusters
        2. Objective complete – mini debriefing
      8. Animation with interpolators
        1. Engage thrusters
        2. Objective complete – mini debriefing
      9. Adding texture maps to 3D meshes
        1. Engage thrusters
        2. Objective complete – mini debriefing
      10. Lighting a scene and shading 3D objects with normals
        1. Engage thrusters
        2. Objective complete – mini debriefing
      11. Creating an animated Solar System with multiple cameras for navigation
        1. Engage thrusters
        2. Objective complete – mini debriefing
      12. Mission accomplished
    9. 2. WebGL for E-Commerce
      1. Mission briefing
        1. Why is it awesome?
          1. Web3D as a new medium
        2. Your Hotshot objectives
        3. Mission checklist
      2. Introduction to WebGL
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      3. WebGL 3D with Perspective View
        1. Engage thrusters
        2. Objective complete – mini debriefing
      4. WebGL texture mapping and animation
        1. Engage thrusters
        2. Objective complete – mini debriefing
        3. Classified intel
      5. Loading a 3D modeled object, normals, and lighting
        1. Engage thrusters
        2. Objective complete – mini debriefing
      6. Using the mouse for interactivity
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      7. E-commerce using existing assets
        1. Engage thrusters
        2. Objective complete – mini debriefing
      8. E-commerce with 3D modeling
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      9. Mission accomplished
    10. 3. User Experience, Story, Character, Visual Design, and Interactivity
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
      2. Refreshment with shader languages
        1. Engage thrusters
        2. Objective complete – mini debriefing
      3. Lighting 3D depths
        1. Engage thrusters
        2. Objective complete
      4. Visual design and interactivity
        1. Engage thrusters
        2. Objective complete
      5. Full navigation
        1. Engage thrusters
        2. Objective complete
      6. Order of transparencies
        1. Engage thrusters
        2. Objective complete
      7. Scene lighting
        1. Engage thrusters
        2. Objective complete
      8. Mission accomplished
    11. 4. Mobile and Web3D Gaming
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Creating user interfaces in the 3D environment
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      3. Designing a game
        1. Engage thrusters
        2. Objective complete – mini debriefing
      4. Fun with physics and collisions
        1. Engage thrusters
        2. Objective complete – mini debriefing
      5. Mission accomplished
    12. 5. Social Media Meets Its Destiny
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
      2. Bridging Facebook with WebGL
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      3. Visiting Facebook friends in WebGL
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      4. Building a navigable world of Facebook friends
        1. Engage thrusters
        2. Objective complete – mini debriefing
        3. Mission accomplished
    13. 6. 3D Reveals More Information
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Linking 3D to data
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      3. Comparing multiple stocks in 3D
        1. Engage thrusters
        2. Objective complete – mini debriefing
      4. Displaying historical stock data
        1. Engage thrusters
        2. Objective complete – mini debriefing
      5. Presenting comparative data
        1. Engage thrusters
        2. Objective complete – mini debriefing
      6. Zooming into the data – level of detail
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      7. Mission accomplished
    14. 7. Adapting Architecture, Medical, and Mechanical Engineering to Web3D
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Demonstrating environment mapping for reflections
        1. Prepare for lift off
        2. Engage thrusters
        3. Classified intel
        4. Objective complete – mini debriefing
      3. Bending of light – calculating refraction for surfaces such as water
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      4. Creating surfaces – depth, non-smooth, natural, and realistic with normal maps
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      5. Rendering a scene as a texture to view multiple cameras simultaneously
        1. Prepare for lift off
        2. Engage thrusters
        3. Classified intel
        4. Objective complete – mini debriefing
      6. Mission accomplished
      7. Hotshot challenges
    15. 8. 3D Websites
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
      2. Building a 3D website
        1. Engage thrusters
        2. Objective complete – mini debriefing
      3. Creating engaging scenes
        1. Engage thrusters
        2. Objective complete – mini debriefing
      4. Portals to navigate virtual spaces
        1. Engage thrusters
        2. Objective complete – mini debriefing
        3. Classified intel
      5. Mission accomplished
    16. 9. Education in the Third Dimension
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Selecting locations on a texture map
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      3. Selecting locations from a rotated texture map and perspective correction
        1. Engage thrusters
        2. Objective complete – mini debriefing
      4. Selecting irregular shapes from a textured 3D mesh
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      5. Using WebGL to teach math
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      6. Mission accomplished
    17. 10. The New World of 3D Art
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
      2. Experiencing the art museum
        1. Engage thrusters
        2. Objective complete – mini debriefing
      3. Inventing interactive 3D art
        1. Prepare for lift off
        2. Objective complete – mini debriefing
      4. Mission accomplished
    18. Index

Product information

  • Title: WebGL HOTSHOT
  • Author(s): Mitch Williams
  • Release date: May 2014
  • Publisher(s): Packt Publishing
  • ISBN: 9781783280919