GLSL

Parcel は、@parcel/transformer-glsl プラグインを使用して WebGL シェーダーをインポートすることをサポートします。.glsl、.vert または .frag ファイルが検出されると、プロジェクトに自動的にインストールされます。

使用例

GLSL ファイルは文字列として JavaScript にインポートされ、WebGL コンテキストにロードできます。

import frag from './shader.frag'

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

依存関係

Parcel は、node_modules のライブラリからの依存関係を含む、プラグマを使用した GLSL ファイル内の依存関係もサポートしています。これらは、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)