WebGL
2016-09-01 16:45:06 0 举报AI智能生成
WebGL（全称：Web Graphics Library）是一个JavaScript API，用于在任何兼容的Web浏览器中渲染交互式2D和3D图形，而无需使用插件。它基于OpenGL ES 2.0标准，允许开发者直接操作硬件进行图形渲染，从而实现高性能的图形处理。WebGL被广泛应用于游戏、数据可视化、虚拟现实等领域，为用户提供了丰富的视觉体验。通过学习WebGL，开发者可以掌握如何在网页上实现复杂的图形效果，为现代互联网应用增添更多创意和价值。
作者其他创作
大纲/内容
Threejs
https://read.douban.com/reader/ebook/7412854/
渲染
渲染器renderer
绑定canvas
或者使用renderer生成canvas
场景scene
容纳物体
相机camera
右手坐标系
相机需要添加到场景中
长方体
相对单位
渲染
动作
循环渲染
相机
三维空间到二维屏幕投影
正交投影相机
三维平行投影到二维也是平行的
视景体
6面
视景体内显示到屏幕上，外被裁剪
横竖比例与canvas宽高一致
top,bottom,left,right
相机到视景体距离
near,far
透视投影相机
类似人眼
近大远小
fov相机顶部张角
aspect宽
物体
几何形状（Geometry）
储存了一个物体的顶点信息
文字
自定义
材质（Material）
基本材质
Lambert材质
漫反射
Phong材质
镜面发生
法向材质
将材质的颜色设置为其法向量的方向
材质的纹理贴图
Mesh网格模型
两点构成一个线
三点构成一个面
无数的三角形面构成不同形状的物体
右手坐标系：z轴指向你
动画
Frames Per Second
requestAnimationFrame
移动
移动场景
移动物体
外部模型
有材质
无材质
光源
环境光AmbientLight
多次反射而来的光
平行光DirectionalLight
点光源PointLight
光线来源于一点
区域光
二维矩阵光源
聚光灯
锥体
方向光
没有衰减的平行光线
材质
光线照射才能体现材质
兰伯特材质
lanbert材质表面会在所有方向上均匀的散射灯光
阴影
特定材质，特定光源
着色器
屏幕渲染前的最后一步
纹理
纹理就是贴图
将贴图以一定的规则映射到几何体上，一般是三角形
显存中的帧缓冲和显示器像素一一对应
PhiloGL
0 条评论
下一页
