GLSL

Parcel 使用 @parcel/transformer-glsl 插件支持导入 WebGL 着色器。当检测到 .glsl、.vert 或 .frag 文件时，它将自动安装到您的项目中。

使用示例

#

GLSL 文件作为字符串导入到 JavaScript 中，您可以将其加载到 WebGL 上下文中。

import frag from './shader.frag'

// ...
gl.shaderSource(..., frag);
// ...

依赖

#

Parcel 还支持使用预处理器指令在 GLSL 文件中引入依赖，包括来自 node_modules 的库。这些依赖将被捆绑到一个可以加载到 WebGL 上下文中的着色器中。

app.js: 
import frag from './shader.frag';

// ...
gl.shaderSource(..., frag);
// ...
shader.frag: 
// 从另一个文件导入函数
#pragma glslify: calc_frag_color = require('./lib.glsl')

precision mediump float;
varying vec3 vpos;

void main() {
  gl_FragColor = calc_frag_color(vpos);
}
lib.glsl: 
// 从 node_modules 导入函数
#pragma glslify: noise = require('glsl-noise/simplex/3d')

vec4 calc_frag_color(vec3 pos) {
  return vec4(vec3(noise(pos * 25.0)), 1.0);
}

// 导出函数
#pragma glslify: export(calc_frag_color)