更新时间:2023-04-25 09:30:05
封面
版权信息
内容简介
赞誉之辞
推荐序
译者序
前言
致谢
关于作者
关于译者
第1章 WebGL概述
WebGL的优势
使用文本编辑器开发三维应用
轻松发布三维图形程序
充分利用浏览器的功能
学习和使用WebGL很简单
WebGL的起源
WebGL程序的结构
总结
第2章 WebGL入门
Canvas是什么?
使用<canvas>标签
DrawRectangle.js
最短的WebGL程序:清空绘图区
HTML文件(HelloCanvas.html)
JavaScript程序(HelloCanvas.js)
用示例程序做实验
绘制一个点(版本1)
HelloPoint1.html
HelloPoint1.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())