Giter Club home page Giter Club logo

anaglyphgenerator's Introduction

Anaglyph Video Processing in THREE.JS

index.html contains all the code for each task in PW1.

License

Description

Implementation of various anaglyph and image processing techniques unto a video.

Can be accessed here: https://septianrazi.github.io/AnaglyphVideoProcessingInThreeJS/

Image Processing Techniques

We included the following techniques for our code

  • Anaglyphs
  • Gaussian Blur
  • Laplacian Filter
  • Median Denoising Filter
  • Seperable Gaussian Blur

Most of the code to accomplish this was done using fragment shader in the index.html file provided.

How did we process the pixels near the edge?

Our implementation of all the convolutional image processing techniques required us to consider edge cases, not only on the video border but also on the anaglyph border. Our method essentially alters the way we normalise the convolution. On edges where there may be less pixels to consider compared to the middle, we divide the resulting convolution by a fair amount. This results in a more realistic edge.

Installation

To run the project, simply run the file using a live server implementation. Extensions to do this are available in VSCode.

Usage

The videos sources are stereo videos, meaning that the output of our code shows the merging of both the right and left side of the video to create 3D anaglyphs.

The image processing techniques applied onto the video contain different parameters, and can be stacked on top of each other.

Things to Note

  • Due to the large file size of the videos, it may need time to load the website initially
  • Some of the techniques such as median filters is performance intensive. We recommend keeping kernel sizes on the smaller size to avoid any performance hiccups.

License

This project is licensed under the MIT License.

anaglyphgenerator's People

Contributors

septianrazi avatar

Watchers

 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.