没有合适的资源?快使用搜索试试~ 我知道了~
首页WebGL入门与实战:创建3D应用与Three.js深度探索
"《WebGL: Up and Running》是一本由Tony Parisi编写的实战指南,专注于介绍WebGL技术,它是HTML5家族成员之一,用于在Web上进行3D图形渲染的新标准。该书适合那些熟悉HTML、CSS和JavaScript,以及有一定jQuery和Ajax经验的开发者,即使没有游戏开发或3D图形专业背景也能轻松学习。 书中内容详实,通过深入浅出的方式,帮助读者理解核心的3D图形概念,并指导如何在WebGL环境中实现它们。读者在学习过程中会创建一系列WebGL示例页面,逐渐提升技能。最后一章将带领读者构建一个完整的赛车游戏应用,实践所学知识。 作者特别介绍了Three.js开源库,这是一个流行的JavaScript 3D引擎,书中会全面剖析其工作原理和用法。读者可以借此掌握图形渲染、纹理处理、动画、交互和行为等关键概念。此外,书中还会教授如何无缝地将3D图形与网页其他内容结合,以及如何在生产环境中开发健壮和安全的应用程序,包括所需的工具、文件格式和最佳实践。 该书不仅提供理论知识,还强调实践经验,让读者在实际操作中提升对WebGL的理解。无论是初学者还是有经验的开发者,都能从《WebGL: Up and Running》中收获宝贵的3D图形开发技能,进一步丰富HTML5 Web开发的能力。通过阅读此书,读者可以快速入门WebGL,并将其应用于实际项目中,提升网页的视觉表现力和互动性。"
资源详情
资源推荐
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
CHAPTER 1
An Introduction to WebGL
An interactive live jellyfish forest, with hundreds of jellies pulsating and rays of sunlight
streaming from the surface of the sea to the murky depths below—under your control.
A networked virtual reality simulation of the human body, including the skeletal, cir
culatory, and other major systems: with your mouse you can peel back the layers of the
body, drop pins on interesting parts for future reference, and share a hyperlink with
colleagues and students. An immersive massively multiplayer universe, filled with your
Twitter friends and followers. No, you haven’t accidentally channel-flipped to an episode
of PBS's
Nova, and you’re not watching a trailer for the latest Ridley Scott film. This stuff
of the future is running in your web browser—right now. It’s called WebGL.
Figure 1-1. WebGL jellyfish simulation (http://chrysaora.com/), reproduced with per
mission from Aleksander Rodic
1
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页未读,继续阅读
cskuang1
- 粉丝: 1
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- AirKiss技术详解:无线传递信息与智能家居连接
- Hibernate主键生成策略详解
- 操作系统实验:位示图法管理磁盘空闲空间
- JSON详解:数据交换的主流格式
- Win7安装Ubuntu双系统详细指南
- FPGA内部结构与工作原理探索
- 信用评分模型解析:WOE、IV与ROC
- 使用LVS+Keepalived构建高可用负载均衡集群
- 微信小程序驱动餐饮与服装业创新转型:便捷管理与低成本优势
- 机器学习入门指南:从基础到进阶
- 解决Win7 IIS配置错误500.22与0x80070032
- SQL-DFS:优化HDFS小文件存储的解决方案
- Hadoop、Hbase、Spark环境部署与主机配置详解
- Kisso:加密会话Cookie实现的单点登录SSO
- OpenCV读取与拼接多幅图像教程
- QT实战:轻松生成与解析JSON数据
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功