2

https://aframe.io/docs/master/components/material.html#registering-a-custom-glsl-shader

現在、頂点/フラグメント シェーダーを の文字列として指定できますAFRAME.registerShader。長い文字列内でコーディングする必要がないように、シェーダーを個別のファイルとして維持するにはどうすればよいですか?

4

1 に答える 1

1

A-Frame には、外部シェーダー ファイルを自動的に参照する方法がありません。それらは現在、文字列である必要があります。これが three.js シェーダーの定義方法であり、それらを JS ファイル内で定義することで、共有が容易になり、他のユーザーが複数のファイルを参照することなく使用できるようになります。

ただし、ビルドツールを使用することはできます。

頂点シェーダーとフラグメント シェーダーを .glsl ファイルで定義します...

myVertex.glsl
myFragment.glsl
myAFrameShader.js

シェーダーを次のように記述します。

AFRAME.registerShader('my-shader', {
  vertexShader: require('./myVertex.glsl'),
  fragmentShader: require(./myFragment.glsl')
});

次にビルドツールをインストールします。Webpackは、構成なしで .glsl ファイルを要求しようとしてもスローされないため、うまく機能します。Webpack はモジュール バンドラーです。これは私たちが行っていることであり、複数のファイルを 1 つにまとめます。

npm install -g webpack
npm install --g webpack-glsl-loader

それで

webpack --module-bind 'glsl=webpack-glsl' myAFrameShader.js output/myAFrameShader.js
于 2016-08-09T20:40:54.587 に答える