WebGL入门指南：Tony Parisi著

WebGL

5星 · 超过95%的资源需积分: 10 176 浏览量更新于2024-07-24 收藏 25.08MB PDF 举报

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

领优惠券(最高得80元）

"WebGL：Up and Running - Tony Parisi" 《WebGL：Up and Running》是Tony Parisi撰写的一本书，专注于介绍WebGL这一技术。WebGL是一种在Web浏览器中实现的JavaScript API，用于在任何兼容的设备上进行交互式三维图形渲染，无需插件。该书的ISBN号为978-1-449-32357-8，由O'Reilly Media, Inc.出版。 WebGL的核心在于它基于OpenGL标准，允许开发者直接在浏览器环境中创建复杂的3D场景。通过JavaScript，开发者可以利用WebGL轻松地将3D图形集成到网页中，为用户提供丰富的视觉体验。这本书面向初学者，逐步引导读者了解并掌握WebGL的基础知识和应用技巧。书中可能涵盖了以下关键知识点： 1. **WebGL基础知识**：包括WebGL的基本概念、工作原理、渲染管线以及如何在HTML5 canvas元素中设置WebGL上下文。 2. **几何与变换**：讲解如何创建、操作和绘制基本的几何形状（如点、线和多边形），以及如何执行平移、旋转和缩放等变换。 3. **颜色与光照**：介绍色彩理论，如何应用颜色给3D物体，并讨论光照模型对物体表面外观的影响。 4. **纹理映射**：讲解如何使用图像作为3D物体的表面材质，以及如何处理纹理坐标和重复纹理。 5. **视图与投影**：深入理解相机模型，学习如何设置视口、视锥体和投影矩阵，以控制观察者看到的3D世界。 6. **着色语言GLSL**：介绍OpenGL Shading Language（GLSL），这是编写自定义着色器的语言，用于计算顶点位置、颜色以及其他属性。 7. **动画与交互**：探讨如何实现3D物体的动态行为，如响应用户输入，以及如何创建流畅的动画效果。 8. **性能优化**：讨论WebGL程序的性能问题，包括减少绘制调用、管理内存和提高渲染效率的方法。 9. **WebGL库和框架**：介绍一些流行的WebGL库，如Three.js，它们提供了更高层次的抽象，简化了开发过程。 10. **实例分析**：书中可能包含多个实际项目或案例研究，以帮助读者将所学应用于实践。此外，书中还可能涉及错误处理、文档查阅、调试工具的使用等实用技能。通过阅读《WebGL：Up and Running》，读者可以系统性地学习WebGL，从而在网页中构建出引人入胜的3D应用程序。

资源详情

资源推荐

to Christell Gause, head of support at TurboSquid, for his diligent efforts in helping me

obtain permission from the many TurboSquid artists whose content is featured here.

Also, I could not have created the examples for this book without additional help

and/or contributed content from data junkie Theo Armour, 3D programming ace Don

Olmstead, and 3D artist Arefin Mohiuddin of Sunglass.io.

WebGL is blessed to have a strong community of developers. I would like to thank the

three.js developers, including guru Ricardo Cabello (“Mr.doob”) and contributors Bra

nislav Ulicny (“AlteredQualia”) and Tim Knip, for their patience with my often-naïve

questions and their overall enthusiasm for the project. I owe an eternal debt of gratitude

to Ken Russell, the WebGL working group chair and WebGL development lead at Goo

gle. Ken has not only built a great product, but he kindly agreed to write the foreword

for this book.

Finally, I would like to thank my friends and family. Mark Pesce, my old VRML partner

in crime, is a veteran author. His commitment to excellence in writing and his passion

for emerging technology have been a constant source of inspiration to me over the years.

Many thanks to my buddy and sometimes-business-partner Scott Foe, who was always

supportive of this book, despite the major distraction it created from our day-to-day

startup. Last but not least, my family provided the moral support, patience, and loving

environment that any author needs to thrive. More than that, they pitched in on the

logistics: my 10-year-old, Lucian, gets props for play-testing most of the examples in the

book, and my wife, Marina, kept me honest with art direction so that my cobbled-

together examples would at least have a consistent look and coherent story.

xiv | Preface

WebGL is the new standard for 3D graphics on the Web. With WebGL, developers can

harness the full power of the computer’s graphics rendering hardware using only Java

Script, a web browser, and a standard web technology stack. Before WebGL, developers

had to rely on plug-ins or native applications and ask their users to download and install

custom software in order to deliver a true 3D experience.

WebGL is part of the HTML5 family of technologies. While not in the official specifi

cation, it is shipped with most browsers that support HTML5. Like Web Workers, Web

Sockets, and other technologies outside the official W3C recommendations, WebGL is

an essential component in an emerging suite that is transforming the modern browser

into a first-class application platform.

WebGL works on the majority of desktops, as well as a growing number of mobile

browsers. There are millions of WebGL-enabled seats already installed, most likely in

cluding the machines you run at home and in your office. WebGL is at the center of a

vibrant and growing ecosystem that is making the web experience more visually rich

and engaging. There are hundreds of sites, applications, and tools being developed, with

applications ranging from games to data visualization, computer-aided design, and

consumer retail.

While the low-level nature of the WebGL API may appear daunting at first, there are

several open source JavaScript toolkits that take the grunt work out of development. I

want to be careful not to oversell this—3D is still hard work—but these tools at least

make it possible for mere mortals with modest web development experience to get into

the WebGL business. So maybe it’s finally time for you to create that hit game you always

wanted to make. Or maybe today is the day when you blow your boss’s mind with a

dazzling intro graphic for your home page.

In this chapter, we will take a quick tour of the low-level underpinnings of WebGL to

give you a foundation. For the majority of the book, we will use a high-level 3D toolkit,

Three.js, which hides many of the messy details. But it is important to know what these

tools are built upon, so let’s start by exploring WebGL’s core concepts and API.

WebGL—A Technical Definition

WebGL is developed and maintained by the Khronos Group, the standards body that

also governs OpenGL, COLLADA, and other specifications you may have heard of. Here

is the official description of WebGL, from the Khronos website:

WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a

3D drawing context within HTML, exposed as low-level Document Object Model inter

faces. It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with

other web content that is layered on top or underneath the 3D content. It is ideally suited

for dynamic 3D web applications in the JavaScript programming language, and will be

fully integrated in leading web browsers.

2 | Chapter 1: An Introduction to WebGL

This definition comprises several core ideas. Let’s deconstruct them here:

WebGL is an API

WebGL is accessed exclusively through a set of JavaScript programming interfaces;

there are no accompanying tags like there are with HTML. 3D rendering in WebGL

is analogous to 2D drawing using the Canvas element, in that it is all done through

JavaScript API calls. In fact, access to WebGL is provided using the existing Canvas

element and obtaining a special drawing context specific to WebGL.

WebGL is based on OpenGL ES 2.0

OpenGL ES is an adaption of the long-established 3D rendering standard OpenGL.

The “ES” stands for “embedded systems,” meaning that it has been tailored for use

in small computing devices, most notably phones and tablets. OpenGL ES is the

API that powers 3D graphics for the iPhone, the iPad, and Android phones and

tablets. . WebGL’s designers felt that, by basing the API on OpenGL ES’s small foot

print, delivering a consistent, cross-platform, cross-browser 3D API for the Web

would be more achievable.

WebGL combines with other web content

WebGL layers on top of or underneath other page content. The 3D canvas can take

up just a portion of the page, or the whole page. It can reside inside <div> tags that

are z-ordered. This means that you develop your 3D graphics using WebGL, but all

your other elements are built using familiar old HTML. The browser composites

(combines) all of the graphics on the page into a seamless experience for the user.

WebGL is built for dynamic web applications

WebGL has been designed with web delivery in mind. WebGL starts with OpenGL

ES, but it has been adapted with specific features that integrate well with web

browsers, work with the JavaScript language, and are friendly for web delivery.

WebGL is cross-platform

WebGL is capable of running on any operating system, on devices ranging from

phones and tablets to desktop computers.

WebGL is royalty-free

Like all open web specifications, WebGL is free to use. Nobody will be asking you

to pay royalties for the privilege.

The makers of Chrome, Firefox, Safari, and Opera have committed significant resources

to developing and supporting WebGL, and engineers from these teams are also key

members of the working group that develops the specification. The WebGL specification

process is open to all Khronos members, and there are also mailing lists open to the

public. See

Appendix A for mailing list information and other specification resources.

WebGL—A Technical Definition | 3

“Math is hard!”

—Barbie

3D Graphics—A Primer

As sexist as the infamous quote may be, I have to say that whenever I code something

in 3D, I, like Barbie, get a very strong urge to indulge in shop therapy. It’s hard stuff and

it often involves more than a little math. Luckily, you won’t have to be a math whiz to

build something in WebGL; we are going to use libraries that do most of the hard work

for us. But it is important to understand what’s going on under the hood, and to that

end, here is my attempt to summarize the entire discipline of interactive 3D graphics in

a few pages.

3D Coordinate Systems

3D drawing takes place, not surprisingly, in a 3D coordinate system. Anyone familiar

with 2D Cartesian coordinate systems such as you find on graph paper, or in the window

coordinates of an HTML document, knows about x and y values. These 2D coordinates

define where <div> tags are located on a page, or where the virtual “pen” or “brush”

draws in the case of the HTML Canvas element. Similarly, 3D drawing takes place in a

3D coordinate system, where there is an additional coordinate, z, which describes depth

(i.e., how far into or out of the screen an object is drawn). The WebGL coordinate system

is arranged as depicted in Figure 1-2, with x running horizontally left to right, y running

vertically bottom to top, and positive z coming out of the screen.

If you are already comfortable with the concept of the 2D coordinate system, I think the

transition to a 3D coordinate system is pretty straightforward. However, from here on,

things get a little complicated.

Meshes, Polygons, and Vertices

While there are several ways to draw 3D graphics, by far the most common is to use a

mesh. A mesh is an object composed of one or more polygonal shapes, constructed out

of vertices (x, y, z triples) defining coordinate positions in 3D space. The polygons most

typically used in meshes are triangles (groups of three vertices) and quads (groups of

four vertices). 3D meshes are often referred to as models.

Figure 1-3 illustrates a 3D mesh. The dark lines outline the quads that comprise the

mesh, defining the shape of the face. (You would not see these lines in the final rendered

image; they are included for reference.) The x, y, and z components of the mesh’s vertices

define the shape only; surface properties of the mesh, such as the color and shading, are

defined using additional attributes, as we will discuss shortly.

4 | Chapter 1: An Introduction to WebGL

剩余230页未读，继续阅读

xiaocan41

粉丝: 0
资源: 1

WebGL入门指南：Tony Parisi著

WebGL：Up.and.Running

webgl-debug.js

webgl公用函数库(cuon-matrix.js,cuon-utils.js,webgl-debug.js,webgl-utils.js)

快速学习webgl和three.js的方法

webgl-utils.js下载

webgl.framework.js 在哪修改

128WebGL: INVALID_OPERATION: uniform3f: location not for current program 128WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program

webgl-studio.ilpr.it

webgl+three.js 入门与实战，系统学习 web3d 技术

webgl/three.js前端高薪3d可视化 百度云

pan.baidu.com\ webgl+three.js入门与实战"

const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current })

site:download.csdn.net threejs 3d展厅

帮我用js写一个炫酷的粒子特效

unity webGL 怎么打.unityweb

webgl.framework.js 不能手动修改代码吗

TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.

如何学习three.js

Babylon.js的优缺点

最新资源

webgl/three.js前端高薪3d可视化百度云