diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..8fefc69 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "src/shaders/lygia"] + path = src/shaders/lygia + url = https://github.com/patriciogonzalezvivo/lygia.git diff --git a/README.md b/README.md index 213ac71..e92ce4a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This scaffolding lets you easily get started with using Three.js and TypeScript. -![example scene](./assets/docs/example.jpg) +![example scene](./assets/docs/example.png) ## Features @@ -12,6 +12,8 @@ This scaffolding lets you easily get started with using Three.js and TypeScript. - Debugging GUI and Stats - Social media and description overlay - Simple loading animation +- Including shader chunks +- [LYGIA Shader Library](https://lygia.xyz/) ## Prerequisites @@ -115,6 +117,22 @@ This will also clear the content of this README.md file to just the basic comman Resources loaded through THREE.js loaders need to go in the `/public` directory to avoid being compiled by Vite. This includes textures and models. +More information about Vite's asset handling can be found [here](https://vitejs.dev/guide/assets.html). + +### Including Shader Chunks + Shaders are loaded using the [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl) Vite plugin and can be located anywhere within the `/src` directory. -More information about Vite's asset handling can be found [here](https://vitejs.dev/guide/assets.html). +The starter also includes the LYGIA Shader Library. To use it, import the shader chunks you need in your shader file. + +```glsl +// in src/demo/shader.frag + +#include "../shaders/lygia/color/palette/water.glsl" + +varying vec2 vUv; + +void main() { + gl_FragColor = vec4(water(vUv.y), 1.0); +} +``` \ No newline at end of file diff --git a/assets/docs/example.jpg b/assets/docs/example.jpg deleted file mode 100644 index 66a8b19..0000000 Binary files a/assets/docs/example.jpg and /dev/null differ diff --git a/assets/docs/example.png b/assets/docs/example.png new file mode 100644 index 0000000..ede3161 Binary files /dev/null and b/assets/docs/example.png differ diff --git a/package.json b/package.json index 50cfcb3..df2ef0e 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "build": "tsc && vite build", "preview": "vite preview", "cleanup": "node ./scripts/cleanup.js", - "prepare": "husky install" + "prepare": "husky install", + "preinstall": "git submodule update --init --recursive" }, "type": "module", "dependencies": { diff --git a/src/demo/shader.frag b/src/demo/shader.frag index 5319df3..9a4aa6c 100644 --- a/src/demo/shader.frag +++ b/src/demo/shader.frag @@ -1,3 +1,7 @@ +#include "../shaders/lygia/color/palette/water.glsl" + +varying vec2 vUv; + void main() { - gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); + gl_FragColor = vec4(water(vUv.y), 1.0); } diff --git a/src/demo/shader.vert b/src/demo/shader.vert index 28ffa35..11c9f2f 100644 --- a/src/demo/shader.vert +++ b/src/demo/shader.vert @@ -1,3 +1,6 @@ +varying vec2 vUv; + void main() { + vUv = uv; gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0); } diff --git a/src/shaders/lygia b/src/shaders/lygia new file mode 160000 index 0000000..4dc380e --- /dev/null +++ b/src/shaders/lygia @@ -0,0 +1 @@ +Subproject commit 4dc380e9ba7d782fb5a68b0639e7911323f92c57