[...]... Camera matrix Camera translation Time for action – exploring translations: world space versus camera space Camera rotation Time for action – exploring rotations: world space versus camera space The Camera matrix is the inverse of the Model-View matrix Thinking about matrix multiplications in WebGL Basic camera types Orbiting camera Tracking camera Rotating the camera around its location Translating... hardware In comparison with other technologies (such as Java 3D, Flash, and The Unity Web Player Plugin), WebGL presents several advantages: ‹‹ JavaScript programming: JavaScript is a language that is natural to both web developers and Internet web browsers Working with JavaScript allows you to access all parts of the DOM and also lets you communicate between elements easily as opposed to talking to an applet... Understand that WebGL acts as a state machine ‹‹ Modify WebGL variables that affect your scene ‹‹ Load and examine a fully-functional scene Getting Started with WebGL System requirements WebGL is a web- based 3D Graphics API As such there is no installation needed At the time this book was written, you will automatically have access to it as long as you have one of the following Internet web browsers:... several examples Chapter 4, Camera, illustrates the use of matrix algebra to create and operate cameras in WebGL The Perspective and Normal matrices that are used in a WebGL scene are also described here The chapter also shows how to pass these matrices to ESSL shaders so they can be applied to every vertex The chapter contains several examples that show how to set up a camera in WebGL Chapter 5, Action,...Table of Contents Preface 1 Chapter 1: Getting Started with WebGL 7 System requirements 8 What kind of rendering does WebGL offer? 8 Structure of a WebGL application 10 Creating an HTML5 canvas 10 Time for action – creating an HTML5 canvas 11 Defining a CSS style for the border 12 Understanding canvas attributes 12 What if the canvas is not supported? 12 Accessing a WebGL context 13 Time for action... JavaScript Architectural updates WebGLApp review Adding support for matrix stacks Configuring the rendering rate Creating an animation timer Connecting matrix stacks and JavaScript timers Time for action – simple animation Parametric curves Initialization steps Setting up the animation timer Running the animation Drawing each ball in its current position Time for action – bouncing ball Optimization strategies... Getting Started with WebGL, introduces the HTML5 canvas element and describes how to obtain a WebGL context for it After that, it discusses the basic structure of a WebGL application The virtual car showroom application is presented as a demo of the capabilities of WebGL This application also showcases the different components of a WebGL application Chapter 2, Rendering Geometry, presents the WebGL API... scoping in JavaScript and memory is automatically deallocated when it's no longer needed This simplifies programming tremendously, reducing the code that is needed and making it clearer and easier to understand ‹‹ Pervasiveness: Thanks to current advances in technology, web browsers with JavaScript capabilities are installed in smart phones and tablet devices At the moment of writing, the Mozilla Foundation... will also understand how these operations can be modeled as a camera This chapter will cover the first element of our list—the canvas We will see in the coming sections how to create a canvas and how to set up a WebGL context Creating an HTML5 canvas Let's create a web page and add an HTML5 canvas A canvas is a rectangular element in your web page where your 3D scene will be rendered [ 10 ] Chapter... using one of the WebGL supported browsers 6 If you can run WebGL you will see a dialog similar to the following: What just happened? Using a JavaScript variable (gl), we obtained a reference to a WebGL context Let's go back and check the code that allows accessing WebGL: var names = [ "webgl" , "experimental -webgl" , "webkit -3d" , "moz -webgl" ]; for (var i = 0; i < names.length; ++i) { try { gl = canvas.getContext(names[i]); . class="bi x0 y0 w0 h1" alt="" WebGL Beginner's Guide Become a master of 3D web programming in WebGL and JavaScript Diego Cantor Brandon Jones BIRMINGHAM - MUMBAI WebGL Beginner's Guide Copyright. PACKT team: Joel Goveya, Wilson D'souza, Maitreya Bhakal, Meeta Rajani, Azharuddin Sheikh, Manasi Poonthoam, Manali Mehta, Manmeet Singh Vasir, Archana Manjrekar, Duane Moraes, and all. Engineering with emphasis in Soware Architecture and Medical Imaging Processing. During his master& apos;s studies, Diego worked as an intern at the imaging processing laboratory CREATIS in