Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ColorBlindCorrector

This post processor can correct colors and simulate color blindness. It is possible to use this on every game, but the game's performance will suffer measurably. It's better to use it as a helpful tool while developing your game. Remember, the best practice is to design with color blindness in mind.

Color correction algorithm originally sourced from http://www.daltonize.org/

Example:


var game = new ex.Engine();

var colorBlindPostProcessor = new ex.ColorBlindCorrector(game, false, ColorBlindness.Protanope);

// post processors evaluate left to right
game.postProcessors.push(colorBlindPostProcessor);
game.start();

Hierarchy

  • ColorBlindCorrector

Implements

Index

Constructors

constructor

  • Parameters

    • engine: Engine
    • Default value simulate: boolean = false
    • Default value colorMode: ColorBlindness = ColorBlindness.Protanope

    Returns ColorBlindCorrector

Properties

Private _fragmentShader

_fragmentShader: string = 'precision mediump float;' +// our texture'uniform sampler2D u_image;' +// the texCoords passed in from the vertex shader.'varying vec2 v_texCoord;' +// Color blind conversions/*'mat3 m[9] =' +'{' +'mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ),' + // normal'mat3(0.567, 0.433, 0.0, 0.558, 0.442, 0.0, 0.0, 0.242, 0.758),' + // protanopia'mat3(0.817, 0.183, 0.0, 0.333, 0.667, 0.0, 0.0, 0.125,0.875),' + // protanomaly'mat3(0.625, 0.375, 0.0, 0.7, 0.3, 0.0, 0.0, 0.3,0.7 ),' + // deuteranopia'mat3(0.8, 0.2, 0.0, 0.258, 0.742, 0.0, 0.0, 0.142,0.858),' + // deuteranomaly'mat3(0.95, 0.05, 0.0, 0.0, 0.433, 0.567, 0.0, 0.475,0.525),' + // tritanopia'mat3(0.967, 0.033, 0.0, 0.0, 0.733, 0.267, 0.0, 0.183,0.817),' + // tritanomaly'mat3(0.299, 0.587, 0.114, 0.299, 0.587, 0.114, 0.299, 0.587,0.114),' + // achromatopsia'mat3(0.618, 0.320, 0.062, 0.163, 0.775, 0.062, 0.163, 0.320,0.516)' + // achromatomaly'};' +*/'void main() {' +'vec4 o = texture2D(u_image, v_texCoord);' +// RGB to LMS matrix conversion'float L = (17.8824 * o.r) + (43.5161 * o.g) + (4.11935 * o.b);' +'float M = (3.45565 * o.r) + (27.1554 * o.g) + (3.86714 * o.b);' +'float S = (0.0299566 * o.r) + (0.184309 * o.g) + (1.46709 * o.b);' +// Simulate color blindness'//MODE CODE//' +/* Deuteranope for testing'float l = 1.0 * L + 0.0 * M + 0.0 * S;' +'float m = 0.494207 * L + 0.0 * M + 1.24827 * S;' +'float s = 0.0 * L + 0.0 * M + 1.0 * S;' +*/// LMS to RGB matrix conversion'vec4 error;' +'error.r = (0.0809444479 * l) + (-0.130504409 * m) + (0.116721066 * s);' +'error.g = (-0.0102485335 * l) + (0.0540193266 * m) + (-0.113614708 * s);' +'error.b = (-0.000365296938 * l) + (-0.00412161469 * m) + (0.693511405 * s);' +'error.a = 1.0;' +'vec4 diff = o - error;' +'vec4 correction;' +'correction.r = 0.0;' +'correction.g = (diff.r * 0.7) + (diff.g * 1.0);' +'correction.b = (diff.r * 0.7) + (diff.b * 1.0);' +'correction = o + correction;' +'correction.a = o.a;' +'//SIMULATE//' +'}'

Private _gl

_gl: WebGLRenderingContext

Private _internalCanvas

_internalCanvas: HTMLCanvasElement

Private _program

_program: WebGLProgram

Private _vertexShader

_vertexShader: string = 'attribute vec2 a_position;' +'attribute vec2 a_texCoord;' +'uniform vec2 u_resolution;' +'varying vec2 v_texCoord;' +'void main() {' +// convert the rectangle from pixels to 0.0 to 1.0'vec2 zeroToOne = a_position / u_resolution;' +// convert from 0->1 to 0->2'vec2 zeroToTwo = zeroToOne * 2.0;' +// convert from 0->2 to -1->+1 (clipspace)'vec2 clipSpace = zeroToTwo - 1.0;' +'gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);' +// pass the texCoord to the fragment shader// The GPU will interpolate this value between points.'v_texCoord = a_texCoord;' +'}'

colorMode

colorMode: ColorBlindness

engine

engine: Engine

simulate

simulate: boolean

Methods

Private _getFragmentShaderByMode

  • Parameters

    Returns string

Private _getShader

  • _getShader(type: string, program: string): WebGLShader
  • Parameters

    • type: string
    • program: string

    Returns WebGLShader

Private _setRectangle

  • _setRectangle(gl: any, x: any, y: any, width: any, height: any): void
  • Parameters

    • gl: any
    • x: any
    • y: any
    • width: any
    • height: any

    Returns void

process

  • process(image: ImageData, out: CanvasRenderingContext2D): void
  • Parameters

    • image: ImageData
    • out: CanvasRenderingContext2D

    Returns void