three-shaders

A package containing various custom shader passes for use with ThreeJS.

This repository is hosted on github, if you're already reading this there, then great! Otherwise browse the repository here. For a demo of the functionality of this repository, see here.

Table of Contents

• Description
• Getting Started
  • Installation
  • Configuration
  • Basic Usage
• Usage
  • Passes
  • Full Scene
  • CommonJS
• Testing
• Documentation
• Roadmap
• Attributions
• 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. Each shader pass is implemented using the post-processing pipeline available in ThreeJS. 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 and 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.

Installation

This package may be installed from npm in any appropriate javascript or typescript project which is already using ThreeJS. If you do not already have ThreeJS installed in your project, please see here for instructions on getting started. To install the package, please use the following command:

# optionally install three if your project does not already include it
npm install --save three

# install the boutique (recommended as a normal dependency)
npm install --save @blameitonyourisp/three-shaders

Types for this package are written using jsdoc, are built using the typescript compiler set to emit only type declarations, and are then combined into one declaration file using rollup with the 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

Boutique 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 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. If this is not the case, then please see the documentation on 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, the main differences are as follows:

• To use custom shader passes, an 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:

// 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 section above for information on getting started with adding shader passes to a scene in ThreeJS, 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. 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:

// Import boutique using commonjs require syntax.
const { AsciiPass } = require("@blameitonyourisp/three-shaders/COMMON_JS")

Testing

This repository uses jest for testing. See the npm scripts section 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 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
• choosealicense
• spdx

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.