Next.js と Babylon.js とwebGL が全く分からない俺
分からないので動かしたかった．バンドラーとして Next.js つかったら next.config.js 書かなきゃ動かなかったので備忘録的に文字に起こしておきます．
Babylon.js を動かす
babylonjs で npm ライブラリも公開されているが nextjs だと動かないので @babylonjs/core を使用する
yarn add -D next-transpile-modules next-compose-plugins yarn add @babylonjs/core
const withTM = require('next-transpile-modules')(['@babylonjs/core']); const withPlugins = require('next-compose-plugins'); const nextConfig = { /* 任意の config */ } module.exports = withPlugins([ [withTM], ], nextConfig);
これだけで build ができるようになります． next-transpile-module が必要なのは @babylonjs/core の js ファイルが es6 import を使用してるからです．@babylonjs/core を install したあとに node_modules をみてみるとわかると思います．
shader ファイルを raw-loader で読む
.glsl, .vert, .frag ファイルを raw-loader で string として読み込んで使えるようにします． next.config.js は babylonjs を使えるようにしたものを拡張しています．
yarn add -D raw-loader glslify-loader
const withTM = require('next-transpile-modules')(['@babylonjs/core']); const withPlugins = require('next-compose-plugins'); const nextConfig = { webpack: (config, options) => { config.module.rules.push({ test: /\.(glsl|frag|vert)$/, use: [ options.defaultLoaders.babel, { loader: "raw-loader" }, { loader: "glslify-loader" }, ], exclude: /node_modules/, }); return config; } } module.exports = withPlugins([ [withTM], ], nextConfig);
import fragment from "./fragment.frag" としたときに fragment が string になるように typescript の型定義も追加しておきます．
declare module "*.vert" { declare const value: string; export default value; } declare module "*.frag" { declare const value: string; export default value; } declare module "*.glsl" { declare const value: string; export default value; }
以上です．もしこれで動いたならばうれしいです．
