前端与3D | 青训营笔记

82 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

课堂重点

这两天是最后的青训营课程了,讲的都是3d相关的,整理一下笔记。

webgl

GPU ≠ WebGL ≠ 3D 创造WebGl

WebGL的核心是OpenGL,它是OpenGL在Web上的实现。OpenGL是通过操作GPU来完成图形绘制渲染的,因此它的API相对比较底层,使用起来较为繁琐,这使得一些习惯于前端开发的工程师很难适应,所以就会觉得学习门槛较高。

image.png

image.png

相关 webgl知识

the book of shaders

Mesh.js

glsl-doole

SpriteJS

ThreeJS

ShaderToy

月影大佬自己写的webgl入门

3d

3d位姿态,

  1. 位置 Position(x,y,z),是一个三维向量坐标
  2. 旋转 Rotation(x,y,z).是一个三维向量坐标
  3. 缩放 Scale(x,y,z),是一个三维向量坐标

实现立体效果

  1. 需要相机提供观察角度
  2. 光照,投影体现物体颜色材质和阴影
  3. 天空盒为相机的清除标志。

知识点总结

  1. 学习在Unity中创建实体,给实体设置位姿、材质、刚体、脚本。
  2. 学会配置相机、光、天空盒。
  3. 理解实时游戏update的时序机制。
  4. 通过Input.GetAxis(与InputManager监听玩家输入。
  5. 用Instantiate(动态生成游戏实体实例。6. 从Camera.main获得相机参数,设置场景中的物体在画面中的位置。
  6. 利用标签、图层管理器区分实体种类并设置物理规则。
  7. 通过 Collider 组件与 OnTrigger 函数添加碰撞事件。
  8. 通过图形用户界面(GUI)管理游戏界面。

推荐课程: GAMES 101-现代计算机图形学入门-闫令琪(中级) GAMES 104-现代游戏引擎入门必修课-王希(高级) GAMES 202-高质量实时渲染-闫令琪(技美专用)

总结

这两节课真的上来难度了,初学者的我,需要以后花更多的时间去啃明白