liixnhai的博客

片元着色器绘图方法论：符号距离场渲染第一步：定义距离。这里的距离，是一个人为定义的概念。在画圆的时候，它指的是点到圆心的距离；在画直线和线段的时候，它是指点到直线或某条线段的距离；在画几何图形的时候，它是指点到几何图形边的距离。第二步：根据距离着色。首先是用 smoothstep 方法，选择某个范围的距离值，比如在画直线的时候，我们设置 smoothstep(0.0, 0.01, d)，就表示选取距离为 0.0 到 0.01 的值。然后对这个范围着色，我们就可以将图形的边界绘制出来了。...

浏览器提供的 WebGL API 是 OpenGL ES 的 JavaScript 绑定版本，它赋予了开发者操作 GPU 的能力。WebGL 步骤创建 WebGL 上下文创建 WebGL 程序（WebGL Program）将数据存入缓冲区将缓冲区数据读取到 GPUGPU 执行 WebGL 程序，输出结果着色器（Shader）是用 GLSL 这种编程语言编写的代码片段。在绘图的时候，WebGL 是以顶点和图元来描述图形几何信息的。顶点就是几何图形的顶点，比如，三角形有三个顶点，四边形有四

通用计算机图形系统光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。首先，数据经