Webpack 和 GLSL 着色器 [英] Webpack and GLSL shaders

问题描述

我在 Sage Wordpress 网站上工作，想通过 Three.js 库实现一些 WebGl.像这样 代码丢弃示例图像悬停

I'm working on a Sage Wordpress site and want to implement some WebGl via the Three.js library. Like this code drops example image hover

我一直遇到 GLSL 文件的问题.我尝试了几个不同的加载器模块.但我不断收到相同的错误.有其他人遇到过这种情况吗?

I keep running into issues with the GLSL files. I've tried a few different loader modules. But I keep getting the same errors. Has anyone else experienced this?

    ERROR Failed to compile with 4 errors 5:57:14 PM
error in ./resources/assets/scripts/routes/extras/shader/fragment.glsl

Module parse failed: Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| uniform float time;
| uniform float progress;
| uniform sampler2D texture1;

@ ./resources/assets/scripts/routes/three-test.js 11:0-53
@ ./resources/assets/scripts/main.js
@ multi ./resources/assets/build/util/…/helpers/hmr-client.js ./scripts/main.js

./styles/main.scss

./styles/main.scss

推荐答案

摘自此处:https://www.npmjs.com/package/webpack-glsl-loader

安装这个加载器:

npm install --save-dev webpack-glsl-loader

并将其添加到您的 webpack 配置中:

And add it to your webpack configuration:

{
    module: {
        loaders: [
            {
                test: /\.glsl$/,
                loader: 'webpack-glsl'
            }
        ]
    }
}

然后像您一样简单地导入 fragment.glsl.

then simply import fragment.glsl like you did.

这篇关于Webpack 和 GLSL 着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！