https://github.com/blameitonyourisp/three-shaders
Assorted shaders for use with ThreeJS.
https://github.com/blameitonyourisp/three-shaders
shaders three-js webgl
Last synced: 3 months ago
JSON representation
Assorted shaders for use with ThreeJS.
- Host: GitHub
- URL: https://github.com/blameitonyourisp/three-shaders
- Owner: blameitonyourisp
- License: mit
- Created: 2024-01-23T01:56:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-22T03:13:28.000Z (over 1 year ago)
- Last Synced: 2024-04-23T20:48:07.093Z (about 1 year ago)
- Topics: shaders, three-js, webgl
- Language: JavaScript
- Homepage: https://shaders.blameitonyourisp.com
- Size: 6.86 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# three-shaders
A package containing various custom shader passes for use with [ThreeJS](https://threejs.org/).
This repository is hosted on [github](https://github.com), if you're already reading this there, then great! Otherwise browse the repository [here](https://github.com/blameitonyourisp/three-shaders). For a demo of the functionality of this repository, see [here](https://shaders.blameitonyourisp.com).
 
### Table of Contents
- [Description](#description)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Configuration](#configuration)
- [Basic Usage](#basic-usage)
- [Usage](#usage)
- [Passes](#passes)
- [Full Scene](#full-scene)
- [CommonJS](#commonjs)
- [Testing](#testing)
- [Documentation](#documentation)
- [Roadmap](#roadmap)
- [Attributions](#attributions)
- [License](#license)
### Size
Approximate download size of repository, code files within repository, compressed main file, and (just for fun) lines written by the developer including comments etc. Please note that due to file compression, and post download installs/builds such as node module dependencies, the following badges may not exactly reflect download size or space on disk.
   
## Description
Three shaders is a package containing various custom shader passes for use within projects using [ThreeJS](https://threejs.org/). Each shader pass is implemented using the [post-processing](https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing) pipeline available in [ThreeJS](https://threejs.org/). These shaders are largely "just for fun", but may be useful for achieving certain effects in browser-based games etc.
## Getting Started
Please see the following sections for information on getting started using this repository. Below you will find information on how to install, configure, and use the main features of the repository. See the [usage](#usage) and [documentation](#documentation) sections for more detailed information on how to use all features of the repository. For more information on editing or contributing to this repository (for instance repository directory structure and npm scripts), please see the `CONTRIBUTING.md` file [here](https://github.com/blameitonyourisp/three-shaders/blob/main/CONTRIBUTING.md).
### Installation
This package may be installed from [npm](https://www.npmjs.com/) in any appropriate javascript or typescript project which is already using [ThreeJS](https://threejs.org/). If you do not already have ThreeJS installed in your project, please see [here](https://www.npmjs.com/package/three) for instructions on getting started. To install the package, please use the following command:
```bash
# optionally install three if your project does not already include it
npm install --save three
# install three-shaders (recommended as a normal dependency)
npm install --save @blameitonyourisp/three-shaders
```
Types for this package are written using [jsdoc](https://jsdoc.app/), are built using the [typescript compiler](https://www.npmjs.com/package/typescript) set to emit only type declarations, and are then combined into one declaration file using [rollup](https://rollupjs.org/) with the [rollup-plugin-dts](https://www.npmjs.com/package/rollup-plugin-dts) plugin. This declaration file is exported with the package by default, and may be found by following the `types` field defined in the `package.json` file.
### Configuration
This package requires no configuration, and should be handled by any bundler you may be using to produce the production version of scripts for your site. Please note that since the shader passes in this package must be used inside a [ThreeJS](https://threejs.org/) project, `three` is treated as an `external dependency` by this package, and is *not* bundled into the final output code.
### Basic Usage
Please note that the following example assumes that the reader is already familiar with the basic concepts involved with setting up a scene in [ThreeJS](https://threejs.org/). If this is not the case, then please see the documentation on [creating a scene](https://threejs.org/docs/#manual/en/introduction/Creating-a-scene) before continuing. The example also renders only an empty, static scene with no animation loop, and does not include setup of any scene objects.
When using custom shader passes in [post-processing](https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing), the main differences are as follows:
- To use custom shader passes, an [`EffectComposer`](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer) instance must be created, with passes being added to the `composer` object in order
- When rendering the scene, the standard call to `renderer.render(scene, camera)` is replace with a call to `composer.render()` instead
Please see the following code block for an example scene using a custom pass provided by this package:
```javascript
// ThreeJS dependencies including addon dependencies required for creating
// effect composers.
import * as THREE from "three"
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"
import { RenderPass } from "three/addons/postprocessing/RenderPass.js"
// Custom pass imports from this package.
import { AsciiPass } from "@blameitonyourisp/three-shaders"
// Declare scene.
const scene = new THREE.Scene()
// Setup standard renderer.
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.appendChild(renderer.domElement)
// Setup standard perspective camera.
const { width, height } = renderer.getSize(new THREE.Vector2())
const camera = new THREE.PerspectiveCamera(75, width / height)
// Setup scene including models, lights etc., and configure camera, and renderer
// as required...
// Declare new EffectComposer instance.
const composer = new EffectComposer(renderer)
// Add standard render pass to the composer in order o render the scene.
const renderPass = new RenderPass(scene, camera)
composer.addPass(renderPass)
// Add custom imported shader passes as required (can include multiple).
const asciiPass = new AsciiPass(renderer)
composer.addPass(asciiPass)
// Replace standard call to `render` method of the renderer with a call to the
// `render` method of the composer instead.
composer.render()
```
## Usage
Please see the [basic usage](#basic-usage) section above for information on getting started with adding shader passes to a scene in [ThreeJS](https://threejs.org/), otherwise see below for more information on all features available in this package.
### Passes
Please see the following table for the currently available shader passes in this package and a description of what they do:
| Import Name | Constructor | Description |
|-------------------|-------------------------------------------------------|--------|
| `AsciiPass` | `new AsciiPass(renderer: THREE.WebGLRenderer)` | Render scene using only a set of ASCII characters. |
| `BloomPass` | `new BloomPass(renderer: THREE.WebGLRenderer)` | Slightly blur brighter parts of a scene to make them appear as if they are glowing. |
| `PixelatePass` | `new PixelatePass(renderer: THREE.WebGLRenderer)` | Pixelate scene. |
Note that each pass currently takes the `renderer` as a parameter into the constructor to extract width and height information. If the `renderer` object size is updated for any reason, these changes will *not* be reflected in any existing shader pass instances, and therefore these instances may have to be replaced in order to prevent rendering artifacts (these will mostly be related to incorrect aspect ratios in the rendered output).
### Full Scene
For an example full scene including lights, models, and animations, please see the demo web page [here](https://shaders.blameitonyourisp.com). to review the code of that page, please see the files for the static site under `./src/web`. The main page is located at `./src/web/pages/index.html`, and the entrypoint for the scripts is `./src/web/script/index.js`. To test the site locally, run `npm run start:web` after cloning the repository and installing dependencies.
### CommonJS
This package also provides a commonjs export for backwards compatibility with commonjs module syntax `require` imports. Please see the following code block for more information:
```javascript
// Import boutique using commonjs require syntax.
const { AsciiPass } = require("@blameitonyourisp/three-shaders/COMMON_JS")
```
## Testing
This repository uses [jest](https://jestjs.io/) for testing. See the [npm scripts section](https://github.com/blameitonyourisp/three-shaders/blob/main/CONTRIBUTING.md#npm-scripts) of the repository `CONTRIBUTING.md` file to see the scripts available for scoped test suites. Alternatively run `npm test` to run all available tests.
## Documentation
This repository is documented using a mixture of inline comments, jsdoc, and custom markdown tutorials for demonstrating specific functionality. For generating documentation from jsdoc comments in this repository, please see the [npm scripts section](https://github.com/blameitonyourisp/three-shaders/blob/main/CONTRIBUTING.md#npm-scripts) of the repository `CONTRIBUTING.md` file, or run `npm run docs:jsdoc`. For markdown documentation files on specific functionality and features of this repository, please see the `./docs` directory.
## Roadmap
If you find a bug or think there is a specific feature that should be added or changed, please file a bug report or feature request using this repository's issue tracker. Otherwise, please see below for proposed new features which may be added in later updates:
- This repository currently has no projects on its roadmap
## Attributions
At the time of last update, this repository used no 3rd party assets or libraries other than those which are referenced as dependencies and/or dev dependencies in the package.json file in the root of this repository. The author will endeavour to update this section of documentation promptly as and when new 3rd party assets or libraries not referenced in the package.json file are added to this repository.
## License
---
**DISCLAIMER** The author(s) of this repository are in no way legally qualified, and are not providing the end user(s) of this repository with *any* form of legal advice or directions.
---
Copyright (c) 2024 James Reid. All rights reserved.
This software is licensed under the terms of the MIT license, a copy which may be found in the LICENSE.md file in the root of this repository, or please refer to the text below. For a template copy of the license see one of the following 3rd party sites:
- [opensource](https://opensource.org/license/mit/)
- [choosealicense](https://choosealicense.com/licenses/mit/)
- [spdx](https://spdx.org/licenses/MIT)
#### License Text
Copyright 2024 James Reid
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.