Giter VIP home page Giter VIP logo

webgl-dithering's Introduction

webGl-dithering

Implementation of dithering algorithm for color compression written in webgl, using shaders

About

This program is used to showcase 2 distinct features.

  1. Dithering algorithm
  2. Cloth physics simulation

Dithering algorithm

The initial idea for the algorithm came from this article describing the use of dithering in modern graphics for aesthetic purposes. The algorithm is implemented to take advantage of the GPU paralelization and the whole dithering process is done on the GPU. A nice example this effect is done in the game Return of the Obra Dinn (2018).

Cloth physics simulation

Second part of the project is simulation of a piece of cloth in the wind based on a system of springs and masses. Numerical integration is done using the mixed Euler method. The project also implements collision with simple objects, such as spheres and cubes.

Installation

The whole project is written in javascript, and it just has to be deployed using your preferred HTTP server.

Example installation

The following example illustrates how to clone the project and run it with npm package reload (requires reload package to be installed, more info here)

git clone https://github.com/donikv/webGl-dithering.git
cd webGl-dithering
reload -b

After that open (http://localhost:8080) in your browser that supports WebGL (most modern browsers).

Running the program

The program implements rudimentary options for controlling the camera and changing currently displayed objects and textures that are applied to them.

Commands

Command Action
Up and down arrow keys Change the distance of the object from the camera
Left and right arrow keys Rotate the object
c key Change the current model
t key Change the current texture
x key Toggle physics
s key Toggle wind direction
w key Toggle collision

Examples

Dithering

Cloth simulation

webgl-dithering's People

Contributors

donikv avatar

Stargazers

Jani Anttonen avatar Ed Bayes avatar  avatar Julian Hespenheide avatar Alejandro  avatar My Kim Bui avatar Faded Weiss avatar Avallach7 avatar Sebastian Gorton Kalvik avatar Jean-Charles Amey avatar K E N O avatar Wolfger Schramm avatar Landon Ferguson avatar JorEl avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.