图形

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情 之所以要搞清楚这个函数，还是因为我绘制网格的时候遇到了问题。直到遇见了偏导数才得以解决。

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情 本文主要内容可能和babylon并无太紧密的关联， 主要是对旋转（ 空间想象力 ）的练习。 本来想写个魔方

js随机数 js只要调用Math.random就能生成 0-1之间的随机数，虽然是伪随机，也够用了。 如果觉得不够也可以使用crypto,代码如下,返回结果同样是0-1。

距离场 distacnce filed 就是用一个描述模型表面到模型中心距离的函数，来绘制图形的方式。 当然，今天只是进门，我们抛开z分量不谈，只看二维的。 比如最简单的圆形， 就是所有满足 d =

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情 就是照着葫芦画瓢，以此来熟练shader绘图的基本模式。 原例子是shader toy上的，传送门， 截图，我不想录

访问官网 我是真没想到使用这个库的第一个麻烦，居然是文档访问过慢。 慢到点了之后全然没反应，让人怀疑是不是年久失修。 老办法， 先把文档下载下来，本地运行. 结果下载缓慢，先将就一下官网吧。 先 np

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情” 不想看我啰嗦的可以直接看 threejs的example,这个里面就是drawbuffers的使用, webgl

之前其实提过，两个图形之间，做加减乘，这三种运算，分别对应 并集， 补集 ， 交集。 我最近使用这个函数，恍然小悟，这就是个减法，用两个图形相减，剩余的部分就是我们要的那条线。 来分别看，smooth

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情 注意，下文，格子特别多，没有衫。 pattern就是一种图案，可重复的， 比如瓷砖。用shader来做，

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情 开局一份代码，和文章关系不大就是觉得好玩。本来也想写一下距离场的，奈何鄙人也没搞明白到足以输出的程度，暂

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 极坐标 通常我们都用的是经典笛卡尔坐标，但是有些场景极坐标更合适，如果你想画一圈一圈的效果，和旋转角度渐

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 前面已经说了造型函数，看上去画的是线，但是原理已经说了，其实就是画面。判断点是否在图形内。 但是很多时候

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情 第六章就是颜色了。首先来看一下颜色的数据类型。 shader里的向量 颜色是四维向量vec4 我们就直接

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情 任意函数曲线的绘制 虽然上篇的例子很简单，但是其实我已经讲了一种绘制任意曲线（直线是特殊的曲线）的方法。

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 今天就开始讲述造型函数。 如果 第五章 你已经看过,没有大的疑问，就不需要看下面的内容了。 之前说了，sh

在正式开始推导之前，首先要明确旋转的方向和角度的数值问题。这个确定之后，推导的时候就不会有疑惑。 旋转的方向与坐标弧度值 一般我们所说的旋转正方向指的是，a 绕某轴旋转了θ角度， 就是说a正方向旋转了

「这是我参与2022首次更文挑战的第29，活动详情查看：2022首次更文挑战」 在开始绘制之前，得先知道基本的坐标转换。 坐标转换 1. 2dcanvas坐标系，也是dom坐标系. 原点： 左上角。

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」 古人说的好，目遇之而成色。 眼睛遇到了光线，人就看到了颜色。大多数情况下，人眼看见的是反射光，既然有反射光，那说明我们

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」 webgl就是js + glsl.用js和shader交互是最基本的。js只能改变在着色器中已声明的顶点数据和片元数据

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」 我们已经知道，webgl只能画点线面。不像2dcanvas的fill 和stroke. 如果要实现类似的效果，只能用三