Flat Surface Shader for rendering illuminated triangles

Last update: Aug 10, 2022

Flat Surface Shader [FSS]

Simple, lightweight Flat Surface Shader written in JavaScript for rendering lit Triangles to a number of contexts. Currently there is support for WebGL, Canvas 2D and SVG. Check out this demo to see it in action.

Understanding Lighting

Simply put, FSS uses the Lambertian Reflectance model to calculate the color of a Triangle based on an array of Light sources within a Scene.

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.

Triangle

A Triangle is constructed from 3 Vertices which each define the x, y and z coordinates of a corner. Based on these 3 Vertices, a forth 3D Vector is automatically derived at the center of the Triangle – this is known as its Centroid. Alongside the Centroid, a fifth unit Vector is automatically calculated which defines the surface Normal. The Normal describes the direction that the Triangle is facing.

Geometry

Geometry is simply a collection of triangles – nothing more.

Material

A Material is composed of 2 Color objects which define the ambient & diffuse properties of a surface.

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.

Scene

A Scene sits at the very top of the stack. It simply manages arrays of Mesh & Light objects.

Renderer

The Renderer takes all the information in a Scene and renders it to a context. Currently FSS supports WebGL, Canvas 2D and SVG.

Calculation

For every Triangle in a Scene the following calculation is performed:

  1. A Vector between the Triangle's Centroid and the Light's Position is calculated and normalised. This can be considered as a single Ray travelling from the Light to the center of the Triangle.
  2. The angle beween this Ray and the Normal of the Triangle is then calculated using the dot product. This angle is simply a number ranging from -1 to 1. When the Ray and the Normal are coincident, this value is 0, and when they are perpendicular to one another, this value is 1. This value goes into the negative range when the Light is behind the Triangle.
  3. Firstly, the diffuse color of the Light is multiplied by the diffuse color of the Material associated with the Triangle. This color is then multiplied by the coincidence angle described above. For example, if the diffuse color of the Light is #FFFFFF { R:1, G:1, B:1 } and the diffuse color of the Material is #FF0000 { R:1, G:0, B:0 }, the combined color would be #FF0000 { R:1*1=1, G:1*0=0, B:1*0=0 }. If the coincidence angle was 0.5, the final color of the Triangle would be #800000 { R:1*0.5=0.5, G:0*0.5=0, B:0*0.5=0 }.
  4. In much the same way as above, the ambient color of the Light is multipled by the ambient color of the Material. Since ambient light is a uniform dissipation of scattered light, it is not modified any further.
  5. The final color of the Triangle is simply calculated by adding the diffuse & ambient colors together. Simples.

Example

NOTE: All objects exist within the FSS namespace.

// 1) Create a Renderer for the context you would like to render to.
//    You can use either the WebGLRenderer, CanvasRenderer or SVGRenderer.
var renderer = new FSS.CanvasRenderer();

// 2) Add the Renderer's element to the DOM:
var container = document.getElementById('container');
container.appendChild(renderer.element);

// 3) Create a Scene:
var scene = new FSS.Scene();

// 4) Create some Geometry & a Material, pass them to a Mesh constructor, and add the Mesh to the Scene:
var geometry = new FSS.Plane(200, 100, 4, 2);
var material = new FSS.Material('#444444', '#FFFFFF');
var mesh = new FSS.Mesh(geometry, material);
scene.add(mesh);

// 5) Create and add a Light to the Scene:
var light = new FSS.Light('#FF0000', '#0000FF');
scene.add(light);

// 6) Finally, render the Scene:
renderer.render(scene);

Building

Install Dependancies:

npm install [email protected]

Build:

node build.js

Inspiration

Please also checkout the case study on Behance created by my dear friend Tobias van Schneider@schneidertobias.

Acknowledgments

The architecture of this project was heavily influenced by three.js and the implementation of the Vector calculations was taken from glMatrix.

Author

Matthew Wagerfield: @mwagerfield

License

Licensed under MIT. Enjoy.

GitHub

https://github.com/wagerfield/flat-surface-shader
You might also like...

Vue component for rendering tables used in ENA projects

vue-table What's this Components to render a table using client or remote data Install npm install @myena/vue-table Dependencies Vue 2 Bootstrap 3 Fo

Aug 2, 2022

Vue Cookbook (Vue1.0 + express) @yjj5855Vue Cookbook (Vue1.0 + express) by @yjj5855: A demo first screen rendering of a service

使用node.js+Vue.js+webpack 用node当前端服务器和后台服务器通讯和渲染页面,使用vue,vue-server,vue-router来实现SPA应用. 解决了SPA应用的SEO缺点,访问的第一个页面,使用vue-server来服务端渲染.使用vue-router+webpack

Dec 8, 2021

Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering

Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering

vue-zhihudaily-2.0 Zhihudaily demo built with Vue 2.0 + vue-router + vuex, with server-side rendering. 主要参考 vue-hackernews-2.0 . Live Demo Features Se

Jul 28, 2020

Component for rendering a tree view of JSON.

Component for rendering a tree view of JSON.

Vue JSON Component Demo A collapsable tree view for JSON. This package has some similarites with vue-json-tree-view so I'll address the differences be

Apr 28, 2022

Composable components for rendering fake (progressive) content like facebook in vue

Composable components for rendering fake (progressive) content like facebook in vue

vue-content-placeholders Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate. 💿 Installation via n

Aug 9, 2022

Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Jul 21, 2022

Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Aug 10, 2022

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON

form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.

Aug 16, 2022

🎡 A component for rendering Vue components with live editor and preview.

🎡 A component for rendering Vue components with live editor and preview.

Vuep (vue playground) 🎡 A component for rendering Vue components with live editor and preview. Links Docs: https://cinwell.com/vuep/ An online playgo

Aug 3, 2022

Vue component for efficiently rendering large collection data

Vue component for efficiently rendering large collection data

vue-virtual-collection Vue component for efficiently rendering large collection data. Inspired by react-virtualize. Demo Table of Contents generated w

Aug 12, 2022

🔥 A Vue-based server-side rendering framework

🔥 A Vue-based server-side rendering framework

vapper Documentation Developed and maintained by Front-end team of water drop Setup Project git clone https://github.com/vapperjs/vapper.git cd vapper

Apr 15, 2021

Server-side rendering engine that renders vue files into html strings

Servue Helping you serve vue with servue Server-side rendering engine that renders vue files into html strings Servue Installation What is servue? Fea

Jul 27, 2022

Vue directive for conditional rendering element on screen smaller than breakpoints

Vue directive for conditional rendering element on screen smaller than breakpoints

vue-not-visible Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints; 📺 Demo Install $ npm install --save v

Feb 16, 2021

Vue.js components rendering 3D WebGL graphics reactively with three.js

Vue.js components rendering 3D WebGL graphics reactively with three.js

VueGL Vue.js components rendering 3D WebGL graphics reactively with three.js. Usage !-- Load scripts -- script src="https://unpkg.com/vue"/script

Aug 11, 2022

Resolve dependencies for your routes before rendering the component

Vue-resolve A VueJS (2.x) / Vue-router plugin that resolves dependencies for routes before entering. What is this? A plugin that reads a meta.resolve

Jan 9, 2022

Vue rendering engine for Express.js. Use .Vue files as templates using streams

Vue rendering engine for Express.js. Use .Vue files as templates using streams

express-vue A Simple way of using Server Side rendered Vue.js 2.0+ natively in Express using streams If you want to use vue.js and setup a large scale

Aug 10, 2022

Vue + Express.js = VueXpress / A server side rendering engine for Express.js. Use .vue files as your express.js templates.

Vue + Express.js = VueXpress / A server side rendering engine for Express.js. Use .vue files as your express.js templates.

Introduction VueXpress is a template engine for express.js. You can easily rendering *.vue templates on the server. Check out the usage information. I

Feb 20, 2022

Vue.js Server Side Rendering Boilerplate without Polluting Vuex

Vue.js Server Side Rendering Boilerplate without Polluting Vuex

Vue SSR Boilerplate Vue.js Server Side Rendering Boilerplate without Polluting Vuex Features: Doesn't dependent on Vuex. Putting every thing into Vuex

Jul 21, 2022

dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites

dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites

Rendora Rendora is a dynamic renderer to provide zero-configuration server-side rendering mainly to web crawlers in order to effortlessly improve SEO

Aug 17, 2022
Comments
  • 1. Demo is down

    Hi Matthew -- not sure of the best way to reach you, but the demo page for flat surface shader is down. Perhaps it is a problem with matthew.wagerfield.com?

    -Jacob

    Reviewed by jmclocklin at 2014-04-28 15:39
  • 2. Not allowed to navigate top frame to data URL

    The export on your site doesn't work in chrome. Console gives error Not allowed to navigate top frame to data URL

    I found this SO that says support has been removed: https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-url

    Reviewed by GuerrillaCoder at 2017-08-12 00:30
  • 3. Alpha Transparency?

    Thanks for maintaining this repo --looks great**!**

    Any ideas how to implement transparency for the triangles (globally or specifically)? The README doesn't seem to mention anything relevant and the source, while making using of rgba() appears to ignore the alpha (transparency) values.

    I tried modifying the following lines (see http://codepen.io/wouwi/pen/Apvaq) without success:

    Line-382: original: this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 1; modded: this.opacity = FSS.Utils.isNumber(opacity) ? opacity : 0.5;

    Line-405 original: this.hex = '#' + r + g + b; modded: this.hex = '#00' + r + g + b;

    Reviewed by dk0r at 2016-02-20 14:45
  • 4. Multiple animations in one page.

    Greetings and great work you got there!

    I want to use this animation on section headers with a title on it and it looks great.

    But couldn't manage to have more than one animation divs per page. Is this possible and what's the most practical way for using it?

    Thanks!

    Reviewed by tahaerden at 2015-06-29 09:49
Composable components for rendering fake (progressive) content like facebook in vue
Composable components for rendering fake (progressive) content like facebook in vue

vue-content-placeholders Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate. ?? Installation via n

Aug 9, 2022
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Jul 21, 2022
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

Vue Twemoji Picker This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Aug 10, 2022
🎡 A component for rendering Vue components with live editor and preview.
🎡 A component for rendering Vue components with live editor and preview.

Vuep (vue playground) ?? A component for rendering Vue components with live editor and preview. Links Docs: https://cinwell.com/vuep/ An online playgo

Aug 3, 2022
A Vue component for flat surface shader

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 impor

Jul 19, 2022
A Vue component for flat surface shader

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 impor

Jul 19, 2022
Lightweight color shader/blender/converter plugin implemented for Vue 2.
Lightweight color shader/blender/converter plugin implemented for Vue 2.

Vue Color Blender/Shader/Converter Lightweight color shader/blender/converter plugin implemented for Vue 2. Disclaimer The algoritmn used in this plug

Feb 3, 2022
A fresh and flat UI-Kit specially for desktop application with Vue.js 2.0
A fresh and flat UI-Kit specially for desktop application with Vue.js 2.0

AT-UI Style AT-UI Style is an ui component library based on Flexbox, be used for AT-UI Install npm install at-ui-style Usage import 'at-ui-style' Cont

May 8, 2022
MemoRandom is a card game in which cards are laid face down on a surface and cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.
MemoRandom is a card game in which cards are laid face down on a surface and cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.

MemoRandom - Halloween 2021 DressCode.ing Challenge MemoRandom is a card game in which cards are laid face down on a surface and cards are flipped fac

May 18, 2022
mmf-blog-vue2 ssr(The service side rendering)

@[toc] 1. 首先你得有台服务器 2. 推荐安装 linux 系统 本文以 CentOS 7.2 为例 3. 更换 yum 为国内镜像 备份你的原镜像文件,以免出错后可以恢复。 # mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Ce

Aug 2, 2022