Skip to content

Palette colors #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kig wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Palette colors #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
630c512
Unindexed vec4 text coordinates for easy merging and manipulation
kig Apr 29, 2016
5e6c9f6
Palette-colored faux-bold text with 4-tap antialiasing
kig Apr 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,9 @@ TextGeometry.prototype.update = function (opt) {
// get common vertex data
var positions = vertices.positions(glyphs)
var uvs = vertices.uvs(glyphs, texWidth, texHeight, flipY)
var indices = createIndices({
clockwise: true,
type: 'uint16',
count: glyphs.length
})

// update vertex data
buffer.index(this, indices, 1, 'uint16')
buffer.attr(this, 'position', positions, 2)

// update vertex data
buffer.attr(this, 'position', positions, 4)
buffer.attr(this, 'uv', uvs, 2)

// update multipage data
Expand Down
2 changes: 1 addition & 1 deletion lib/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var itemSize = 2
var itemSize = 4
var box = { min: [0, 0], max: [0, 0] }

function bounds (positions) {
Expand Down
28 changes: 26 additions & 2 deletions lib/vertices.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ module.exports.pages = function pages (glyphs) {
}

module.exports.uvs = function uvs (glyphs, texWidth, texHeight, flipY) {
var uvs = new Float32Array(glyphs.length * 4 * 2)
var uvs = new Float32Array(glyphs.length * 6 * 2)
var i = 0
glyphs.forEach(function (glyph) {
var bitmap = glyph.data
Expand All @@ -39,15 +39,21 @@ module.exports.uvs = function uvs (glyphs, texWidth, texHeight, flipY) {
// TR
uvs[i++] = u1
uvs[i++] = v0
// TR
uvs[i++] = u1
uvs[i++] = v0
// BR
uvs[i++] = u1
uvs[i++] = v1
// BL
uvs[i++] = u0
uvs[i++] = v1
})
return uvs
}

module.exports.positions = function positions (glyphs) {
var positions = new Float32Array(glyphs.length * 4 * 2)
var positions = new Float32Array(glyphs.length * 6 * 4)
var i = 0
glyphs.forEach(function (glyph) {
var bitmap = glyph.data
Expand All @@ -63,15 +69,33 @@ module.exports.positions = function positions (glyphs) {
// BL
positions[i++] = x
positions[i++] = y
positions[i++] = 0
positions[i++] = 0
// TL
positions[i++] = x
positions[i++] = y + h
positions[i++] = 0
positions[i++] = 0
// TR
positions[i++] = x + w
positions[i++] = y + h
positions[i++] = 0
positions[i++] = 0
// TR
positions[i++] = x + w
positions[i++] = y + h
positions[i++] = 0
positions[i++] = 0
// BR
positions[i++] = x + w
positions[i++] = y
positions[i++] = 0
positions[i++] = 0
// BL
positions[i++] = x
positions[i++] = y
positions[i++] = 0
positions[i++] = 0
})
return positions
}
63 changes: 55 additions & 8 deletions shaders/sdf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,53 +7,100 @@ module.exports = function createSDFShader (opt) {
var precision = opt.precision || 'highp'
var color = opt.color
var map = opt.map
var palette = opt.palette
var maxPaletteLength = Math.max(palette ? palette.length : 1, 8);

// remove to satisfy r73
delete opt.map
delete opt.color
delete opt.precision
delete opt.opacity
delete opt.palette

if (!palette) {
var tColor = new THREE.Color(color);
var colorVec = new THREE.Vector3(tColor.r, tColor.g, tColor.b);
palette = [colorVec];
}

var paletteElseIfs = [];
for (var i=1; i<maxPaletteLength; i++) {
paletteElseIfs.push(' else if (pIdx == '+i+'.0) pColor = palette['+i+'];');
}

return assign({
uniforms: {
opacity: { type: 'f', value: opacity },
map: { type: 't', value: map || new THREE.Texture() },
color: { type: 'c', value: new THREE.Color(color) }
palette: { type: 'v3v', value: palette }
},

vertexShader: [
'attribute vec2 uv;',
'attribute vec4 position;',
'uniform mat4 projectionMatrix;',
'uniform mat4 modelViewMatrix;',
'uniform vec3 palette['+maxPaletteLength+'];',
'varying vec2 vUv;',
'varying vec3 pColor;',
'varying float bold;',
'void main() {',
'vUv = uv;',
'gl_Position = projectionMatrix * modelViewMatrix * position;',
' float pIdx = floor(position.a);',
' bold = 0.0;',
' if (pIdx >= 256.0) {',
' bold = 1.0;',
' pIdx -= 256.0;',
' }',
' pIdx = mod(pIdx, '+maxPaletteLength+'.0);',
' if (pIdx == 0.0) pColor = palette[0];'
].concat(paletteElseIfs).concat([
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1);',
'}'
].join('\n'),
]).join('\n'),

fragmentShader: [
'#ifdef GL_OES_standard_derivatives',
'#extension GL_OES_standard_derivatives : enable',
'#endif',
'precision ' + precision + ' float;',
'uniform float opacity;',
'uniform vec3 color;',
'uniform sampler2D map;',
'varying vec3 pColor;',
'varying vec2 vUv;',
'varying float bold;',

'float aastep(float value) {',
' #ifdef GL_OES_standard_derivatives',
' float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757;',
' #else',
' float afwidth = (1.0 / 32.0) * (1.4142135623730951 / (2.0 * gl_FragCoord.w));',
' #endif',
' return smoothstep(0.5 - afwidth, 0.5 + afwidth, value);',
' return smoothstep(0.5 - afwidth, 0.5 + afwidth, value + bold * 0.125);',
'}',

'void main() {',
' vec4 texColor = texture2D(map, vUv);',
' float alpha = aastep(texColor.a);',
' gl_FragColor = vec4(color, opacity * alpha);',
' vec4 texColor = texture2D(map, vUv, -100.0);',
' float valpha = 0.25*aastep(texColor.a);',

' #ifdef GL_OES_standard_derivatives',

' texColor = texture2D(map, vUv+0.5*vec2(dFdx(vUv.x), dFdy(vUv.y)), -100.0);',
' valpha += 0.25*aastep(texColor.a);',
' texColor = texture2D(map, vUv+0.5*vec2(dFdx(vUv.x), 0.0), -100.0);',
' valpha += 0.25*aastep(texColor.a);',
' texColor = texture2D(map, vUv+0.5*vec2(0.0, dFdy(vUv.y)), -100.0);',
' valpha += 0.25*aastep(texColor.a);',

' float maxD = max(dFdx(vUv.x), dFdy(vUv.y));',
' valpha *= smoothstep(0.07, 0.01, maxD);', // Fade out small text (= when UV derivative gets big)

' #else',
' valpha *= 4.0;',
' #endif',


' gl_FragColor = vec4(pColor, opacity * valpha);',
alphaTest === 0
? ''
: ' if (gl_FragColor.a < ' + alphaTest + ') discard;',
Expand Down