vue-flat-surface-shader

A Vue component for flat surface shader

DEMO: Github Pages

How to use

npm install --save vue-flat-surface-shader

Main.js

import Vue from 'vue'
import FlatSurfaceShader from 'vue-flat-surface-shader'

Vue.use(FlatSurfaceShader)

App.vue file (simple example)

<template>
  <div id="app">
    <flat-surface-shader type="webgl" 
                         :light="{ambient: '#22bc9e', diffuse: '#2b7c6b'}"
                         width=2000
                         height=1000>
    </flat-surface-shader>
  </div>
</template>

App.vue file (advanced example)

<template>
  <div id="app">
    <flat-surface-shader class="shader"
                         type="canvas" 
                         :light="{ambient: '#22bc9e', diffuse: '#2b7c6b', draw: false}" 
                         :mesh="{segments: 4, slices: 4, width: 1.8, height: 1.8}">
    </flat-surface-shader>
  </div>
</template>
<style>
  html, body {
      margin: 0;
      padding: 0;
  }
  .shader {
      width: 100vw;
      height: 100vh;
  }
</style>

Props

1.Type

• The type of shader's renderer, avaliable values are webgl, canvas, svg.
• Prop type: String
• Default value: webgl

2. Light

A Light is composed of a 3D position Vector and 2 Color objects defining its ambient & diffuse emissions. These color channels interact with the Material of a Mesh to calculate the color of a Triangle.

For detailed explanation, see http://wagerfield.github.io/flat-surf… and https://github.com/wagerfield/flat-surface-shader

| Name | Type | Default | | ----------- | ------- | --------- | | count | Number | 2 | | xyScalar | Number | 1 | | zOffset | Number | 100 | | ambient | String | '#880066' | | diffuse | String | '#FF8800' | | speed | Number | 0.001 | | gravity | Number | 1200 | | dampening | Number | 0.95 | | minLimit | Number | 10 | | maxLimit | Number | null | | minDistance | Number | 20 | | maxDistance | Number | 400 | | autopilot | Boolean | false | | draw | Boolean | true |

3. Mesh

A Mesh is constructed from a Geometry object and a Material object. All the Triangles within the Geometry are rendered using the properties of the Material:

• Geometry is simply a collection of triangles – nothing more.
• A Material is composed of 2 Color objects which define the ambient & diffuse properties of a surface.
• A Triangle is constructed from 3 Vertices which each define the x, y and z coordinates of a corner.

For detailed explanation, see http://wagerfield.github.io/flat-surf… and https://github.com/wagerfield/flat-surface-shader

| Name | Type | Default | | -------- | ------ | --------- | | width | Number | 1.2 | | height | Number | 1.2 | | depth | Number | 10 | | segments | Number | 16 | | slices | Number | 8 | | xRange | Number | 0.8 | | yRange | Number | 0.1 | | zRange | Number | 1.0 | | ambient | String | '#555555' | | diffuse | String | '#FFFFFF' | | speed | Number | 0.002 |

Development Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

License

Licensed under MIT.