[JAVASCRIPT][WebGL Tutorial, tutorialspoint.com].pdf

(3083 KB) Pobierz
WebGL
About the Tutorial
WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web,
designed for rendering 2D graphics and interactive 3D graphics.
This tutorial starts with a basic introduction to WebGL, OpenGL, and the Canvas
element of HTML-5, followed by a sample application. This tutorial contains
dedicated chapters for all the steps required to write a basic WebGL application.
It also contains chapters that explain how to use WebGL for affine transformations
such as translation, rotation, and scaling.
Audience
This tutorial will be extremely useful for all those readers who want to learn the
basics of WebGL programming.
Prerequisites
It is an elementary tutorial and one can easily understand the concepts explained
here with a basic knowledge of JavaScript or HTML-5 programming. However, it
will help if you have some prior exposure to OpenGL language and matrix
operation related to 3D graphics.
Copyright & Disclaimer
Copyright 2015 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials
Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy,
distribute or republish any contents or a part of contents of this e-book in any
manner without written consent of the publisher.
We strive to update the contents of our website and tutorials as timely and as
precisely as possible, however, the contents may contain inaccuracies or errors.
Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy,
timeliness or completeness of our website or its contents including this tutorial. If
you discover any errors on our website or in this tutorial, please notify us at
contact@tutorialspoint.com
i
WebGL
Table of Contents
About the Tutorial ............................................................................................................................................ i
Audience ........................................................................................................................................................... i
Prerequisites ..................................................................................................................................................... i
Copyright & Disclaimer ..................................................................................................................................... i
Table of Contents ............................................................................................................................................ ii
PART 1: WEBGL OVERVIEW ......................................................................................................... 1
1.
Introduction .............................................................................................................................................. 2
What is OpenGL? ............................................................................................................................................. 2
What is WebGL? .............................................................................................................................................. 3
Who Developed WebGL .................................................................................................................................. 3
Rendering ........................................................................................................................................................ 3
GPU .................................................................................................................................................................. 4
GPU Accelerated Computing ........................................................................................................................... 4
Browsers Supported ........................................................................................................................................ 5
Advantages of WebGL ..................................................................................................................................... 6
Environment Setup .......................................................................................................................................... 6
HTML-5 Canvas Overview ......................................................................................................................... 8
HTML-5 2D Canvas........................................................................................................................................... 8
The Rendering Context .................................................................................................................................. 10
WebGL Context.............................................................................................................................................. 11
WebGL – Basics ....................................................................................................................................... 13
WebGL – Coordinate System ......................................................................................................................... 13
WebGL Graphics ............................................................................................................................................ 14
Shader Programs ........................................................................................................................................... 16
OpenGL ES SL Variables ................................................................................................................................. 18
WebGL – Graphics Pipeline ..................................................................................................................... 19
JavaScript ....................................................................................................................................................... 19
Vertex Shader ................................................................................................................................................ 20
Primitive Assembly ........................................................................................................................................ 20
Rasterization .................................................................................................................................................. 20
Fragment Shader ........................................................................................................................................... 21
Fragment Operations .................................................................................................................................... 21
Frame Buffer .................................................................................................................................................. 22
2.
3.
4.
PART 2: WEBGL APPLICATION ................................................................................................... 23
5.
WebGL – Sample Application .................................................................................................................. 24
Structure of WebGL Application .................................................................................................................... 24
Sample Application ........................................................................................................................................ 24
WebGL Context ....................................................................................................................................... 30
Creating HTML-5 Canvas Element ................................................................................................................. 30
Get the Canvas ID .......................................................................................................................................... 31
6.
ii
WebGL
Get the WebGL Drawing Context .................................................................................................................. 32
WebGLContextAttributes .............................................................................................................................. 32
WebGLRenderingContext .............................................................................................................................. 33
7.
WebGL Geometry ................................................................................................................................... 34
Defining the Required Geometry .................................................................................................................. 34
Buffer Objects ................................................................................................................................................ 36
Creating a Buffer............................................................................................................................................ 37
Bind the Buffer .............................................................................................................................................. 37
Passing Data into the Buffer .......................................................................................................................... 38
Typed Arrays .................................................................................................................................................. 39
Unbind the Buffers ........................................................................................................................................ 40
Shaders ................................................................................................................................................... 41
Data Types ..................................................................................................................................................... 41
Qualifiers ....................................................................................................................................................... 42
Vertex Shader ................................................................................................................................................ 43
Fragment Shader ........................................................................................................................................... 44
Storing and Compiling the Shader Programs................................................................................................. 45
Combined Program........................................................................................................................................ 47
Associating Attributes and Buffer Objects ............................................................................................... 50
Get the Attribute Location ............................................................................................................................ 50
Point the Attribute to a VBO ......................................................................................................................... 50
Enabling the Attribute ................................................................................................................................... 51
8.
9.
10. Drawing a Model .................................................................................................................................... 52
drawArrays() .................................................................................................................................................. 52
drawElements() ............................................................................................................................................. 54
Required Operations ..................................................................................................................................... 57
PART 3: WEBGL EXAMPLES ....................................................................................................... 58
11. Drawing Points........................................................................................................................................ 59
Required Steps .............................................................................................................................................. 59
Example – Draw Three Points using WebGL .................................................................................................. 60
12. Drawing a Triangle .................................................................................................................................. 65
Steps Required to Draw a Triangle ................................................................................................................ 65
Example – Drawing a Triangle ....................................................................................................................... 66
13. Modes of Drawing .................................................................................................................................. 72
The mode Parameter ..................................................................................................................................... 72
Example – Draw Three Parallel Lines ............................................................................................................. 73
Drawing Modes ............................................................................................................................................. 78
14. Drawing a Quad ...................................................................................................................................... 80
Steps to Draw a Quadrilateral ....................................................................................................................... 80
Example – Draw a Quadrilateral .................................................................................................................... 81
iii
WebGL
15. Colors...................................................................................................................................................... 87
Applying Colors .............................................................................................................................................. 87
Steps to Apply Colors ..................................................................................................................................... 87
Example – Applying Color .............................................................................................................................. 89
16. Translation .............................................................................................................................................. 95
Translation ..................................................................................................................................................... 95
Steps to Translate a Triangle ......................................................................................................................... 95
Example – Translate a Triangle ...................................................................................................................... 97
17. Scaling .................................................................................................................................................. 101
Scaling .......................................................................................................................................................... 101
Required Steps ............................................................................................................................................ 101
Example – Scale a Triangle .......................................................................................................................... 102
18. Rotation ................................................................................................................................................ 107
Example – Rotate a Triangle ........................................................................................................................ 107
19. Cube Rotation ....................................................................................................................................... 113
Example – Draw a Rotating 3D Cube ........................................................................................................... 113
20. Interactive Cube.................................................................................................................................... 121
Example – Draw an Interactive Cube .......................................................................................................... 121
iv

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin