webgl-distortion-bulge-effect - GitLite

KO | EN

gitlite — search

#javascript #python #react #llm #android #machine-learning #rust #deep-learning #nodejs #macos #kubernetes #vue #awesome-list #ios

webgl-distortion-bulge-effect

(★ 60)

demo for a tutorial on how to make a bulge effect in WebGL

File Explorer

Download Latest Version (.zip)

- - displacement-map.jpg
  - favicon.ico
  - image-1.jpg
  - image-2.jpg
  - image-3.jpg
  - image-4.jpg
  - image-5.jpg
  - image-6.jpg
  - image-7.jpg
  - image-8.jpg
  - matcap.png
.babelrc.json
.eslintrc.json
.gitignore
.prettierrc
favicon.ico
index.html
index2.html
LICENSE
package.json
README.md
vite.config.js

# Installation Guide

1. Get the code

git clone https://github.com/Robpayot/webgl-distortion-bulge-effect

Downloads the entire project code from GitHub to your computer.

cd webgl-distortion-bulge-effect

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm run dev

Starts the development/run server.

npm run build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# WebGL Bulge Effect

Demos for the tutorial on how to create a bulge effect on images using OGL and shaders.

![Bulge](https://tympanus.net/codrops/wp-content/uploads/2023/06/webglbulgefeat.gif?x96671)

[Article on Codrops](https://tympanus.net/codrops/?p=72639)

[Demo](https://tympanus.net/Tutorials/WebGLBulge/)

## Installation

Install dependencies:

```
npm install
```

Compile the code for development and start a local server:

```
npm run dev
```

Create the build:

```
npm run build
```

## Credits

- Images generated with [Midjourney](https://midjourney.com)

## Misc

Follow Robin: [Twitter](https://twitter.com/RobinPayot), [GitHub](https://github.com/Robpayot), [YoutTube](https://www.youtube.com/@howtocodethat_)

Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)

## License
[MIT](LICENSE)

Made with :blue_heart:  by [Codrops](http://www.codrops.com)