WebGL编程指南：打造3D网页应用

WebGL

OpenGLES

需积分: 9 88 浏览量更新于2024-07-18 收藏 18.26MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"WebGL Programming Guide (英文原版带目录)" 是一本由OpenGL ES Programming Guide的作者编写的书籍，旨在引导读者掌握在Web浏览器中创建类似桌面应用的3D图形技术。该书涵盖了WebGL、JavaScript、OpenGLES以及基础图形技术的各个方面，为读者提供全面的学习体验，帮助他们走在Web应用的前沿。主要内容提及了WebGL的重要性，它为Web浏览器提供了创建桌面应用体验的最后一个重要特性。通过WebGL，开发者可以利用现代3D图形加速的全部能力和功能，创作出跨平台的、引人入胜且高度交互的应用。WebGL被设计成能在任何支持Web的系统上安全运行，这将激发开发者在3D网络内容、应用和用户界面创新上的新一波浪潮。 WebGL是HTML5的关键组成部分，HTML5正在将Web转变为一个功能强大的应用平台，支持在各种不同的系统上无缝运行的精美、吸引人且全交互的应用。这本书将帮助读者理解如何使用JavaScript与WebGL和OpenGLES（OpenGL for Embedded Systems）结合，实现3D图形的编程。在书中，读者可以期待学习到以下关键知识点： 1. **WebGL基础知识**：包括WebGL的架构、上下文创建、渲染目标以及如何在Web页面中嵌入3D图形。 2. **OpenGL ES和WebGL的关系**：解释两者之间的相似性和差异，以及如何将OpenGL ES的经验应用于WebGL开发。 3. **JavaScript与WebGL的交互**：学习如何使用JavaScript控制WebGL上下文，执行绘制命令，处理用户输入，以及进行错误检查和调试。 4. **图形管线**：深入理解从顶点到像素的图形处理流程，包括顶点着色器、片段着色器和其他着色器语言（如GLSL）的使用。 5. **3D坐标系统和投影**：了解如何在3D空间中定位物体，以及视口转换和投影矩阵的应用。 6. **纹理和材质**：学习如何应用纹理映射到3D模型上，以及不同类型的材质效果。 7. **光照和阴影**：探讨如何模拟现实世界的光照和阴影效果，提高3D场景的真实感。 8. **动画和交互**：学习如何创建动态的3D场景，响应用户的交互事件。 9. **性能优化**：了解如何优化WebGL代码，减少渲染开销，提升应用性能。 10. **安全和跨平台考虑**：理解WebGL的安全限制，以及如何确保应用在不同浏览器和设备上的兼容性。通过这本书，读者不仅可以获得WebGL技术的深入理解，还能掌握创建下一代Web应用所需的技能，无论是游戏开发、数据可视化还是其他3D交互体验，都能从中受益。

资源详情

资源推荐

ptg11539634

Contents

Switching Shaders ....................................................................................................... 386

How to Implement Switching Shaders ..................................................................387

Sample Program (ProgramObject.js) ......................................................................387

Use What You’ve Drawn as a Texture Image .............................................................392

Framebuffer Object and Renderbuffer Object .......................................................392

How to Implement Using a Drawn Object as a Texture .......................................394

Sample Program (FramebufferObjectj.js) ...............................................................395

Create Frame Buffer Object (gl.createFramebuffer()) .............................................397

Create Texture Object and Set Its Size and Parameters .........................................397

Create Renderbuffer Object (gl.createRenderbuffer()) ...........................................398

Bind Renderbuffer Object to Target and Set Size (gl.bindRenderbuffer(),

gl.renderbufferStorage()) ........................................................................................399

Set Texture Object to Framebuffer Object (gl.bindFramebuffer(),

gl.framebufferTexture2D()) ....................................................................................400

Set Renderbuffer Object to Framebuffer Object

(gl.framebufferRenderbuffer()) ...............................................................................401

Check Configuration of Framebuffer Object (gl.checkFramebufferStatus()) ........402

Draw Using the Framebuffer Object ......................................................................403

Display Shadows .........................................................................................................405

How to Implement Shadows ................................................................................. 405

Sample Program (Shadow.js) ..................................................................................406

Increasing Precision ...............................................................................................412

Sample Program (Shadow_highp.js) ......................................................................413

Load and Display 3D Models .....................................................................................414

The OBJ File Format ...............................................................................................417

The MTL File Format ..............................................................................................418

Sample Program (OBJViewer.js) .............................................................................419

User-Defined Object ...............................................................................................422

Sample Program (Parser Code in OBJViewer.js) ....................................................423

Handling Lost Context ............................................................................................... 430

How to Implement Handling Lost Context ..........................................................431

Sample Program (RotatingTriangle_contextLost.js) ..............................................432

Summary ....................................................................................................................434

A. No Need to Swap Buffers in WebGL 437

B. Built-in Functions of GLSL ES 1.0 441

Angle and Trigonometry Functions ...........................................................................441

Exponential Functions ................................................................................................443

Common Functions ....................................................................................................444

Geometric Functions ..................................................................................................447

ptg11539634

xvii

Preface

WebGL is a technology that enables drawing, displaying, and interacting with sophis-

ticated interactive three-dimensional computer graphics (“3D graphics”) from within

web browsers. Traditionally, 3D graphics has been restricted to high-end computers or

dedicated game consoles and required complex programming. However, as both personal

computers and, more importantly, web browsers have become more sophisticated, it has

become possible to create and display 3D graphics using accessible and well-known web

technologies. This book provides a comprehensive overview of WebGL and takes the

reader, step by step, through the basics of creating WebGL applications. Unlike other

3D graphics technologies such as OpenGL and Direct3D, WebGL applications can be

constructed as web pages so they can be directly executed in the browsers without install-

ing any special plug-ins or libraries. Therefore, you can quickly develop and try out a

sample program with a standard PC environment; because everything is web based, you

can easily publish the programs you have constructed on the web. One of the promises

of WebGL is that, because WebGL applications are constructed as web pages, the same

program can be run across a range of devices, such as smart phones, tablets, and game

consoles, through the browser. This powerful model means that WebGL will have a signif-

icant impact on the developer community and will become one of the preferred tools for

graphics programming.

Who the Book Is For

We had two main audiences in mind when we wrote this book: web developers looking

to add 3D graphics to their web pages and applications, and 3D graphics programmers

wishing to understand how to apply their knowledge to the web environment. For web

developers who are familiar with standard web technologies such as HTML and JavaScript

and who are looking to incorporate 3D graphics into their web pages or web applica-

tions, WebGL offers a simple yet powerful solution. It can be used to add 3D graphics to

enhance web pages, to improve the user interface (UI) for a web application by using a 3D

interface, and even to develop more complex 3D applications and games that run in web

browsers.

The second target audience is programmers who have worked with one of the main 3D

application programming interfaces (APIs), such as Direct3D or OpenGL, and who are

interested in understanding how to apply their knowledge to the web environment. We

would expect these programmers to be interested in the more complex 3D applications

that can be developed in modern web browsers.

However, the book has been designed to be accessible to a wide audience using a step-by-

step approach to introduce features of WebGL, and it assumes no background in 2D or 3D

graphics. As such, we expect it also to be of interest to the following:

ptg11539634

WebGL Programming Guide

xviii

• General programmers seeking an understanding of how web technologies are evolv-

ing in the graphics area

• Students studying 2D and 3D graphics because it offers a simple way to begin to ex-

periment with graphics via a web browser rather than setting up a full programming

environment

• Web developers exploring the “bleeding edge” of what is possible on mobile devices

such as Android or iPhone using the latest mobile web browsers

What the Book Covers

This book covers the WebGL 1.0 API along with all related JavaScript functions. You will

learn how HTML, JavaScript, and WebGL are related, how to set up and run WebGL appli-

cations, and how to incorporate sophisticated 3D program “shaders” under the control

of JavaScript. The book details how to write vertex and fragment shaders, how to imple-

ment advanced rendering techniques such as per-pixel lighting and shadowing, and basic

interaction techniques such as selecting 3D objects. Each chapter develops a number of

working, fully functional WebGL applications and explains key WebGL features through

these examples. After finishing the book, you will be ready to write WebGL applications

that fully harness the programmable power of web browsers and the underlying graphics

hardware.

How the Book Is Structured

This book is organized to cover the API and related web APIs in a step-by-step fashion,

building up your knowledge of WebGL as you go.

Chapter 1—Overview of WebGL

This chapter briefly introduces you to WebGL, outlines some of the key features and

advantages of WebGL, and discusses its origins. It finishes by explaining the relationship

of WebGL to HTML5 and JavaScript and which web browsers you can use to get started

with your exploration of WebGL.

Chapter 2—Your First Step with WebGL

This chapter explains the <canvas> element and the core functions of WebGL by taking

you, step-by-step, through the construction of several example programs. Each example

is written in JavaScript and uses WebGL to display and interact with a simple shape on

a web page. The example WebGL programs will highlight some key points, including:

(1) how WebGL uses the

<canvas> element object and how to draw on it; (2) the linkage

between HTML and WebGL using JavaScript; (3) simple WebGL drawing functions; and

(4) the role of shader programs within WebGL.

ptg11539634

xix

Preface

Chapter 3—Drawing and Transforming Triangles

This chapter builds on those basics by exploring how to draw more complex shapes and

how to manipulate those shapes in 3D space. This chapter looks at: (1) the critical role of

triangles in 3D graphics and WebGL’s support for drawing triangles; (2) using multiple

triangles to draw other basic shapes; (3) basic transformations that move, rotate, and

scale triangles using simple equations; and (4) how matrix operations make transforma-

tions simple.

Chapter 4—More Transformations and Basic Animation

In this chapter, you explore further transformations and begin to combine transformations

into animations. You: (1) are introduced to a matrix transformation library that hides the

mathematical details of matrix operations; (2) use the library to quickly and easily combine

multiple transformations; and (3) explore animation and how the library helps you

animate simple shapes. These techniques provide the basics to construct quite complex

WebGL programs and will be used in the sample programs in the following chapters.

Chapter 5—Using Colors and Texture Images

Building on the basics described in previous chapters, you now delve a little further into

WebGL by exploring the following three subjects: (1) besides passing vertex coordinates,

how to pass other data such as color information to the vertex shader; (2) the conver-

sion from a shape to fragments that takes place between the vertex shader and the frag-

ment shader, which is known as the rasterization process; and (3) how to map images (or

textures) onto the surfaces of a shape or object. This chapter is the final chapter focusing

on the key functionalities of WebGL.

Chapter 6—The OpenGL ES Shading Language (GLSL ES)

This chapter takes a break from examining WebGL sample programs and explains the core

features of the OpenGL ES Shading Language (GLSL ES) in detail. You will cover: (1) data,

variables, and variable types; (2) vector, matrix, structure, array, and sampler; (3) opera-

tors, control flow, and functions; (4) attributes, uniforms, and varyings; (5) precision

qualifier; and (6) preprocessor and directives. By the end of this chapter you will have a

good understanding of GLSL ES and how it can be used to write a variety of shaders.

Chapter 7—Toward the 3D World

This chapter takes the first step into the 3D world and explores the implications of

moving from 2D to 3D. In particular, you will explore: (1) representing the user’s view

into the 3D world; (2) how to control the volume of 3D space that is viewed; (3) clipping;

(4) foreground and background objects; and (5) drawing a 3D object—a cube. All these

issues have a significant impact on how the 3D scene is drawn and presented to viewers.

A mastery of them is critical to building compelling 3D scenes.

剩余543页未读，继续阅读

粉丝: 4174
资源: 1

WebGL编程指南：打造3D网页应用

WebGL编程指南(含源码).pdf

HTML5 WEBGL入门学习资料（整套）

WebGL编程指南的书本源代码

学习webgl推荐什么

unity 微信小游戏 dll 可以放在webgl目录下吗

webgl入门 课程源码

webgl和webgl2

unity webgl 代码必须放在asset目录下吗

webgl1.0和webgl2.0区别

Unity WebGL 创建IIS

webgl1和webgl2的区别

unity打包webgl提示浏览器不支持webgl

unity-webgl如何在vue3中加载unity的webgl

js 判断支持webgl_WebView是否支持WebGL??

better-minimal-webgl-template unity webgl

unity腹部webgl服务端

配置FTP服务，要求不允许匿名用户站点访问，配置本地用户webgl，该用户对var/webhome目录具有所用权限，var/webhome目录为web服务的主目录，webgl账户可以上传、下载web站点资源，同时创建虚拟用户ftp2，仅对var/webhome有读权限

webgl编程指南 源码

Unity 发布webgl之后怎么可以获取到index.html的目录呢

unity能否使用webgl

最新资源

webgl入门课程源码

webgl编程指南源码