shaded-image
Apply a shader stack to a static image
Last updated 3 months ago by benjamin_alan_rowe .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install shaded-image 
SYNC missed versions from official npm registry.

shaded-image

Apply a stack of post-processing style shaders to a static image

NPM JavaScript Style Guide

Install

npm install --save shaded-image

Usage

Inbuilt Components

You can use one of the inbuilt effect components

import React from "react";
import {GrayscaleImage} from "shaded-image";

import test from "./download.jpeg";

export default function Example() {
  return (
      <GrayscaleImage
        image={test}
      />
  );
}

Custom Effects

You can create your own custom effects by defining a glsl fragment and vertex shader. Uniform and Varying values can be set using initFunction and updateFunction

vertex.glsl

attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

varying highp vec2 vTextureCoord;

void main(void) {
	gl_Position =  vec4(aVertexPosition, 1.0);
	vTextureCoord = aTextureCoord;
}

fragmentGrayscale.glsl

varying highp vec2 vTextureCoord;

uniform sampler2D uSampler;

void main(void) {
	lowp vec4 tex = texture2D(uSampler, vTextureCoord);
	lowp float col = (0.2126 * tex.r + 0.7152 * tex.g + 0.0722*tex.b);
	gl_FragColor = vec4(col, col, col, tex.a);
}

GrayscaleImage.js

import React from "react";

import {ShadedImage} from "shaded-image";
/* eslint import/no-webpack-loader-syntax: off */
import * as fragmentShader from "!raw-loader!glslify-loader!./shaders/fragmentGrayscale.glsl";

/* eslint import/no-webpack-loader-syntax: off */
import * as vertexShader from "!raw-loader!glslify-loader!./shaders/vertex.glsl";

export default function GrayscaleImage({ style, className, image }) {
  /* A list of shaders will be applied in order using a framebuffer */
  const shaders = [
    {
      vertexShader: vertexShader.default,
      fragmentShader: fragmentShader.default,
      initFunction: (args) => {},
      updateFunction: (args) => {},
    }
  ];
  return (
    <div className="App">
      <ShadedImage
        style={style}
        className={className}
        shaders={shaders}
        image={image}
      />
    </div>
  );
}

License

MIT © benjaminARowe

Current Tags

  • 1.0.11                                ...           latest (3 months ago)

12 Versions

  • 1.0.11                                ...           3 months ago
  • 1.0.10                                ...           3 months ago
  • 1.0.9                                ...           3 months ago
  • 1.0.8                                ...           3 months ago
  • 1.0.7                                ...           3 months ago
  • 1.0.6                                ...           3 months ago
  • 1.0.5                                ...           3 months ago
  • 1.0.4                                ...           3 months ago
  • 1.0.3                                ...           3 months ago
  • 1.0.2                                ...           3 months ago
  • 1.0.1                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 4
Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |