https://github.com/mbalex99/threejs-unrealbloompass-transparent-background-example

An example with TypeScript ThreeJS and a modified UnrealBloomPass that allows for transparent backgrounds
https://github.com/mbalex99/threejs-unrealbloompass-transparent-background-example

Last synced: 7 days ago
JSON representation

An example with TypeScript ThreeJS and a modified UnrealBloomPass that allows for transparent backgrounds

• Host: GitHub
• URL: https://github.com/mbalex99/threejs-unrealbloompass-transparent-background-example
• Owner: mbalex99
• Created: 2021-05-23T03:56:56.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-05-23T04:03:54.000Z (over 3 years ago)
• Last Synced: 2024-04-14T18:42:24.362Z (7 months ago)
• Language: TypeScript
• Size: 1.3 MB
• Stars: 50
• Watchers: 4
• Forks: 13
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ThreeJS Fixed UnrealBloomPass for Transparent Backgrounds

[Visit the example here](https://mbalex99.github.io/threejs-unrealbloompass-transparent-background-example/)

This example illustrates a fix to UnrealBloomPass in ThreeJS that won't allow transparent backgrounds to work. 

The issue is described here:

https://github.com/mrdoob/three.js/issues/14104#issuecomment-429664412

[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript-125x28.png?v=101)](https://github.com/ellerbrock/typescript-badges/)

I made this because I wanted to experiment with ThreeJS. ThreeJS has a massive API and TypeScript is pretty critical for a nice auto-complete experience in an IDE like VSCode. __I also wanted live-reloading for fast iteration__. 

Getting Started:

1. Clone this repo

2. `yarn install` or `npm install`

3. `yarn dev` or `npm run dev`

4. Open up your browser to `localhost:9000`

Just get started with editing your typescript code in: `./src/index.ts`

## Commentary

* This uses `ts-loader`, `webpack`

* See `webpack.config.js` for configuration

## Ending thoughts

  

[![Twitter](https://img.shields.io/twitter/url/https/twitter.com/sudomax.svg?style=social&label=Follow%20%40sudomax)](https://twitter.com/sudomax)

I love threejs and 3D in general! Follow me on twitter [@sudomax](https://twitter.com/sudomax)

[![Twitter](https://img.shields.io/twitter/url/https/twitter.com/dittolive.svg?style=social&label=Follow%20%40dittolive)](https://twitter.com/dittolive)

I'm one of the CoFounders of [Ditto](https://www.ditto.live), which an SDK that allows apps to sync even without an internet connection. You can follow us more on [@dittolive](https://twitter.com/dittolive).