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

// import a function from another file
#pragma glslify: calc_frag_color = require('./lib.glsl')

precision mediump float;
varying vec3 vpos;

void main() {
  gl_FragColor = calc_frag_color(vpos);
}

lib.glsl

// import a function from 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);
}

// export a function
#pragma glslify: export(calc_frag_color)