I have a dynamic texture like this
/**
* Creates a dynamic texture for the alignment plane with grid and border lines.
* @param width - The width of the plane.
* @param height - The height of the plane.
* @param storeScene - The Babylon.js scene object.
* @param lineSpacing - The spacing between grid lines (default: 20).
* @param lineWidth - The width of grid lines (default: 1).
* @param borderUnitWidth - The width of the border lines (default: 2.5).
* @param borderDashSize - The dash size for the border (default: 15).
* @param borderGapSize - The gap size for the border (default: 15).
* @param backgroundColor - The background color of the texture (default: '#ffffff').
* @returns The created DynamicTexture instance.
*/
private static createPlaneTexture(
width: number,
height: number,
storeScene: Scene,
lineSpacing = 20,
lineWidth = 1,
borderUnitWidth = 2.5,
borderDashSize = 15,
borderGapSize = 15,
backgroundColor = "#ffffff"
) {
const textureWidth = Math.ceil(width * AlignVisualManager.TEXTURE_SCALE_FACTOR);
const textureHeight = Math.ceil(height * AlignVisualManager.TEXTURE_SCALE_FACTOR);
const dynamicTexture = new DynamicTexture(
"alignVisualizerPlaneTexture",
{ width: textureWidth, height: textureHeight },
storeScene,
true
);
const ctx = dynamicTexture.getContext();
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, textureWidth, textureHeight);
ctx.strokeStyle = AlignVisualManager.HIGHLIGHT_COLOR;
ctx.lineWidth = lineWidth;
for (let x = -textureHeight; x < textureWidth + textureHeight; x += lineSpacing) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x - textureHeight, textureHeight);
ctx.stroke();
}
ctx.strokeStyle = AlignVisualManager.HIGHLIGHT_COLOR;
ctx.setLineDash([borderDashSize, borderGapSize]);
ctx.lineWidth = borderUnitWidth;
// Top & Bottom Borders
ctx.beginPath();
ctx.moveTo(0, borderUnitWidth / 2);
ctx.lineTo(textureWidth, borderUnitWidth / 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, textureHeight - borderUnitWidth / 2);
ctx.lineTo(textureWidth, textureHeight - borderUnitWidth / 2);
ctx.stroke();
// Left & Right Borders
ctx.beginPath();
ctx.moveTo(borderUnitWidth / 2, 0);
ctx.lineTo(borderUnitWidth / 2, textureHeight);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(textureWidth - borderUnitWidth / 2, 0);
ctx.lineTo(textureWidth - borderUnitWidth / 2, textureHeight);
ctx.stroke();
ctx.setLineDash([]);
dynamicTexture.update();
return dynamicTexture;
}
You can see the result in the attached screenshot
But the problem is that I need to tile it, but i have no idea how to tile it and also make the borders work???
I tried to tile the slanted lines pattern like this:
private static createTiledSlantTexture(
storeScene: Scene,
tileSize = 10,
lineSpacing = 20,
lineWidth = 1,
backgroundColor = "#ffffff"
): DynamicTexture {
const texture = new DynamicTexture(
"slantTileTexture",
{ width: tileSize, height: tileSize },
storeScene,
false
);
const ctx = texture.getContext();
// Background
ctx.fillStyle = backgroundColor;
ctx.fillRect(0, 0, tileSize, tileSize);
// Diagonal slant lines
ctx.strokeStyle = AlignVisualManager.HIGHLIGHT_COLOR;
ctx.lineWidth = lineWidth;
for (let x = -tileSize; x < tileSize * 2; x += lineSpacing) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x - tileSize, tileSize);
ctx.stroke();
}
texture.update();
return texture;
}
But it looks horrible
Also how can i now get the border lines on the plane? Can we have a another texture which is transparent in the middle and has border lines? idk how it would work..