import {
	resizeCanvasToDisplaySize,
	createProgramInfo,
	createBufferInfoFromArrays,
	setBuffersAndAttributes,
	setUniforms,
	drawBufferInfo,
} from 'twgl.js';

import glslify from 'glslify';

import vShaderSource from '../../shaders/common.vs';
import fShaderSource from './index.fs';

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

const programInfo = createProgramInfo(gl, [glslify(vShaderSource), glslify(fShaderSource)]);

/**
 * a --- b
 * |  \  |
 * c --- d
 */
const arrays = {
	position: {
		numComponents: 3,
		data: [
			-1, -1, 0, // c
			1, -1, 0,  // d
			-1, 1, 0,  // a

			-1, 1, 0,  // a
			1, -1, 0,  // d
			1, 1, 0    // b
		],
	},
};
const bufferInfo = createBufferInfoFromArrays(gl, arrays);

function render(time) {
	resizeCanvasToDisplaySize(canvas);
	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.useProgram(programInfo.program);

	setBuffersAndAttributes(gl, programInfo, bufferInfo);
	
	const uniforms = {
		iResolution: [
			canvas.width,
			canvas.height,
		],
	};
	setUniforms(programInfo, uniforms);
	
	drawBufferInfo(gl, bufferInfo);
}
function renderLoop(time) {
	render(time);
	requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);

最终渲染出了如下图像：

渲染的核心还是在片段着色器，所以其他的代码不用看，直接看片段着色器就能很好理解为什么会渲染成上图的样子。因为本文例子中canvas的每个像素都被光栅化了，所以为了简便起见，下面的例子都不用管Javascript代码和顶点着色器代码，直接看片段着色器代码即可看懂渲染的原理。

 

四、绘制图像及产生动画

 

1、绘制矩形

 

首先来认识step函数，它是GLSL内置的一个函数，第一个参数是阈值，第二个参数的值如果小于阈值就会返回0，否则返回1，我们可以利用它来绘制矩形：

 

uniform vec2 iResolution;

void main() {
	vec2 st = gl_FragCoord.xy / iResolution;
	float l = step(0.2, st.x);
	float r = step(0.2, 1.0 - st.x);
	float b = step(0.2, st.y);
	float t = step(0.2, 1.0 - st.y);
	float pct = l * r * b * t;
	gl_FragColor = vec4(vec3(pct), 1.0);
}

它会渲染成下面的图像：

 

 

再认识一个内置函数smoothstep，和step函数不同的地方在于，它由两个阈值，阈值之间是一个线性过渡效果，比如把step函数换成smoothstep。

 

float l = smoothstep(0.15, 0.25, st.x);
float r = smoothstep(0.15, 0.25, 1.0 - st.x);
float b = smoothstep(0.15, 0.25, st.y);
float t = smoothstep(0.15, 0.25, 1.0 - st.y);
float pct = l * r * b * t;

会渲染成下面的图像：

 

 

接下来我们将渲染矩形的代码提取为一个函数放到另外一个模块里：

 

/**
* @desc 画矩形模块
* @param w {float} 宽
* @param h {float} 高
* @param x {float} x轴偏移量
* @param y {float} y轴偏移量
* @param st {vec2} 画布坐标
* @param smoothThreshold {float} 羽化程度
* @return {float} 颜色分量0.0到1.0之间
*/
float rect(float w, float h, float x, float y, vec2 st, float smoothThreshold) {
	vec2 bl, tr,
		blDistance = vec2(x, y),
		trDistance = vec2(1.0 - x - w, 1.0 - y - h);
	if (smoothThreshold > 0.0) {
		bl = smoothstep(
			blDistance - vec2(smoothThreshold),
			blDistance + vec2(smoothThreshold),
			st
		);
		tr = smoothstep(
			trDistance - vec2(smoothThreshold),
			trDistance + vec2(smoothThreshold),
			1.0 - st
		);
	} else {
		bl = step(blDistance, st);
		tr = step(trDistance, 1.0 - st);
	}
	return bl.x * bl.y * tr.x * tr.y;
}

#pragma glslify: export(rect)

 

这样我们可以导入该模块来绘制矩形：

 

#pragma glslify: rect = require(../../shaders/rect.glsl);
uniform vec2 iResolution;

void main() {
	vec2 st = gl_FragCoord.xy / iResolution;
	float pct = rect(0.5, 0.5, 0.25, 0.25, st, 0.0);
	gl_FragColor = vec4(vec3(pct), 1.0);
}

2、加入动画

前面Javascript代码中我们将时间戳参数传给了着色器，可以利用它实现动画：

#pragma glslify: rect = require(../../shaders/rect.glsl);

uniform vec2 iResolution;
uniform float iTime;

void main() {
	vec2 st = gl_FragCoord.xy / iResolution;
	float pct = rect(0.5, 0.5, abs(sin(iTime)) * 0.5, 0.25, st, 0.0);
	gl_FragColor = vec4(vec3(pct), 1.0);
}

 

五、贴图，模拟photoshop图层混合效果

 

我们知道片元着色器能够控制光栅化后的每个像素的颜色，意味着我们可以绘制出任意复杂的图像，比如画一副风景图，但这是吃力不讨好的行为，有更好的方法来做，就是使用纹理贴图。我们把一幅准备好的风景图作为纹理贴到webGL绘制的图形上就可以了。纹理贴图的原理很简单：向片元着色器提供纹理图像（采样器）和纹理坐标，然后在片元着色器的逐像素操作中，将纹理坐标映射的纹理图像的像素颜色（纹素）提取出来，赋值给光栅化后的像素。

 

片段着色器很简单，传入了纹理图像(iChannel0)和纹理坐标(iResolution)，并在入口函数里完成了纹理采样的过程。texture2D函数是GLSL ES内置函数，用于2D纹理的采样。

 

uniform vec2 iResolution;
uniform sampler2D iChannel0;

void main() {
	vec2 st = gl_FragCoord.xy / iResolution;
	gl_FragColor = texture2D(iChannel0, st);
}

上面的例子只是贴一张纹理图，我们也可以贴多张纹理图，并通过一定的算法混合多幅图像，得到特殊的效果。比如photoshop里面图层的混合方式，正片叠底、滤色、线性加深（减淡）等等，都可以实现。其实这很简单，我们把片段着色器改改：

uniform vec2 iResolution;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;

void main() {
	vec2 st = gl_FragCoord.xy / iResolution;
	vec4 texture0 = texture2D(iChannel0, st);
	vec4 texture1 = texture2D(iChannel1, st);
	// 正片叠底
	vec4 color = texture0 * texture1;
	// 滤色
	// vec4 color = 1.0 - (1.0 - texture0) * (1.0 - texture1);
	// 线性减淡
	// vec4 color = texture0 + texture1;
	// 线性加深
	// vec4 color = texture0 + texture1 - 1.0;

	gl_FragColor = color;
}

六、模拟自然效果-噪声

 

片段着色器有强大的造型能力，可以模拟自然界中的一些效果，比如火焰、金属、木头纹理等等。下面的片段着色器使用第三方噪声模块产生木头纹理的效果：

 

#pragma glslify: snoise2 = require(glsl-noise/simplex/2d)

// 圆周率
#define PI 3.14159265359

/**
* @desc 2d旋转函数
* @param {float} angle 旋转弧度
* @return {mat2} 旋转矩阵
*/
mat2 rotate2d(float angle){
	return mat2(
		cos(angle), -sin(angle),
		sin(angle), cos(angle)
	);
}

/**
* @desc 画横线
* @param {vec2} pos 坐标
* @param {float} b 线的宽度
* @return {float} 0.0到1.0的权重值
*/
float lines(in vec2 pos, float b){
	float scale = 10.0;
	pos *= scale;
	return smoothstep(
		0.0,
		0.5 + b * 0.5,
		abs((sin(pos.y * PI) + b * 2.0)) * 0.5
	);
}

/**
* @desc 画木头纹理
* @param {vec2} st 坐标
* @return {float} 0.0到1.0的权重值
*/
float drawWoodTexture(in vec2 st, in float time) {
	vec2 pos = st * vec2(2.0, 2.0);
	// pos = rotate2d(snoise2(pos)) * pos;
	pos = rotate2d(snoise2(pos) * abs(sin(time / 10.0))) * pos;
	float pct = lines(pos, 0.2);
	return pct;
}

uniform vec2 iResolution;
uniform float iTime;

void main() {
	vec2 st = gl_FragCoord.xy / iResolution;

	float pct = drawWoodTexture(st, iTime);
	vec3 color = vec3(pct);

	gl_FragColor = vec4(color, 1.0);
}

 

七、使用第三方模块

 

除了自己去实现一些片段着色器，也可以导入第三方模块来使用。下面的例子导入第三方的rain模块来实现涟漪的效果。

 

precision highp float;

#pragma glslify: testRain = require(./rain.glsl)

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 iMouse;
uniform sampler2D iChannel0;

void main() {
	testRain(gl_FragColor, gl_FragCoord.xy, iResolution, iTime, iMouse, iChannel0);
}