Shader中用射线法判断点在平面内
判断点在平面内的方法有很多。 射线法是其中一种，它允许判断的多边形是凹多边形甚至是复合多边形。 射线法思路 判断一个点是否在多边形内部，其实只需要判断从该点沿任意方向的射线与多边形边界的交点是否是偶数就行了。 如果从该点沿任意方向的射线与多边形边界交点为偶数，则该点在多边形外。 如果从该点沿任意方向的射线与多边形边界交点为奇数，则该点在多边形内。 GLSL中的实现 这里以判断uv坐标是否在范围
Cesium中的离屏渲染
在Cesium中创建FBO实现离屏渲染 由于没有改变相机的位置，因此渲染出来的画面与原本的画面一致(仅关掉了球体和天空盒) 目前已知的问题 由于Cesium会剔除视锥体外的影像，而视锥体内的影像加载时需要请求，因此如果离屏相机与主相机位置不一致，可能会造成影像闪烁的问题（3DTiles虽然也是会剔除视锥体外的部分，但是3DTiles有缓存机制，因此不会出现闪烁的情况） .fullSize {
在shader中调整饱和度、灰度、亮度
开发视频投影的过程中，有需求要调整画面的饱和度、灰度、亮度。 记录一下关键代码和效果。 关键代码 12345678910111213vec4 colorCorrection(vec4 originalColor, float saturation, float brightness, float contrast){ float gray = 0.2125 * originalColo
图形学基础—深度测试
深度测试简单地说就是，对于某一个像素点，始终只记录深度值最小的那个，也就是离相机最近的那个。 什么是深度 深度其实就是像素点在场景中距离相机的距离。 在图形学基础—MVP变换一文中，我们有提到，经过视图变换后，相机被放到了一个标准位置，并且相机朝着-Z方向看向场景。 那么此时像素点的深度就可以用Z值表示。由于相机朝着-Z方向看(右手系下)，所以像素点的Z值越小，那么它对应的深度就越大，反之，如果像
图形学基础—抗锯齿
锯齿产生的原因 我们都知道，显示器的屏幕是由一个个像素组合而成的。渲染的过程其实就是确定每一个像素颜色的过程。 图形渲染的流程，就是一个个三角形，按照顶点着色器 → 光栅化 → 片元着色器这样的顺序进行渲染。 下图表示了一个光栅化阶段的三角形边界。在没有做抗锯齿操作的情况下，我们只判断像素点中心在不在三角形内，如果三角形覆盖了像素点中心，则该像素被着色。如果三角形没有覆盖像素点中心，则该像素不会被
图形学基础—MVP变换
MVP变换 计算机图形学其实就是一种利用数学算法，将二维或三维的场景转化成，计算机显示器能够显示的栅格图像的科学。 在三维场景中，模型渲染成一个二维的画面经过了一系列复杂的数学运算。 MVP变换就是这些数学运算中比较重要的一种。 MVP变换其实对应了三种变换： 模型变换(Model Transfromation) 视图变换(View Transformation) 投影变换(Projection
Cesium自定义模型和着色器
自定义模型 要让WebGL渲染出一个正确的模型，通常需要提供以下信息： 顶点： 定义模型的各个顶点 顶点颜色： 定义每个顶点的颜色（顶点颜色会在传入片元着色器之前进行插值，如果片元颜色使用的是从顶点着色器中传入的顶点颜色，则最终会呈现一种渐变效果） 法线: 定义每个顶点的法线方向 顶点索引： 定义顶点的连接顺序（哪些点连成一个三角形） UV： 定义每个顶点的颜色应该从贴图上的哪个位置获取（UV
图形学基础—矩阵
矩阵 [abcd]\begin{bmatrix}a & b \\c & d \end{bmatrix}[acbd] 1、矩阵的乘法 给定两个矩阵，要计算乘积，前提是两个矩阵必须能够相乘，也就是第一个矩阵的列数要等于第二个矩阵的行数。 矩阵的乘积没有任何的交换，他们相乘的顺序十分重要，通常情况下交换相乘的顺序会得到不一样的结果。但是矩阵的乘积满足结合律和分配律： (AB)C=A
