百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

WebGL No.7 - 着色器

困难

人数25人在学习该课程,有15人已经完成该课程

时间平均用时2.7

关键词WebGLthree.js

课程概述

作业提交截止时间:04-24

任务目的

在这一题中,你将了解到着色器的相关知识,并且实现一个简单的卡通着色器。

任务描述

  • 学习《Three.js 入门指南》第 9 章着色器;
  • 学习《卡通渲染》,在理解代码的基础上,可以尝试一些改进(比如例子中使用了单一的颜色,那么如何将纹理和亮度结合起来生成卡通效果呢;可以自己尝试一些别的实现),前往不要直接把代码复制到自己的项目中,这样你学不到东西;
  • 实现简单的卡通着色器。

上图(图片来源:Wikipedia)显示的是卡通渲染的例子,左图是茶壶面片的 wireframe,中间的图是用纯色着色器渲染的结果,右图是卡通渲染的结果。

实现的思路是,当亮度定为几个区间,在某个区间就用其对应的一个颜色去替代。这里有几个例子,可以参考实现。上图中描边的效果可以根据自己的能力实现。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
three.js 着色器学习笔记2017-03-12 15:2326921
点击查看更多课程优秀笔记