# shared_matting_webgl

**Repository Path**: render3d/shared_matting_webgl

## Basic Information

- **Project Name**: shared_matting_webgl
- **Description**: Implement Shared Sampling for Real-Time Alpha Matting using webgl shader language(glsl)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-16
- **Last Updated**: 2024-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Shared Matting WebGL implementation
Implement Shared Sampling for Real-Time Alpha Matting using webgl shader language(glsl). [Paper](http://inf.ufrgs.br/%7Eeslgastal/SharedMatting/)

## Setups && Run
***Note: all JS are written in ES6 standard***
1. A modern browser
2. turn on webgl. for new version chrome, it is automatically enabled.
3. A webgl wrapper dependency [`Igloo`](https://github.com/kingfolk/igloojs/blob/master/igloo.js). Do
```
npm install igloo-ext --save
```
or equaivalent to install this dependency.
4. Copy code into your project along with all the shaders and `shared.js`

```js
let canvas = document.getElementById(YourCanvasID);
let runner = new SharedGL(canvas);
runner.setImage(ImageURL);
runner.setTrimap(TrimapURL);

// getScale is in the utils.js file
// image is the input image for matting
// scale is used to draw a centered result on canvas
let scale = utils.getScale(canvas.width, canvas.height, image.naturalWidth, image.naturalHeight);

// will draw the result to canvas
runner.run(scale);
```

## Demo

go http://kingfolk.github.io, find project "Shared Matting WebGL" and click demo.