WIP
This commit is contained in:
parent
19d17afdb8
commit
e9d1d3c322
|
@ -20,8 +20,11 @@ const parseColor: (color: string) => any = require('parse-color');
|
||||||
|
|
||||||
const SVG_NS: string = "http://www.w3.org/2000/svg";
|
const SVG_NS: string = "http://www.w3.org/2000/svg";
|
||||||
|
|
||||||
const TILE_SIZE: number = 32.0;
|
const TILE_SIZE: Size2D = {width: 32.0, height: 32.0};
|
||||||
const STENCIL_FRAMEBUFFER_SIZE: number = TILE_SIZE * 256;
|
const STENCIL_FRAMEBUFFER_SIZE: Size2D = {
|
||||||
|
width: TILE_SIZE.width * 256,
|
||||||
|
height: TILE_SIZE.height * 256,
|
||||||
|
};
|
||||||
|
|
||||||
const QUAD_VERTEX_POSITIONS: Uint8Array = new Uint8Array([
|
const QUAD_VERTEX_POSITIONS: Uint8Array = new Uint8Array([
|
||||||
0, 0,
|
0, 0,
|
||||||
|
@ -152,8 +155,8 @@ class App {
|
||||||
gl.texImage2D(gl.TEXTURE_2D,
|
gl.texImage2D(gl.TEXTURE_2D,
|
||||||
0,
|
0,
|
||||||
gl.R16F,
|
gl.R16F,
|
||||||
STENCIL_FRAMEBUFFER_SIZE,
|
STENCIL_FRAMEBUFFER_SIZE.width,
|
||||||
STENCIL_FRAMEBUFFER_SIZE,
|
STENCIL_FRAMEBUFFER_SIZE.height,
|
||||||
0,
|
0,
|
||||||
gl.RED,
|
gl.RED,
|
||||||
gl.HALF_FLOAT,
|
gl.HALF_FLOAT,
|
||||||
|
@ -277,16 +280,16 @@ class App {
|
||||||
|
|
||||||
// Stencil.
|
// Stencil.
|
||||||
gl.bindFramebuffer(gl.FRAMEBUFFER, this.stencilFramebuffer);
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.stencilFramebuffer);
|
||||||
gl.viewport(0, 0, STENCIL_FRAMEBUFFER_SIZE, STENCIL_FRAMEBUFFER_SIZE);
|
gl.viewport(0, 0, STENCIL_FRAMEBUFFER_SIZE.width, STENCIL_FRAMEBUFFER_SIZE.height);
|
||||||
gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
gl.clearColor(0.0, 0.0, 0.0, 0.0);
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
gl.bindVertexArray(this.stencilVertexArray);
|
gl.bindVertexArray(this.stencilVertexArray);
|
||||||
gl.useProgram(this.stencilProgram.program);
|
gl.useProgram(this.stencilProgram.program);
|
||||||
gl.uniform2f(this.stencilProgram.uniforms.FramebufferSize,
|
gl.uniform2f(this.stencilProgram.uniforms.FramebufferSize,
|
||||||
STENCIL_FRAMEBUFFER_SIZE,
|
STENCIL_FRAMEBUFFER_SIZE.width,
|
||||||
STENCIL_FRAMEBUFFER_SIZE);
|
STENCIL_FRAMEBUFFER_SIZE.height);
|
||||||
gl.uniform2f(this.stencilProgram.uniforms.TileSize, TILE_SIZE, TILE_SIZE);
|
gl.uniform2f(this.stencilProgram.uniforms.TileSize, TILE_SIZE.width, TILE_SIZE.height);
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.areaLUTTexture);
|
gl.bindTexture(gl.TEXTURE_2D, this.areaLUTTexture);
|
||||||
gl.uniform1i(this.stencilProgram.uniforms.AreaLUT, 0);
|
gl.uniform1i(this.stencilProgram.uniforms.AreaLUT, 0);
|
||||||
|
@ -337,13 +340,13 @@ class App {
|
||||||
gl.uniform2f(this.coverProgram.uniforms.FramebufferSize,
|
gl.uniform2f(this.coverProgram.uniforms.FramebufferSize,
|
||||||
framebufferSize.width,
|
framebufferSize.width,
|
||||||
framebufferSize.height);
|
framebufferSize.height);
|
||||||
gl.uniform2f(this.coverProgram.uniforms.TileSize, TILE_SIZE, TILE_SIZE);
|
gl.uniform2f(this.coverProgram.uniforms.TileSize, TILE_SIZE.width, TILE_SIZE.height);
|
||||||
gl.activeTexture(gl.TEXTURE0);
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
gl.bindTexture(gl.TEXTURE_2D, this.stencilTexture);
|
gl.bindTexture(gl.TEXTURE_2D, this.stencilTexture);
|
||||||
gl.uniform1i(this.coverProgram.uniforms.StencilTexture, 0);
|
gl.uniform1i(this.coverProgram.uniforms.StencilTexture, 0);
|
||||||
gl.uniform2f(this.coverProgram.uniforms.StencilTextureSize,
|
gl.uniform2f(this.coverProgram.uniforms.StencilTextureSize,
|
||||||
STENCIL_FRAMEBUFFER_SIZE,
|
STENCIL_FRAMEBUFFER_SIZE.width,
|
||||||
STENCIL_FRAMEBUFFER_SIZE);
|
STENCIL_FRAMEBUFFER_SIZE.height);
|
||||||
gl.blendEquation(gl.FUNC_ADD);
|
gl.blendEquation(gl.FUNC_ADD);
|
||||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
||||||
gl.enable(gl.BLEND);
|
gl.enable(gl.BLEND);
|
||||||
|
@ -507,19 +510,16 @@ class Scene {
|
||||||
boundingRect.size.width,
|
boundingRect.size.width,
|
||||||
boundingRect.size.height);*/
|
boundingRect.size.height);*/
|
||||||
|
|
||||||
let y = boundingRect.origin.y - boundingRect.origin.y % TILE_SIZE;
|
let y = boundingRect.origin.y - boundingRect.origin.y % TILE_SIZE.height;
|
||||||
while (true) {
|
while (true) {
|
||||||
let x = boundingRect.origin.x - boundingRect.origin.x % TILE_SIZE;
|
let x = boundingRect.origin.x - boundingRect.origin.x % TILE_SIZE.width;
|
||||||
while (true) {
|
while (true) {
|
||||||
const tileBounds = {
|
const tileBounds = {origin: new Point2D(x, y), size: TILE_SIZE};
|
||||||
origin: new Point2D(x, y),
|
|
||||||
size: {width: TILE_SIZE, height: TILE_SIZE},
|
|
||||||
};
|
|
||||||
const tilePath = this.clipPathToRect(path, tileBounds);
|
const tilePath = this.clipPathToRect(path, tileBounds);
|
||||||
|
|
||||||
if (tilePath.toString().length > 0) {
|
if (tilePath.toString().length > 0) {
|
||||||
tilePath.translate(-tileBounds.origin.x, -tileBounds.origin.y);
|
tilePath.translate(-tileBounds.origin.x, -tileBounds.origin.y);
|
||||||
if (!pathIsSquare(tilePath, TILE_SIZE)) {
|
if (!pathIsRect(tilePath, TILE_SIZE)) {
|
||||||
/*
|
/*
|
||||||
let segmentCount = 0;
|
let segmentCount = 0;
|
||||||
tilePath.iterate(() => { segmentCount++; return; });
|
tilePath.iterate(() => { segmentCount++; return; });
|
||||||
|
@ -533,12 +533,12 @@ class Scene {
|
||||||
|
|
||||||
if (x >= boundingRect.origin.x + boundingRect.size.width)
|
if (x >= boundingRect.origin.x + boundingRect.size.width)
|
||||||
break;
|
break;
|
||||||
x += TILE_SIZE;
|
x += TILE_SIZE.width;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (y >= boundingRect.origin.y + boundingRect.size.height)
|
if (y >= boundingRect.origin.y + boundingRect.size.height)
|
||||||
break;
|
break;
|
||||||
y += TILE_SIZE;
|
y += TILE_SIZE.height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -617,10 +617,11 @@ class Scene {
|
||||||
return;
|
return;
|
||||||
to = pathStart;
|
to = pathStart;
|
||||||
break;
|
break;
|
||||||
case 'Q':
|
/*case 'Q':
|
||||||
ctrl = new Point2D(parseFloat(segment[segment.length - 4]),
|
ctrl = new Point2D(parseFloat(segment[segment.length - 4]),
|
||||||
parseFloat(segment[segment.length - 3]));
|
parseFloat(segment[segment.length - 3]));
|
||||||
// fallthrough
|
// fallthrough
|
||||||
|
*/
|
||||||
default:
|
default:
|
||||||
to = new Point2D(parseFloat(segment[segment.length - 2]),
|
to = new Point2D(parseFloat(segment[segment.length - 2]),
|
||||||
parseFloat(segment[segment.length - 1]));
|
parseFloat(segment[segment.length - 1]));
|
||||||
|
@ -858,15 +859,15 @@ function approxEq(a: number, b: number): boolean {
|
||||||
return Math.abs(a - b) <= EPSILON;
|
return Math.abs(a - b) <= EPSILON;
|
||||||
}
|
}
|
||||||
|
|
||||||
function pathIsSquare(path: SVGPath, squareLength: number): boolean {
|
function pathIsRect(path: SVGPath, rectSize: Size2D): boolean {
|
||||||
let result = true;
|
let result = true;
|
||||||
path.iterate((segment, index) => {
|
path.iterate((segment, index) => {
|
||||||
if (segment.length < 3)
|
if (segment.length < 3)
|
||||||
return;
|
return;
|
||||||
const point = new Point2D(parseFloat(segment[1]), parseFloat(segment[2]));
|
const point = new Point2D(parseFloat(segment[1]), parseFloat(segment[2]));
|
||||||
result = result &&
|
result = result &&
|
||||||
(approxEq(point.x, 0.0) || approxEq(point.x, squareLength)) &&
|
(approxEq(point.x, 0.0) || approxEq(point.x, rectSize.width)) &&
|
||||||
(approxEq(point.y, 0.0) || approxEq(point.y, squareLength));
|
(approxEq(point.y, 0.0) || approxEq(point.y, rectSize.height));
|
||||||
});
|
});
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,14 +40,14 @@ void main() {
|
||||||
bool zeroArea = abs(from.x - to.x) < 0.01;
|
bool zeroArea = abs(from.x - to.x) < 0.01;
|
||||||
if (aTessCoord.x < 0.5) {
|
if (aTessCoord.x < 0.5) {
|
||||||
position.x = min(min(from.x, to.x), ctrl.x);
|
position.x = min(min(from.x, to.x), ctrl.x);
|
||||||
dilation.x = zeroArea ? 0.0 : -1.0;
|
dilation.x = zeroArea ? 0.0 : -0.5;
|
||||||
} else {
|
} else {
|
||||||
position.x = max(max(from.x, to.x), ctrl.x);
|
position.x = max(max(from.x, to.x), ctrl.x);
|
||||||
dilation.x = zeroArea ? 0.0 : 1.0;
|
dilation.x = zeroArea ? 0.0 : 0.5;
|
||||||
}
|
}
|
||||||
if (aTessCoord.y < 0.5) {
|
if (aTessCoord.y < 0.5) {
|
||||||
position.y = min(min(from.y, to.y), ctrl.y);
|
position.y = min(min(from.y, to.y), ctrl.y);
|
||||||
dilation.y = zeroArea ? 0.0 : -1.0;
|
dilation.y = zeroArea ? 0.0 : -0.5;
|
||||||
} else {
|
} else {
|
||||||
position.y = uTileSize.y;
|
position.y = uTileSize.y;
|
||||||
dilation.y = 0.0;
|
dilation.y = 0.0;
|
||||||
|
|
Loading…
Reference in New Issue