glsl基础

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」 shader就是着色器语言，用于绘制计算机图形， 但是并不能单独运行。 我们前端的使用方式就是webgl, 也就是js

shaderToy就是glsl ,本文是小白文，标题可能有点不对。 上次翻译了半篇教程关于shaderToy的使用，这次主要是补充一些细节，如何手动把shaderToy的代码拿来使用。自动的大概有大佬

造型函数绘制曲线的一般方法是， 计算出当前x坐标对应的曲线的y坐标y1，和当前片元凡人y坐标y0相减， 取其绝对值。 显然，当差值为0 的时候，说明这个点，精准的落在曲线上

细胞噪声利用了距离场。把坐标到一个点的距离的关系表现出来就是一圈圈的圆，那么现在有多个点，我们每次都取距离当前坐标最近的那个点的距离，这个就称之为特征点，这样就形成了网状。

本文主要讲述了 ，顶点着色器和片元着色器，的输入、输出机制，以及这其中的插值变化，会涉及少量的GLSL语法知识。

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

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

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

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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 这里说的 book就是 thebookofshader 。它对于完全小白的人来说足够友好了，它从着色基本原

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」 直接画个顶点 绘制过顶点的同学肯定注意到了，gl.POINTS画出来的点就是方的。所以最简单的办法就是画个顶点.稍微修改

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

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

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

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

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

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

本文主要是记录一下，选择图形，即点在图形中的基础知识。 三角微元 要判断一个点（比如鼠标点）是否在一个封闭图形中，就是判断点是否在边界内部或者在组成图形的三角形内部。 向量 叉乘