WebGL编程指南【正版】 下载 pdf 百度网盘 epub 免费 2025 电子版 mobi 在线

WebGL是一项在网页上渲染三维图形的技术，也是HTML5草案的一部分。

《WebGL编程指南》的主要篇幅讲解了WebGL原生API和三维图形学的基础知识，包括渲染管线、着色器、矩阵变换、着色器编程语言（GLSLES）等等，也讲解了使用WebGL渲染三维场景的一般技巧，如光照、阴影、雾化等等。《WebGL编程指南》提供了丰富的示例程序供读者钻研，也提供了极具价值的附录供读者参考。

《WebGL编程指南》适合有一定前端开发基础，希望学习WebGL，但对三维图形学缺乏了解的程序员们阅读。

第1?章?WebGL?概述WebGL?的优势使用文本编辑器开发三维应用轻松发布三维图形程序充分利用浏览器的功能学习和使用WebGL?很简单WebGL?的起源WebGL?程序的结构总结第2?章?WebGL?入门Canvas?是什么？使用＜canvas＞?标签DrawRectangle．js最短的WebGL?程序：清空绘图区HTML?文件（HelloCanvas．html）JavaScript?程序（HelloCanvas．js）用示例程序做实验绘制一个点（版本1）HelloPoint1．htmlHelloPoint1．js着色器是什么？使用着色器的WebGL?程序的结构初始化着色器顶点着色器片元着色器绘制操作WebGL?坐标系统用示例程序做实验绘制一个点（版本2）使用attribute?变量示例程序（HelloPoint2．js）获取attribute?变量的存储位置向attribute?变量赋值gl．vertexAttrib3f()?的同族函数用示例程序做实验通过鼠标点击绘点示例程序（ClickedPoints．js）注册事件响应函数响应鼠标点击事件用示例程序做实验改变点的颜色示例程序（ColoredPoints．js）uniform?变量获取uniform?变量的存储地址向uniform?变量赋值gl．uniform4f()?的同族函数总结第3?章?绘制和变换三角形绘制多个点示例程序（MultiPoint．js）使用缓冲区对象创建缓冲区对象（gl．createBuffer()）绑定缓冲区（gl．bindBuffer()）向缓冲区对象中写入数据（gl．bufferData()）类型化数组将缓冲区对象分配给attribute?变量（gl．vertexAttribPointer()）开启attribute?变量（gl．enableVertexAttribArray()）gl．drawArrays()?的第2?个和第3?个参数用示例程序做实验Hello?Triangle示例程序（HelloTriangle．js）基本图形用示例程序做实验Hello?Rectangle（HelloQuad）用示例程序做实验移动、旋转和缩放平移示例程序（TranslatedTriangle．js）旋转示例程序（RotatedTriangle．js）变换矩阵：旋转变换矩阵：平移4×4?的旋转矩阵示例程序（RotatedTriangle_Matrix．js）平移：相同的策略变换矩阵：缩放总结第4?章?高级变换与动画基础平移，然后旋转矩阵变换库：cuon-matrix．js示例程序（RotatedTriangle_Matrix4．js）复合变换示例程序（RotatedTranslatedTriangle．js）用示例程序做实验动画动画基础示例程序（RotatingTriangle．js）反复调用绘制函数（tick()）按照指定的旋转角度绘制三角形（draw()）请求再次被调用（requestAnimationFrame()）更新旋转角（animate()）用示例程序做实验总结第5?章?颜色与纹理将非坐标数据传入顶点着色器示例程序（MultiAttributeSize．js）创建多个缓冲区对象gl．vertexAttribPointer()?的步进和偏移参数示例程序（MultiAttributeSize_Interleaved．js）修改颜色（varying?变量）示例程序（MultiAttributeColor．js）用示例程序做实验彩色三角形（ColoredTriangle．js）几何形状的装配和光栅化调用片元着色器用示例程序做实验varying?变量的作用和内插过程在矩形表面贴上图像纹理坐标将纹理图像粘贴到几何图形上示例程序（TexturedQuad．js）设置纹理坐标（initVertexBuffers()）配置和加载纹理（initTextures()）为WebGL?配置纹理（loadTexture()）图像Y?轴反转激活纹理单元（gl．activeTexture()）绑定纹理对象（gl．bindTexture()）配置纹理对象的参数（gl．texParameteri()）将纹理图像分配给纹理对象（gl．texImage2D()）将纹理单元传递给片元着色器（gl．uniform1i()）从顶点着色器向片元着色器传输纹理坐标在片元着色器中获取纹理像素颜色（texture2D()）用示例程序做试验使用多幅纹理示例程序（MultiTexture．js）总结第6?章?OpenGL?ES?着色器语言（GLSL?ES）回顾：基本着色器代码GLSL?ES?概述你好，着色器！基础执行次序注释数据值类型（数值和布尔值）变量GLSL?ES?是强类型语言基本类型赋值和类型转换运算符矢量和矩阵赋值和构造访问元素运算符结构体赋值和构造访问成员运算符数组取样器（纹理）运算符优先级程序流程控制：分支和循环if?语句和if-else?语句for?语句continue、break?和discard?语句函数规范声明参数限定词内置函数全局变量和局部变量存储限定字const?变量Attribute?变量uniform?变量varying?变量精度限定字预处理指令总结第7?章?进入三维世界立方体由三角形构成视点和视线视点、观察目标点和上方向示例程序（LookAtTriangles．js）LookAtTriangles．js?与RotatedTriangle_Matrix4．js从指定视点观察旋转后的三角形示例程序（LookAtRotatedTriangles．js）用示例程序做实验利用键盘改变视点示例程序（LookAtTrianglesWithKeys．js）独缺一角可视范围（正射类型）可视空间定义盒状可视空间示例程序（OrthoView．html）示例程序（OrthoView．js）JavaScript?修改HTML?元素顶点着色器的执行流程修改near?和far?值补上缺掉的角（LookAtTrianglesWithKeys_ViewVolume．js）用示例程序做实验可视空间（透视投影）定义透视投影可视空间示例程序（perspectiveview．js）投影矩阵的作用共冶一炉（模型矩阵、视图矩阵和投影矩阵）示例程序（PerspectiveView_mvp．js）用示例程序做实验正确处理对象的前后关系隐藏面消除示例程序（DepthBuffer．js）深度冲突立方体通过顶点索引绘制物体示例程序（HelloCube．js）向缓冲区中写入顶点的坐标、颜色与索引为立方体的每个表面指定颜色示例程序（ColoredCube．js）用示例程序做实验总结第8?章?光照光照原理光源类型反射类型平行光下的漫反射根据光线和表面的方向计算入射角法线：表面的朝向示例程序（LightedCube．js）环境光下的漫反射示例程序（LightedCube_ambient．js）运动物体的光照效果魔法矩阵：逆转置矩阵示例程序（LightedTranslatedRotatedCube．js）点光源光示例程序（PointLightedCube．js）更逼真：逐片元光照示例程序（PointLightedCube_perFragment．js）总结第9?章?层次模型多个简单模型组成的复杂模型层次结构模型单关节模型示例程序（JointMode．js）绘制层次模型（draw()）多节点模型示例程序（MultiJointModel．js）绘制部件（drawBox()）绘制部件（drawSegments()）着色器和着色器程序对象：initShaders()?函数的作用创建着色器对象（gl．createShader()）指定着色器对象的代码（gl．shaderSource()）编译着色器（gl．compileShader()）创建程序对象（gl．createProgram()）为程序对象分配着色器对象（gl．attachShader()）连接程序对象（gl．linkProgram()）告知WebGL?系统所使用的程序对象（gl．useProgram()）initShaders()?函数的内部流程总结第10?章?高级技术用鼠标控制物体旋转如何实现物体旋转示例程序（RotateObject．js）选中物体如何实现选中物体示例程序（PickObject．js）选中一个表面示例程序（PickFace．js）HUD（平视显示器）如何实现HUD示例程序（HUD．html）示例程序（HUD．js）在网页上方显示三维物体雾化（大气效果）如何实现雾化示例程序（Fog．js）使用w?分量（Fog_w．js）绘制圆形的点如何实现圆形的点示例程序（RoundedPoint．js）α?混合如何实现α?混合示例程序（LookAtBlendedTriangles．js）混合函数半透明的三维物体（BlendedCube．js）透明与不透明物体共存?．切换着色器如何实现切换着色器示例程序（ProgramObject．js）渲染到纹理帧缓冲区对象和渲染缓冲区对象如何实现渲染到纹理示例程序（FramebufferObject．js）创建帧缓冲区对象（gl．createFramebuffer()）创建纹理对象并设置其尺寸和参数创建渲染缓冲区对象（gl．createRenderbuffer()）绑定渲染缓冲区并设置其尺寸（gl．bindRenderbuffer()，gl．renderbufferStorage()）将纹理对象关联到帧缓冲区对象（gl．bindFramebuffer()，gl．framebufferTexture2D()）将渲染缓冲区对象关联到帧缓冲区对象（gl．framebufferRenderbuffer()）检查帧缓冲区的配置（gl．checkFramebufferStatus()）在帧缓冲区进行绘图绘制阴影如何实现阴影示例程序（Shadow．js）提高精度示例程序（Shadow_highp．js）加载三维模型OBJ?文件格式MTL?文件格式示例程序（OBJViewer．js）自定义类型对象示例程序（OBJViewer．js?解析数据部分）响应上下文丢失如何响应上下文丢失示例程序（RotatingTriangle_contextLost．js）总结附录A?WebGL?中无须交换缓冲区附录B?GLSL?ES?1．0?内置函数角度和三角函数指数函数通用函数几何函数矩阵函数矢量函数纹理查询函数附录C?投影矩阵正射投影矩阵透视投影矩阵附录D?WebGL/OpenGL?：左手还是右手坐标系？示例程序(CoordinateSystem．js)隐藏面消除和裁剪坐标系统裁剪坐标系和可视空间什么是对的？总结附录E?逆转置矩阵附录F?从文件中加载着色器附录G?世界坐标系和本地坐标系本地坐标系世界坐标系变换与坐标系附录H?WebGL?的浏览器设置

KouichiMatsuda，博士是多媒体产品用户界面和用户体验设计方面的专家。他先后供职于日本电气(NEC)、索尼(Sony)研发中心、索尼(Sony)计算机科学实验室，曾经做过产品研发，也做过科学研究，最终回到产品研发的岗位。目前，他是用户体验和人机交互领域的首席研究员，负责多款消费类电子产品的设计。他曾经设计了社交三维虚拟世界“PAW”，也曾经参与过VRML97(ISO/IEC14772-1:1997)标准的开发工作，在VRML和X3D(WebGL的前身)社区中仍然非常活跃。他撰写过15本计算机技术的书籍，并翻译过25本相关书籍。他专长于用户体验、用户界面、人机交互、自然语言处理和面向娱乐的网络设备，以及接口代理系统等领域。他不仅对技术领域的新鲜事物充满热情，还热衷于温泉、夏季的海滩、红酒和漫画（为此他已经沉迷于绘制插画一段时间了）。他在东京大学工程系获得了博士学位。

　　RodgerLea，博士是卑诗大学媒体与图像跨学科中心的兼职教授，对多媒体和分布式计算等领域很感兴趣。他和他带领的研究小组在学术和工业领域耕耘超过20年，参与制定了VRML97标准，开发了多媒体操作系统、可交互数字电视原型，并领导了家用多媒体网络标准的制定工作。他发表了60多篇学术论文，著有3本技术书籍，并拥有12项专利。目前，他的研究集中在探索发展中的互联网，但他仍然对有关多媒体和图形学的一切抱有热情。

　　关于译者：

　　谢光磊，毕业于南京大学，目前为中科院在读硕士，即将成为UED的一名前端工程师。因一次偶然的机会接触WebGL而对其萌生兴趣，并愿意持久深入地研究这项技术。

暂无出版社相关信息，正在全力查找中！

暂无相关书籍摘录，正在全力查找中！

在线阅读地址：WebGL编程指南【正版】在线阅读

在线听书地址：WebGL编程指南【正版】在线收听

在线购买地址：WebGL编程指南【正版】在线购买

暂无原文赏析，正在全力查找中！

暂无其它内容！