女王控的博客

读书笔记

75 篇文章

WebGL 理论基础——光照

WebGL 三维方向光源 实施光照的方式有很多种,最简单的可能就是方向光源了。 方向光是指光照均匀地来自某一个方向,晴朗天气下的太阳经常被当作方向光源,它距离太远所以光线被看作是平行的照到地面上。 计算方向光非常简单,将方向光的方向和面的朝向点乘就可以得到两个方向的余弦值。 这有个例子 随意拖动其中的点,如果两点方向刚好相反,点乘结果则为 -1,如果方向相同结果为 1。 这有什么用呢?如果将三维物体的朝向和光的方向点乘,结果为 1 则物体朝向和光照方向相同,为 -… »

写给大家看的设计书

设计原则 引言 对比(Contrast) 对比的基本思想是,要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。要让页面引人注目,对比通常是最重要的一个因素,正是它能使读者首先看这个页面。 重复(Repetition) 让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。这样一来,既能增加条理性,还可以加强统一性。 对齐(Alignment… »

WebGL 理论基础——三维

WebGL 三维正射投影 上一篇文章概述了二维矩阵的工作原理,我们讲到了如何平移,旋转,缩放甚至从像素空间投影到裁剪空间,并且将这些操作通过一个矩阵实现,做三维只需要再迈出一小步。 二维例子中的二维点 (x, y) 与 3x3 的矩阵相乘,在三维中我们需要三维点 (x, y, z) 与 4x4 的矩阵相乘。 让我们将上个例子改成三维的,这里会继续使用 F,但是这次是三维的 ‘F’ 。 首先需要修改顶点着色器以支持三维处理,这是原顶点着色器 这是新着色器 它甚至变简单了!在二维中我们提供 x… »

WebGL 理论基础——图像处理

WebGL 图像处理 在 WebGL 中绘制图片需要使用纹理。和 WebGL 渲染时需要裁剪空间坐标相似,渲染纹理时需要纹理坐标,而不是像素坐标。无论纹理是什么尺寸,纹理坐标范围始终是 0.0 到 1.0 。 因为我们只用画一个矩形(其实是两个三角形),所以需要告诉 WebGL 矩形中每个顶点对应的纹理坐标。我们将使用一种特殊的叫做 varying 的变量将纹理坐标从顶点着色器传到片断着色器,它叫做“可变量” 是因为它的值有很多个,WebGL… »

0%