webgl着色器学习 - webpack 打包glsl文件

写着色器没有语法提示 在.glsl文件中可获得语法支持

使用 webpack将文件转换成字符串 传递到 ShaderMaterial中
glsl.d.ts

declare module "*.glsl";
1

webpack配置

module.exports = {
	module:
    {
        rules:
            [
                {
                    test: /\.(glsl)$/,
                    use: ['raw-loader']
                }
             ]
     }
}
1
2
3
4
5
6
7
8
9
10
11
12

circular.vt.glsl

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
1
2
3

circular.fs.glsl

void main() {
    gl_FragColor = vec4(0, 0, 1, 1);
}
1
2
3

使用

import * as THREE from "three";
import vertexShader from "../../shader/circular.vt.glsl";
import fragmentShader from "../../shader/circular.fs.glsl";

export const drawCircular = () => {
    const box = new THREE.Mesh(
        new THREE.BoxGeometry(5, 6, 10),
        new THREE.ShaderMaterial({
            vertexShader,
            fragmentShader,
        })
    );
    return box;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在CRA中使用

如果想在create-react-app中使用 可以使用react-app-rewired 和 customize-cra插入webpack配置 或者eject(不推荐)