glslify安利
glslify是一个shader的模块化工具,可以让shader模块化。虽然以前就关注过这个东西,但是并没有当回事。最近把shader-school里所有练习题完成了,终于体会到了glslify的强大。
安装配置
安装glslify非常简单,安装node.js
之后,可以选择全局安装
npm install -g glslify
也可以选择在本地安装,使用时可以配合browserify
或其他自动化工具使用。
本地使用教程
编写一个glslify模块
新建一个用来保存glsl模块的文件,我用module.glsl
来示范。
// module.glsl
highp float sum(highp float x, highp float y) {
return x + y;
}
#pragma glslify: export(sum)
其中,最后一句#pragma glslify: export(sum)
非常重要,表示该模块导出时的名字。
在其他文件中使用此模块
新建一个调用该模块的glsl文件,我用input.glsl
为例。
// input.glsl
#pragma glslify: sum = require(./module)
void main() {
float s = sum(0.5, 0.5);
gl_FragColor = vec4(s, s, s, 1.0);
}
第一句#pragma glslify: sum = require(./module)
表示调用外部模块,使用方法和node.js
相同。
编译调用外部模块的glsl文件,用于实际开发
命令行直接编译glslify文件,可用如下命令
glslify index.glsl -o output.glsl
可以得到用于生产环境的文件output.glsl
// output.glsl
#define GLSLIFY 1
highp float sum(highp float x, highp float y) {
return x + y;
}
void main() {
float s = sum(0.5, 0.5);
gl_FragColor = vec4(s, s, s, 1.0);
}
使用stack.gl上提供的模块
glslify把glsl模块化。模块化之后就可以像npm,gem,pip一样,使用其他在线的库。glslify的库现在并不多,基本都由stack.gl维护。shader模块可以在http://stack.gl/packages/的Shader Component部分找到。在stack.gl上也能找到非常多和webgl学习相关的资源。
下载一个glslify模块到本地开发环境
npm install glsl-noise
glslify使用
npm
作为包管理程序。
在glsl文件中使用该模块
编写如下文件
#pragma glslify: noise = require(glsl-noise/simplex/2d)
void main() {
float brightness = noise(gl_FragCoord.xy);
gl_FragColor = vec4(vec3(brightness), 1.);
}
编译该文件
编译该shader文件,可以得到如下用于生产环境的glsl文件。
#define GLSLIFY 1
//
// Description : Array and textureless GLSL 2D simplex noise function.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// Lastmod : 20110822 (ijm)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec2 mod289(vec2 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec3 permute(vec3 x) {
return mod289(((x*34.0)+1.0)*x);
}
float snoise(vec2 v)
{
const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0
0.366025403784439, // 0.5*(sqrt(3.0)-1.0)
-0.577350269189626, // -1.0 + 2.0 * C.x
0.024390243902439); // 1.0 / 41.0
// First corner
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
// Other corners
vec2 i1;
//i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
//i1.y = 1.0 - i1.x;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
// x0 = x0 - 0.0 + 0.0 * C.xx ;
// x1 = x0 - i1 + 1.0 * C.xx ;
// x2 = x0 - 1.0 + 2.0 * C.xx ;
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
// Permutations
i = mod289(i); // Avoid truncation effects in permutation
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
// Gradients: 41 points uniformly over a line, mapped onto a diamond.
// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
// Normalise gradients implicitly by scaling m
// Approximation of: m *= inversesqrt( a0*a0 + h*h );
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
// Compute final noise value at P
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
float brightness = snoise(gl_FragCoord.xy);
gl_FragColor = vec4(vec3(brightness), 1.);
}