Slutsåld
Using WebGL(R), you can create sophisticated interactive 3D graphics inside web browsers, without plug-ins. WebGL makes it possible to build a new generation of 3D web games, user interfaces, and information visualization solutions that will run o...
On behalf of the organizing committee for EuroSSC 2007, we would like to welcome you to the proceedings of the second European Conference on Smart Sensing and Context. Although only in its second year, EuroSSC has already begun to attract signific...
Dr. Kouichi Matsuda is Chief Distinguished Researcher at Sony Corp in Japan. He is a General Manager and HMI, UI, User Experience Engineer/Researcher whose professional affiliations include: ACM, Information Processing Society Japan, Virtual Reality Society Japan. Dr. Matsuda has been involved in the development of the VRML97 standard (via Sony) from the start, and has been active in both VRML and X3D communities (precursors to WebGL). He has a strong background in the technology and comes to it from a web developer perspective. Dr. Rodger Lea is an Adjunct Professor with the Media and Graphics Interdisciplinary Centre at the University of British Columbia, with an interest in systems aspects of multimedia and distributed computing. With more than 20 years experience leading research groups in both academic and industrial settings, he has worked on early versions of shared 3D worlds, helped define VRML, developed multimedia operating systems, prototyped interactive digital TV and led developments on multimedia home networking standards. His current research explores the growing 'Internet of Things' but he retains a passion for all things media and graphics.
Preface xvii
1. Overview of WebGL 1
Advantages of WebGL 3
You Can Start Developing 3D Graphics Applications Using Only a Text Editor 3
Publishing Your 3D Graphics Applications Is Easy 4
You Can Leverage the Full Functionality of the Browser 5
Learning and Using WebGL Is Easy 5
Origins of WebGL 5
Structure of WebGL Applications 6
Summary 7
2. Your First Step with WebGL 9
What Is a Canvas? 9
Using the <canvas> Tag 11
DrawRectangle.js 13
The Worlds Shortest WebGL Program: Clear Drawing Area 16
The HTML File (HelloCanvas.html) 17
JavaScript Program (HelloCanvas.js) 18
Experimenting with the Sample Program 23
Draw a Point (Version 1) 23
HelloPoint1.html 25
HelloPoint1.js 25
What Is a Shader? 27
The Structure of a WebGL Program that Uses Shaders 28
Initializing Shaders 30
Vertex Shader 33
Fragment Shader 35
The Draw Operation 36
The WebGL Coordinate System 38
Experimenting with the Sample Program 40
Draw a Point (Version 2) 41
Using Attribute Variables 41
Sample Program (HelloPoint2.js) 42
Getting the Storage Location of an Attribute Variable 44
Assigning a Value to an Attribute Variable 45
Family Methods of gl.vertexAttrib3f() 47
Experimenting with the Sample Program 49
Draw a Point with a Mouse Click 50
Sample Program (ClickedPoints.js) 50
Register Event Handlers 52
Handling Mouse Click Events 53
Experimenting with the Sample Program 57
Change the Point Color 58
Sample Program (ColoredPoints.js) 59
Uniform Variables 61
Retrieving the Storage Location of a Uniform Variable 62
Assigning a Value to a Uniform Variable 63
Family Methods of gl.uniform4f() 65
Summary 66
3. Drawing and Transfo...