Flat Surface Shader for rendering illuminated triangles

Overview

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.

You might also like...
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

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

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

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

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

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

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

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

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.

🎡 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

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

🔥 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

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

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

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

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

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

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

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

Comments
  • Demo is down

    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

    opened by jmclocklin 1
  • Not allowed to navigate top frame to data URL

    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

    opened by GuerrillaCoder 1
  • Alpha Transparency?

    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;

    opened by dk0r 1
  • Multiple animations in one page.

    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!

    opened by tahaerden 1
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

Michał Sajnóg 1.6k Dec 8, 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 This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Kevin Faveri 203 Dec 12, 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 This component is meant to be a developer friendly, easy integrable and performatic emoji picker (with some batteries) using the Tw

Kevin Faveri 203 Dec 12, 2022
🎡 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

cinwell.li 878 Dec 15, 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

grzhan 126 Nov 24, 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

grzhan 126 Nov 24, 2022
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

Arthur Vasconcelos 6 Feb 3, 2022
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

null 96 Jan 4, 2023
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

Mladen Draganović 2 May 18, 2022
🟨 A Playful 3D Surface Plotter

Try It Out Contort is a 3D surface plotter (or 3D graphing calculator, if you prefer) that attempts to abstract math expressions into a colorful chain

Mike K. 3 Oct 2, 2022