import {
ImageSampler,
AttributesBuffer,
Float2Attributes
} from '@awayjs/stage';
import { MappingMode, IMaterial, Style, TriangleElements } from '@awayjs/renderer';
import { Shape } from '../renderables/Shape';
import { GradientFillStyle } from './fills/GradientFillStyle';
import { BitmapFillStyle } from './fills/BitmapFillStyle';
import { SolidFillStyle } from './fills/SolidFillStyle';
import { GradientType } from './GradientType';
import { GraphicsFactoryHelper } from './GraphicsFactoryHelper';
import { GraphicsPath } from './GraphicsPath';
import { Graphics } from '../Graphics';
import { MaterialManager } from '../managers/MaterialManager';
import { Tess2Provider, TessAsyncService } from '../utils/TessAsyncService';
import { IResult } from './WorkerTesselatorBody';
import { IFillStyle } from './IGraphicsData';
import { TextureAtlas } from '../managers/TextureAtlas';
/**
* The Graphics class contains a set of methods that you can use to create a
* vector shape. Display objects that support drawing include Sprite and Shape
* objects. Each of these classes includes a graphics property
* that is a Graphics object. The following are among those helper functions
* provided for ease of use: drawRect(),
* drawRoundRect(), drawCircle(), and
* drawEllipse().
*
*
You cannot create a Graphics object directly from ActionScript code. If
* you call new Graphics(), an exception is thrown.
*
* The Graphics class is final; it cannot be subclassed.
*/
//@ts-ignore
const SHAPE_INFO = window.SHAPE_INFO = {
total_time: 0,
tess_time: 0,
multy_contours: 0,
single_contours: 0,
};
const FIXED_BASE = 1000;
export interface IStyleElements {
material: IMaterial,
style: Style
}
type tStyleMapper = (style: IFillStyle,data: IStyleElements) => IStyleElements;
export const UnpackFillStyle: Record = {
[GradientFillStyle.data_type] (style: GradientFillStyle,data: IStyleElements): IStyleElements {
const material = MaterialManager.getMaterialForGradient(style);
data.material = material;
data.style.image = TextureAtlas.getTextureForGradient(style);
data.style.uvMatrix = style.getUVMatrix();
if (style.type == GradientType.LINEAR) {
material.getTextureAt(0).mappingMode = MappingMode.LINEAR;
} else if (style.type == GradientType.RADIAL) {
const sampler = data.style.sampler = new ImageSampler();
sampler.imageRect = style.uvRectangle;
material.imageRect = true;
material.getTextureAt(0).mappingMode = MappingMode.RADIAL;
}
return data;
},
// handle solid, we store inside GraphicsFactoryFill
[SolidFillStyle.data_type] (style: SolidFillStyle, data: IStyleElements): IStyleElements {
const material = MaterialManager.getMaterialForColor(style);
data.material = material;
if (material.getNumTextures()) {
data.style.image = TextureAtlas.getTextureForColor(style);
data.style.uvMatrix = style.getUVMatrix();
} else {
data.style = null;
}
return data;
},
[BitmapFillStyle.data_type] (style: BitmapFillStyle, data: IStyleElements): IStyleElements {
data.material = MaterialManager.getMaterialForBitmap(true);
data.style.sampler = new ImageSampler(style.repeat, style.smooth, style.smooth);
data.style.image = style.image;
data.style.uvMatrix = style.getUVMatrix();
return data;
}
};
export class GraphicsFactoryFills {
public static get Tess2Wasm() {
return TessAsyncService.instance.module;
}
public static prepareWasm() {
if (TessAsyncService.instance.status === 'done') {
return;
}
TessAsyncService.instance.init();
}
public static TESS_SCALE = 20;
public static USE_TESS_FIX = true;
public static EPS = 1.0 / FIXED_BASE;
public static toFixed(val: number) {
return (val * FIXED_BASE | 0) / FIXED_BASE;
}
public static nearest(x0: number, y0: number, x1: number, y1: number) {
let dx = (x0 - x1);
(dx < 0) && (dx = -dx);
let dy = (y0 - y1);
(dy < 0) && (dy = -dy);
return (dx + dy) < this.EPS;
}
public static draw_pathes(targetGraphics: Graphics, clear: boolean = false) {
//return;
const pathes = targetGraphics.queued_fill_pathes;
const len = pathes.length;
let shape: Shape;
for (let cp = 0; cp < len; cp++) {
const path = pathes[cp];
const pathStyle = path.style;
// there are a bug with shapes
shape = targetGraphics.popEmptyFillShape();
let elements = shape ? shape.elements : null;
const target = elements ? elements.concatenatedBuffer : null;
const newBuffer = this.pathToAttributesBuffer(path, false, target);
if (!newBuffer || !newBuffer.length) {
continue;
}
if (!elements) {
elements = new TriangleElements();
elements.setPositions(new Float2Attributes(newBuffer));
} else {
elements.invalidate();
elements._numVertices = newBuffer.count;
}
elements.isDynamic = targetGraphics._clearCount > 0;
const data: IStyleElements = {
style: new Style(),
material: null
};
if (!(pathStyle.fillStyle.data_type in UnpackFillStyle)) {
console.error('Unknown style:', pathStyle.fillStyle.data_type);
}
UnpackFillStyle[pathStyle.fillStyle.data_type](pathStyle.fillStyle, data);
shape = shape || Shape.getShape(elements);
shape.style = data.style;
shape.material = data.material;
shape.originalFillStyle = pathStyle.fillStyle;
targetGraphics.addShapeInternal(shape);
}
targetGraphics.queued_fill_pathes.length = 0;
if (clear) {
targetGraphics._active_fill_path = null;
targetGraphics._lastFill = null;
} else if (shape) {
targetGraphics.queued_fill_pathes.push(targetGraphics._active_fill_path);
targetGraphics._lastFill = shape;
}
}
public static prepareContours(
graphicsPath: GraphicsPath,
applyFix: boolean = false,
qualityScale: number = 1,
): number[][] {
graphicsPath.prepare(qualityScale);
const contours: number[][] = graphicsPath._positions;
const finalContours: number[][] = [];
for (let k = 0; k < contours.length; k++) {
const contour = contours[k];
// same as map, but without allocation
const closed = this.nearest(
contour[0], contour[1],
contour[contour.length - 2], contour[contour.length - 1]);
// make sure start and end point of a contour are not the same
if (closed) {
contour.pop();
contour.pop();
}
// all contours should already be prepared by GraphicsPath.prepare()
// we only want to make sure that each contour contains at least 3 pairs of x/y positions
// otherwise there is no way they can form a shape
if (contour.length >= 6) {
if (applyFix) {
// tess2 fix
// there are problems with small shapes
// encrease a size
const fixed = new Array(contour.length);
for (let i = 0, l = contour.length; i < l; i++) {
fixed[i] = this.toFixed(contour[i] * this.TESS_SCALE);
}
finalContours.push(fixed);
} else {
finalContours.push(contour);
}
}
}
return finalContours;
}
public static runTesselator(graphicsPath: GraphicsPath, qualityScale: number = 1): IResult {
const finalContours = this.prepareContours(graphicsPath, this.USE_TESS_FIX, qualityScale);
if (finalContours.length > 0) {
SHAPE_INFO.multy_contours += 1;
} else {
SHAPE_INFO.single_contours += 1;
}
if (finalContours.length === 0) {
return null;
}
return Tess2Provider.tesselate({ contours: finalContours,
windingRule: 0, //Tess2.WINDING_ODD,
elementType: 0, //Tess2.POLYGONS,
polySize: 3,
vertexSize: 2
});
}
public static fillBuffer(result: IResult, finalVerts: Float32Array): Float32Array {
const numElems = result.elements.length;
const scale = this.USE_TESS_FIX ? (1 / this.TESS_SCALE) : 1;
let vindex = 0;
let p1x = 0;
let p1y = 0;
let p2x = 0;
let p2y = 0;
let p3x = 0;
let p3y = 0;
for (let i = 0; i < numElems; i += 3) {
p1x = scale * result.vertices[result.elements[i + 0] * 2 + 0];
p1y = scale * result.vertices[result.elements[i + 0] * 2 + 1];
p2x = scale * result.vertices[result.elements[i + 1] * 2 + 0];
p2y = scale * result.vertices[result.elements[i + 1] * 2 + 1];
p3x = scale * result.vertices[result.elements[i + 2] * 2 + 0];
p3y = scale * result.vertices[result.elements[i + 2] * 2 + 1];
if (GraphicsFactoryHelper.isClockWiseXY(p1x, p1y, p2x, p2y, p3x, p3y)) {
finalVerts[vindex++] = p3x;
finalVerts[vindex++] = p3y;
finalVerts[vindex++] = p2x;
finalVerts[vindex++] = p2y;
finalVerts[vindex++] = p1x;
finalVerts[vindex++] = p1y;
} else {
finalVerts[vindex++] = p1x;
finalVerts[vindex++] = p1y;
finalVerts[vindex++] = p2x;
finalVerts[vindex++] = p2y;
finalVerts[vindex++] = p3x;
finalVerts[vindex++] = p3y;
}
}
return finalVerts;
}
public static pathToAttributesBuffer(
graphicsPath: GraphicsPath,
closePath: boolean = true,
target: AttributesBuffer = null,
qualityScale: number = 1,
): AttributesBuffer {
const start = performance.now();
let resultVertexSize = graphicsPath.verts
? graphicsPath.verts.length
: 0;
let tesselatedVertexSize = 0;
const res: IResult = this.runTesselator(graphicsPath, qualityScale);
if (res && res.elements.length > 0) {
tesselatedVertexSize = res.elements.length * 2;
resultVertexSize += res.elements.length * 2;
}
const vertexSize = 2;
if (!target) {
target = new AttributesBuffer(
Float32Array.BYTES_PER_ELEMENT * vertexSize, (resultVertexSize / vertexSize) | 0);
}
// resize is safe, it not rebuild buffer when count is same.
// count - count of 2 dimension vertex, divide on 2
target.count = (resultVertexSize / vertexSize) | 0;
// fill direct to Float32Array
const finalVerts = new Float32Array(target.buffer);
if (res) {
this.fillBuffer(res, finalVerts);
Tess2Provider.dispose();
}
// merge poly vertex
const vs = graphicsPath.verts.length;
for (let i = 0; i < vs; i++) {
finalVerts [tesselatedVertexSize + i] = graphicsPath.verts[i];
}
SHAPE_INFO.total_time += performance.now() - start;
return target;
}
}