Vue Flat Surface Shader

Vue Flat Surface Shader


A Vue component for flat surface shader

license badge npm badge

DEMO: Github Pages

demo screenshot

How to use

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


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


App.vue file (simple example)

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

App.vue file (advanced example)

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



  • 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… and

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… and

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.


Licensed under MIT.

Github Repository

Tags: #VueJs