jwagner / normalmap.js

normalmap.js is a library for creating simple interactive lighting effects using normal maps.

⚠️ THIS IS EXPERIMENTAL SOFTWARE ⚠️

API | Example | Installation | Changelog | License (MIT) | Questions?

normalmap.js is a library for creating simple interactive lighting effects.

• Built on top of WebGL
• Simple to use
• Small (~7kb gzipped)
• Fast enough to run on modern smartphones
• There is a tiny jQuery plugin for simple usage
• Covered by automated end-to-end tests

Demos

Did you find a cool use for normalmap.js? Let me know!

Example

var lights = normalmap({
    canvas: canvas,
    normalMap: normalMap,
    baseColor: [0.5, 0.4, 0.5]
});

lights.clear();

var position = normalMap.vec3(0.5, 0.5, 1.0); // dead center
var color = normalMap.vec3(1.0, 1.0, 1.0); // bright white
lights.addPointLight(position, color);

Installation

With NPM:

$ npm install normalmap

var normalmap = require('normalmap');

With Bower: $ bower install normalmap

Or just download the latest zip file form the releases page.

Note that normalmap.js won't work with file:// urls. You will need to serve images from a webserver. See Richard Daveys phaser introduction for an explanations for this.

Browser Support

Normalmap.js should work in all browsers that supports WebGL.

API Documentation

doc/API.md

Changelog

doc/CHANGELOG.md

Creating normal maps

NormalMap-Online

Questions?

Create a github issue or tweet to @29a_ch and please be a bit patient. :)

License

Copyright © 2016 Jonas Wagner.

The source code of this project licensed under the MIT License (enclosed).

The images and textures used for demonstration purposes are not licensed under the MIT License and belong to their respective owners.

normalmap.js's Issues

Code style problem

1. var is deprecated, use const/let

2. Next construction is wrong:

if (canvas == null) // TypeError if canvas was not set!!!!!

if (typeof canvas === 'undefined') // The correct method!

3. Use classes

class Normalmap {
    constructor (options) {
        this.options = Object.assign({
            metalness: 1,
            roughness: 1,
            ambient: 1,
            baseColor: new Float32Array([0.5, 0.5, 0.5])
        }, options)

        if (typeof options.canvas === 'undefined') {
            throw new Error('normalmap() canvas is required')
        }

        if (typeof options.normalMap === 'undefined') {
            throw new Error('normalmap() normalMap is required')
        }

        this.canvas = options.canvas
        this.defines = new Defines(options)
    }
}

class Defines {
    constructor (options, defines = {}) {
        Object.assign(this, defines)

        this.USE_BASE_COLOR_MAP = +options.baseColorMap
        this.USE_MATERIAL_MAP = +options.materialMap
        this.USE_AMBIENT_MAP = +options.ambientMap
        this.USE_SSS = +options.subSurfaceScattering
        this.USE_FXAA = +options.antiAliasing || undefined
        this.USE_SINGLE_PASS = +options.singlePass || undefined
    }
}

4. Choose yourself:

'canvas repeat singlePass'.split() // ['canvas repeat singlePass']
'canvas repeat singlePass'.split(' ') // ['canvas', 'repeat', 'singlePass']

To be continued...

Update .npmignore

how can i use it? with example images for each step

Hi.
how are you.
Your project is wonderful and interesting.
But I do not know how to use it.
Can you explain how it is used with images that explain each step, for the current version (https: ///29a.ch/2016/03/08/normalmap-javascript-lighting-effects) and the old version (https://29a.ch/2010) / 3/24 / normal-mapping-with-javascript-and-canvas-tag)
I want to use it with html

Example has typo

Thanks for making this. It's such an awesome feature. We're trying to set up the example right now and noticed that the name normalMap is not what is defined by default. I installed the dependency with Bower and included it in my HTML like this:

<script type="text/javascript" src="/assets/vendor/js/normalmap.js"></script>

Trying the example code with the name normalMap throws an error because normalMap is undefined. I noticed that normalmap is defined, though that's inconsistent with the option key normalMap. Can you provide more accurate examples?