Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guidoschmidt/examples.lygia-threejs
Collection of three.js examples using lygia shader library
https://github.com/guidoschmidt/examples.lygia-threejs
glsl glsl-shaders lygia shader-library shaders three-js threejs threejs-example threejs-learning webgl
Last synced: 4 months ago
JSON representation
Collection of three.js examples using lygia shader library
- Host: GitHub
- URL: https://github.com/guidoschmidt/examples.lygia-threejs
- Owner: guidoschmidt
- Created: 2022-10-30T15:44:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-12T09:58:35.000Z (over 1 year ago)
- Last Synced: 2024-10-12T22:20:56.710Z (4 months ago)
- Topics: glsl, glsl-shaders, lygia, shader-library, shaders, three-js, threejs, threejs-example, threejs-learning, webgl
- Language: TypeScript
- Homepage:
- Size: 10.5 MB
- Stars: 43
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lygia Examples
These are examples of how to use [LYGIA Shader Library](https://lygia.xyz/) with
[three.js](https://threejs.org/)
Live examples: [lygia.guidoschmidt.cc](https://lygia.guidoschmidt.cc)
---
| Example | Preveiw |
|---------------------------------------------------|-----------------------------------------------------------------------------------------|
| marching squares [2D] | ![Marching Squares [2D]]( ./2d-marching-squares/screenshot.png ) |
| forward rendering [basic] | ![Forward rendering [basic]]( ./3d-forward-rendering-basic/screenshot.png ) |
| forward rendering [advanced], 5 x 5 PBR Materials | ![Forward rendering [advanced]]( ./3d-forward-rendering-advanced/screenshot.png ) |
---
### How to start?
Clone this repository including its submodules. [LYGIA](https://github.com/patriciogonzalezvivo/lygia) is used as
git submodule in this repository.
```bash
git clone --recurse-submodules [email protected]:guidoschmidt/lygia_threejs_examples.git
```
---
### Run the examples
The repository contains several examples in. Each example is its own sub-project. You can start each example as following:
```bash
cd 3d-forward-rendering-basic
npm | yarn | pnpm install
npm | yarn | pnpm dev
```
You can also start an overview HTML page by running just:
```bash
npm | yarn | pnpm dev
```
---
### Open Issues & Ideas
- Use THREE.js internal light shadow map. Currently it looks like there's an
incosistency when using `light.shadow.map.texture` as the shadow map texture.
- Create a custom `LygiaMaterial` in order to integrate into THREE.js render
pipeline
- Pass all PBR material parameters to the Lygia shaders/materials