WebGL Hotshot

WebGL Hotshot

Language: English

Pages: 300

ISBN: 1783280913

Format: PDF / Kindle (mobi) / ePub

WebGL Hotshot

Language: English

Pages: 300

ISBN: 1783280913

Format: PDF / Kindle (mobi) / ePub


Create interactive 3D content for web pages and mobile devices

About This Book

  • Simple, ready-to-use interactive 3D demonstrations and explanations for a variety of popular and innovative websites
  • Detailed overview of how to build 3D environments including features such as designing, navigating, and interacting in 3D scenes
  • Instantly deploy 3D websites for a variety of applications including e-commerce, social media, visualizing big data, and mobile devices

Who This Book Is For

If you are a web designer looking to expand your knowledge of 3D graphics concepts and broaden your existing skill set, then this book is for you. Those looking for an introduction to 3D graphics will benefit from WebGL Hotshot as it is a perfect guide to master 3D concepts, helping you build and deploy 3D worlds much quicker. The book assumes a basic knowledge of HTML, though it can be learned concurrently while reading this book. Basic programming knowledge is useful; however, the graphical nature of web 3D content allows you to learn programming through experimentation.

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

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.

How to Wreck a Nice Beach: The Vocoder from World War II to Hip-Hop, The Machine Speaks

Long for This World: The Strange Science of Immortality

The LaTeX Companion (Tools and Techniques for Computer Typesetting)

Chagos Islanders in Mauritius and the UK: Forced Displacement and Onward Migration (New Ethnographies)

Winning Poker Tournaments One Hand at a Time, Volume 1

Magic of Speech Evaluation

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

traditional gaming. Vincent Lark (@allyouneedisgnu) is a French developer in Luxembourg with six years of experience. He worked as a full-stack developer in some large audience companies such as EuroDNS, Jamendo, and more recently, for a local news website for cross-border workers. Interested in game development and 3D modeling since his school years, he's practicing these subjects in Global Game Jams and other hackathons with friends. An open source fanatic, he shares every prototype on his

translation or movement of the 3D mesh. However, rotating the mesh requires the Normal vector to be similarly rotated. Fragment shaders are exciting because we calculate the lighting here and the GPU does a much better job of calculating the effect of lighting on a pixel-by-pixel basis. Lighting is calculated based on the angle between the direction of the light and the normal. The light's direction is reversed to create an angle between the two-unit vectors (each having a length of 1 unit), and

location as where the Moon's 3D mesh is rendered. The Moon's 3D mesh is set in WebGLStart() when the object is constructed and positioned at [0, 70, -100]. But to simulate the moonlight shining through the window, the light's location is far away, given by the following line of code: var moonLightLoc = [ 0, 120, -200] To get the dimensions of the moonlight coming through the window, draw imaginary lines from the Moon's light location at (0, 120, -200) to each corner of the window and beyond till

0.5, 0.5 ]; // light red else color = [1.0, 0.0, 0.0 ]; // dark red 158 www.it-ebooks.info Project 6 We finish by sending the color to the shader. Note that we did not use a texture map, although that leads us to an opportunity to use a stock logo, for example: gl.uniform3f(shaderProgram.colorUniform, color[0], color[1], color[2] ); On a final note, the table

tags are listed after the tag inside the tag, and thus print the 3D scene first. These
tags overlay the

CSS properties. Much of the drawScene() code is left intact from the previous example. The only new functionality added was detection when the mouse rolls over a box. For this, we use code from the previous projects that detects the mouse's x and y positions and then converts this from 2D screen coordinates into 3D world coordinates. We then test if the ray, which is just a line from the camera position of (0, 0, 0) to the 3D world coordinates, intersects any object's bounding box. Note that we

Download sample

Download