npm 包 glslify-simple-include 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 glslify-simple-include？

glslify-simple-include 是一个方便用户在 GLSL 中引入其他 GLSL 文件的工具，它是由 glslify 的作者 Ashley Davis 开发的一个轻量级工具。

安装 glslify-simple-include

在安装 glslify-simple-include 之前，您需要安装 Node.js，并在项目中安装 glslify。

npm install glslify-simple-include

如何使用 glslify-simple-include？

将 glslify-simple-include 与 glslify 联合使用，可以很方便地将其他 GLSL 文件导入到您的代码中，而无需将它们手动复制和粘贴到您的代码中。

// shader.glsl
#pragma glslify: include = require('glslify-simple-include')
#include include('someLibrary/glsl/common.glsl');

void main() {
  // Do something...
}

在上面的例子中，我们可以看到 include('someLibrary/glsl/common.glsl') 的语法，这样做会将 common.glsl 文件导入到当前文件中。

如果您的 GLSL 文件需要从相对于当前文件的其他目录导入其他文件，请使用相对路径。

// shader.glsl
#pragma glslify: include = require('glslify-simple-include')
#include include('../common.glsl');

void main() {
  // Do something...
}

注意事项

如果您的导入路径无法解析，则会抛出错误。请确认导入路径是否正确。
glslify-simple-include 不支持使用通配符导入文件。
您输出的所有片段都必须是字符串，因此，这里须使用字符串拼接。

示例代码

-- -------------------- ---- -------
-- -------
----- ---- - -------------------
----- ------- - ----------------------------------

----- ------ - -
  ------- -------- ------- - ---------------------------------
  -------- --------------------------

  ---- ------ -
    -- -- ------------
  -
--

-- ------- ------
----- -------------- - ---------------------

-- --- --- -------- ------ ---

// common.glsl
vec3 blue = vec3(0.0, 0.0, 1.0);
vec3 green = vec3(0.0, 1.0, 0.0);
vec3 red = vec3(1.0, 0.0, 0.0);

结论

glslify-simple-include 是一个十分方便的 GLSL 工具，它可以帮助您轻松地导入其他 GLSL 文件，避免手动复制和粘贴代码的麻烦。希望此篇文章能够帮助您掌握如何使用 glslify-simple-include。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee73f3