2021SC@SDUSC
目录
一.claygl项目简介
??? 1.claygl描述
??? ClayGL是一个Web 3D图形库，用于构建支持3D Web的应用程序，例如在真实的地理地图上绘制交互式3D街道地图，可作为开源项目使用。同时也是一个高性能 WebGL 框架，能够帮助用户快速搭建可视化、三维模型展示、交互广告等 Web3D 的应用，提供 Canvas、SVG、VML 等多种渲染方式，例如ClayGL 作为 ECharts GL 的底层 WebGL 支持框架，于2017 年在手机百度中成功落地了三维模型展示的应用。
??? Claygl 同时可作为 WebGL 游戏引擎，特点是支持延迟着色。
??? 2.claygl特点
??? （1）轻巧
??? （2）可缩放图形
??? （3）可配置高质量的图形
??? （4）支持缩放
??? （5）拥有高级Web查看器（Clay Viewer）
??? （6）易于启动和学习，易于使用和学习
??? （7）具有高度详细的图形以及先进而详细的材料
??? （8）具有丰富的示例集
???? 3.claygl要素
??? （1）场景及其层次
??? （2）网格及相机
??? （3）材料
??? （4）质地
??? （5）皮肤
??? （6）动画
二.github地址
??? https://github.com/pissang/claygl（github地址）
??? https://gitee.com/mirrors/claygl（gitee地址）
三.项目下载及配置
??? （1）进入github或gitee（以gitee为例），选择克隆/下载下的下载zip选项，即可下载源代码
?
??? （2）解压压缩包，提取claygl-master下的dist下的claygl.js文件
?
???? （3）使用idea创建一个web工程，将claygl.js置于该工程目录下，同时创建html文件，并在html文件中引入claygl.js，即可完成claygl的快速配置。
?
? ? 引入代码为:
<script src="css/claygl.js"></script>四.简单的使用实例
??? 使用claygl创建一个旋转正方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="css/claygl.js"></script>
</head>
<body>
<canvas id="main"></canvas>
<script>
clay.application.create('#main',{
width:window.innerWidth,
height:window.innerHeight,
init(app){
this._camera = app.createCamera([0,-10,5],[0,0,0]);
this._cube = app.createCube({
color:'#0f0'
});
this._mainLight = app.createDirectionalLight([0, 0, -1]);
},
loop(app){
this._cube.rotation.rotateY(app.frameTime / 1000);
}
});
</script>
</body>
</html>??? 效果图
?
?
五.更多应用
??? 根据官方文档的介绍，claygl可以派生更多的项目。
??? （1）ECharts GL
??? 
?
??? （2） Clay Viewer
?
? ? （3） DOTA2 Hero Viewer
?
? ? （4）Paper Cut Art Generator
??? （5）Little Big City
六.组内分工
??? 经过小组内成员的讨论，claygl项目可分为场景层次，网格和相机，材料，质地，皮肤，动画以及粒子系统等七个模块，每个成员选择一或两个模块进行分析，分析其核心代码。
??? 我负责分析的模块为动画，即Animation包，其下有Animator，Blend1DClip，Blend2DClip，Clip，SampleTrack，TrackClip等类。