计算机图形学
文章平均质量分 83
代码也能突破维度?
samarua
while "live" : print("Loli")
展开
-
【计算机图形学】从0实现光线追踪 · 后篇
回顾在上一节中,我们已经完成了:架了相机(Camera),摆放好场景(Scene);射出射线、计算交点(IntersectResult);实现了渲染器(Render),即将交点信息返回到画布(Canvas)上 接下来,我们将完成:手写材质(Material),其中,材质最重要的方法是取样(sample),即获得颜色手写光线追踪过程,这是一个递归渲染出成品 颜色(Color)计算出交点处的颜色(color),返回并绘制到画布原创 2020-12-14 19:51:18 · 493 阅读 · 1 评论 -
【计算机图形学】从0实现光线追踪 · 前篇
写在前面 之前使用 OpenGL/WebGL 进行了图形学的相关学习,并使用 Three.js 搭建了几个3D场景,也实现了几个比较有趣的效果。但是基于库、甚至基于three.js那样大量的实现类,终究是无法深入理解计算机图形学的。 因此,这两篇文章将从底层开始实现一个计算机图形学的经典问题——光线追踪(Ray Tracing)。我们不会使用任何一个实现类,完全由底层的纯代码开始编写——这意味着,我们将从向量(Vector3)、射线(Ray3)、颜色(Color)开始,手写相机(Camera)、场原创 2020-12-14 19:45:35 · 1007 阅读 · 0 评论 -
【计算机图形学】深入浅出讲解光线追踪(Ray Tracing)
CG基础与光学基础▍问自己一句,3D场景为何可以被绘制到2D的画布/屏幕上?emmmmm…没有那么复杂,这几乎是一个纯几何的过程:透视投影。将三维物体的特征点与眼睛连接成一条线,这条线会穿过画布(Canvas)留下一个交点,无数个这样的“连线”与画布的交点,组成了三维物体在二维平面的投影(如下图>_<)颜色与亮度。好了,我们已经获得了三维物体在二维平面上投影的位置信息;接下来,这些“连线”还会将三维物体上的颜色/亮度信息,带回到二维平面上来,形成最终的图像!▍补充一些物理中的光学原创 2020-12-14 19:39:32 · 3964 阅读 · 1 评论 -
【计算机图形学】结课大作业——光照模型(3D场景)
效果 >_<原创 2020-12-12 23:14:28 · 6527 阅读 · 8 评论 -
【计算机图形学】结课大作业——三维场景变换(ASCII表)
效果 >_< 技术栈经典三剑客——HTML / CSS / JavaScriptWebGL快速开发:Three.js 思路分析▶ 变量声明var table——列表,存放ASCII码表及其信息var scene, camera, renderer——场景、相机、渲染器var controls——控件var objects = []——objects[]集合是ascii码图形的集合,记录着3D排列方式var target原创 2020-12-12 23:12:29 · 1524 阅读 · 1 评论 -
【计算机图形学】入门Three.js,并搭建你的第一个3D场景
什么是Three.js?WebGL(Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 你可以将Three.js看作是WebGL的封装——简单、易用、强大、效果惊艳。Three.js其实是一款运行在浏览器中的 3D 引擎。不过,这款引擎目前还处在比较不成熟的开发阶段,原创 2020-12-12 18:34:27 · 1272 阅读 · 1 评论