+
-
-
+
+
-
-
-
-
-
-
{{ dimensions }}
-
{{ size }}
-
-
+
+
+
+
+
+
+
{{ dimensions }}
+
{{ size }}
+
+
- `
- },
- onOpen() {
- setTimeout(() => Canvas.withoutGizmos(() => {
- let minX = Infinity
- let maxX = -Infinity
- let minY = Infinity
- let maxY = -Infinity
- const direction = Preview.selected.controls.target.clone().sub(Preview.selected.camera.position).normalize()
- Canvas.scene.traverseVisible(cube => {
- if (cube.type === "cube") {
- for (let i = 0; i < 72; i += 3) {
- const vertex = new THREE.Vector3(...cube.geometry.attributes.position.array.slice(i, i + 3))
- if (direction.dot(vertex.clone().sub(Preview.selected.camera.position).normalize()) <= 0) continue
- const vec = vertex.applyMatrix4(cube.matrixWorld).project(Preview.selected.camera)
- const x = (vec.x + 1) / 2
- const y = (-vec.y + 1) / 2
- minX = Math.min(minX, x)
- maxX = Math.max(maxX, x)
- minY = Math.min(minY, y)
- maxY = Math.max(maxY, y)
- }
+
+ `
+ },
+ onOpen() {
+ setTimeout(() => Canvas.withoutGizmos(() => {
+ let minX = Infinity
+ let maxX = -Infinity
+ let minY = Infinity
+ let maxY = -Infinity
+ const direction = Preview.selected.controls.target.clone().sub(Preview.selected.camera.position).normalize()
+ Canvas.scene.traverseVisible(cube => {
+ if (cube.type === "cube") {
+ for (let i = 0; i < 72; i += 3) {
+ const vertex = new THREE.Vector3(...cube.geometry.attributes.position.array.slice(i, i + 3))
+ if (direction.dot(vertex.clone().sub(Preview.selected.camera.position).normalize()) <= 0) continue
+ const vec = vertex.applyMatrix4(cube.matrixWorld).project(Preview.selected.camera)
+ const x = (vec.x + 1) / 2
+ const y = (-vec.y + 1) / 2
+ minX = Math.min(minX, x)
+ maxX = Math.max(maxX, x)
+ minY = Math.min(minY, y)
+ maxY = Math.max(maxY, y)
}
- })
- if (minX === Infinity) {
- dialog.close()
- Blockbench.showQuickMessage("Nothing in frame")
- args.rendering = false
- return
- }
- minX = Math.max(minX, 0)
- maxX = Math.min(maxX, 1)
- minY = Math.max(minY, 0)
- maxY = Math.min(maxY, 1)
- if (minX === maxX || minY === maxY) {
- dialog.close()
- Blockbench.showQuickMessage("Nothing in frame")
- args.rendering = false
- return
- }
- const aspect = (maxX - minX) / ((maxY - minY) * Preview.selected.height / Preview.selected.width)
- let outWidth, outHeight
- const resolution = args.antialias ? Math.min(args.resolution * 2, 4096) : args.resolution
- if (aspect > 1) {
- outWidth = resolution
- outHeight = resolution / aspect
- } else {
- outWidth = resolution * aspect
- outHeight = resolution
}
- preview.resize(outWidth, outHeight)
- preview.controls.target.copy(Preview.selected.controls.target)
- preview.camera.position.copy(Preview.selected.camera.position)
- const fullWidth = outWidth / (maxX - minX)
- const fullHeight = outHeight / (maxY - minY)
- preview.camera.setViewOffset(fullWidth, fullHeight, minX * fullWidth, minY * fullHeight, outWidth, outHeight)
- preview.render()
- const img = new CanvasFrame(preview.canvas)
- img.autoCrop()
- const imageData = img.ctx.getImageData(0, 0, img.width, img.height)
- const data = imageData.data
- const length = data.length
- const width = img.width
- const height = img.height
- const width1 = width - 1
- const height1 = height - 1
- for (let i = length - 4; i >= 0; i -= 4) {
- const x = i / 4 % img.width
- const y = Math.floor(i / (4 * height))
- if (data[i + 3] === 0) {
- if (
- (x === 0 || data[i - 1] !== 0) &&
- (x === width1 || data[i + 7] !== 0) &&
- (y === 0 || data[i - width * 4 + 3] !== 0) &&
- (y === height1 || data[i + width * 4 + 3] !== 0)
- ) {
- let count = 0
- let sr, sg, sb, sa
- sr = sg = sb = sa = 0
- if (x !== 0) {
- count++
- sr += data[i - 4]
- sg += data[i - 3]
- sb += data[i - 2]
- sa += data[i - 1]
- }
- if (x !== width1) {
- count++
- sr += data[i + 4]
- sg += data[i + 5]
- sb += data[i + 6]
- sa += data[i + 7]
- }
- if (y !== 0) {
- count++
- sr += data[i - width * 4]
- sg += data[i - width * 4 + 1]
- sb += data[i - width * 4 + 2]
- sa += data[i - width * 4 + 3]
- }
- if (y !== height1) {
- count++
- sr += data[i + width * 4]
- sg += data[i + width * 4 + 1]
- sb += data[i + width * 4 + 2]
- sa += data[i + width * 4 + 3]
- }
- data[i] = sr / count
- data[i + 1] = sg / count
- data[i + 2] = sb / count
- data[i + 3] = sa / count
- } else {
- const store = []
- const queue = [i]
- while (store.length < 6 && queue.length !== 0) {
- const j = queue.shift()
- store.push(j)
- const x = j / 4 % img.width
- if (x !== 0 && data[j - 1] === 0 && !store.includes(j - 4)) queue.push(j - 4)
- if (x !== width1 && data[j + 7] === 0 && !store.includes(j + 4)) queue.push(j + 4)
- if (Math.floor(j / (4 * height)) !== 0 && data[j - width * 4 + 3] === 0 && !store.includes(j - width * 4)) queue.push(j - width * 4)
- }
- if (store.length >= 6) continue
- for (const j of store) {
- const x = j / 4 % img.width
- const y = Math.floor(j / (4 * height))
- let count = 0
- let sr, sg, sb, sa
- sr = sg = sb = sa = 0
- if (x !== 0 && data[j - 1] !== 0) {
- count++
- sr += data[j - 4]
- sg += data[j - 3]
- sb += data[j - 2]
- sa += data[j - 1]
- }
- if (x !== width1 && data[j + 7] !== 0) {
- count++
- sr += data[j + 4]
- sg += data[j + 5]
- sb += data[j + 6]
- sa += data[j + 7]
- }
- if (y !== 0 && data[j - width * 4 + 3] !== 0) {
- count++
- sr += data[j - width * 4]
- sg += data[j - width * 4 + 1]
- sb += data[j - width * 4 + 2]
- sa += data[j - width * 4 + 3]
- }
- if (y !== height1 && data[j + width * 4 + 3] !== 0) {
- count++
- sr += data[j + width * 4]
- sg += data[j + width * 4 + 1]
- sb += data[j + width * 4 + 2]
- sa += data[j + width * 4 + 3]
- }
- data[j] = sr / count
- data[j + 1] = sg / count
- data[j + 2] = sb / count
- data[j + 3] = sa / count
- }
- }
- } else if (
- (x === 0 || data[i - 1] === 0) &&
- (x === width1 || data[i + 7] === 0) &&
- (y === 0 || data[i - width * 4 + 3] === 0) &&
- (y === height1 || data[i + width * 4 + 3] === 0)
+ })
+ if (minX === Infinity) {
+ dialog.close()
+ Blockbench.showQuickMessage("Nothing in frame")
+ args.rendering = false
+ return
+ }
+ minX = Math.max(minX, 0)
+ maxX = Math.min(maxX, 1)
+ minY = Math.max(minY, 0)
+ maxY = Math.min(maxY, 1)
+ if (minX === maxX || minY === maxY) {
+ dialog.close()
+ Blockbench.showQuickMessage("Nothing in frame")
+ args.rendering = false
+ return
+ }
+ const aspect = (maxX - minX) / ((maxY - minY) * Preview.selected.height / Preview.selected.width)
+ let outWidth, outHeight
+ const resolution = args.antialias ? Math.min(args.resolution * 2, 4096) : args.resolution
+ if (aspect > 1) {
+ outWidth = resolution
+ outHeight = resolution / aspect
+ } else {
+ outWidth = resolution * aspect
+ outHeight = resolution
+ }
+ preview.resize(outWidth, outHeight)
+ preview.controls.target.copy(Preview.selected.controls.target)
+ preview.camera.position.copy(Preview.selected.camera.position)
+ const fullWidth = outWidth / (maxX - minX)
+ const fullHeight = outHeight / (maxY - minY)
+ preview.camera.setViewOffset(fullWidth, fullHeight, minX * fullWidth, minY * fullHeight, outWidth, outHeight)
+ preview.render()
+ const img = new CanvasFrame(preview.canvas)
+ img.autoCrop()
+ const imageData = img.ctx.getImageData(0, 0, img.width, img.height)
+ const data = imageData.data
+ const length = data.length
+ const width = img.width
+ const height = img.height
+ const width1 = width - 1
+ const height1 = height - 1
+ for (let i = length - 4; i >= 0; i -= 4) {
+ const x = i / 4 % img.width
+ const y = Math.floor(i / (4 * height))
+ if (data[i + 3] === 0) {
+ if (
+ (x === 0 || data[i - 1] !== 0) &&
+ (x === width1 || data[i + 7] !== 0) &&
+ (y === 0 || data[i - width * 4 + 3] !== 0) &&
+ (y === height1 || data[i + width * 4 + 3] !== 0)
) {
- data[i + 3] = 0
+ let count = 0
+ let sr, sg, sb, sa
+ sr = sg = sb = sa = 0
+ if (x !== 0) {
+ count++
+ sr += data[i - 4]
+ sg += data[i - 3]
+ sb += data[i - 2]
+ sa += data[i - 1]
+ }
+ if (x !== width1) {
+ count++
+ sr += data[i + 4]
+ sg += data[i + 5]
+ sb += data[i + 6]
+ sa += data[i + 7]
+ }
+ if (y !== 0) {
+ count++
+ sr += data[i - width * 4]
+ sg += data[i - width * 4 + 1]
+ sb += data[i - width * 4 + 2]
+ sa += data[i - width * 4 + 3]
+ }
+ if (y !== height1) {
+ count++
+ sr += data[i + width * 4]
+ sg += data[i + width * 4 + 1]
+ sb += data[i + width * 4 + 2]
+ sa += data[i + width * 4 + 3]
+ }
+ data[i] = sr / count
+ data[i + 1] = sg / count
+ data[i + 2] = sb / count
+ data[i + 3] = sa / count
} else {
const store = []
const queue = [i]
@@ -980,119 +960,181 @@
const j = queue.shift()
store.push(j)
const x = j / 4 % img.width
- if (x !== 0 && data[j - 1] !== 0 && !store.includes(j - 4)) queue.push(j - 4)
- if (x !== width1 && data[j + 7] !== 0 && !store.includes(j + 4)) queue.push(j + 4)
- if (Math.floor(j / (4 * height)) !== 0 && data[j - width * 4 + 3] !== 0 && !store.includes(j - width * 4)) queue.push(j - width * 4)
+ if (x !== 0 && data[j - 1] === 0 && !store.includes(j - 4)) queue.push(j - 4)
+ if (x !== width1 && data[j + 7] === 0 && !store.includes(j + 4)) queue.push(j + 4)
+ if (Math.floor(j / (4 * height)) !== 0 && data[j - width * 4 + 3] === 0 && !store.includes(j - width * 4)) queue.push(j - width * 4)
}
if (store.length >= 6) continue
for (const j of store) {
- data[j + 3] = 0
+ const x = j / 4 % img.width
+ const y = Math.floor(j / (4 * height))
+ let count = 0
+ let sr, sg, sb, sa
+ sr = sg = sb = sa = 0
+ if (x !== 0 && data[j - 1] !== 0) {
+ count++
+ sr += data[j - 4]
+ sg += data[j - 3]
+ sb += data[j - 2]
+ sa += data[j - 1]
+ }
+ if (x !== width1 && data[j + 7] !== 0) {
+ count++
+ sr += data[j + 4]
+ sg += data[j + 5]
+ sb += data[j + 6]
+ sa += data[j + 7]
+ }
+ if (y !== 0 && data[j - width * 4 + 3] !== 0) {
+ count++
+ sr += data[j - width * 4]
+ sg += data[j - width * 4 + 1]
+ sb += data[j - width * 4 + 2]
+ sa += data[j - width * 4 + 3]
+ }
+ if (y !== height1 && data[j + width * 4 + 3] !== 0) {
+ count++
+ sr += data[j + width * 4]
+ sg += data[j + width * 4 + 1]
+ sb += data[j + width * 4 + 2]
+ sa += data[j + width * 4 + 3]
+ }
+ data[j] = sr / count
+ data[j + 1] = sg / count
+ data[j + 2] = sb / count
+ data[j + 3] = sa / count
}
- }
- }
- img.ctx.putImageData(imageData, 0, 0)
- img.autoCrop()
- let out
- if (args.antialias) {
- const canvas = new CanvasFrame(img.width, img.height)
- canvas.ctx.filter = "blur(0.75px)"
- canvas.ctx.drawImage(img.canvas, 0, 0)
- out = new CanvasFrame(Math.floor(img.width / 2), Math.floor(img.height / 2))
- out.ctx.drawImage(canvas.canvas, 0, 0, out.width, out.height)
+ }
+ } else if (
+ (x === 0 || data[i - 1] === 0) &&
+ (x === width1 || data[i + 7] === 0) &&
+ (y === 0 || data[i - width * 4 + 3] === 0) &&
+ (y === height1 || data[i + width * 4 + 3] === 0)
+ ) {
+ data[i + 3] = 0
} else {
- out = img
+ const store = []
+ const queue = [i]
+ while (store.length < 6 && queue.length !== 0) {
+ const j = queue.shift()
+ store.push(j)
+ const x = j / 4 % img.width
+ if (x !== 0 && data[j - 1] !== 0 && !store.includes(j - 4)) queue.push(j - 4)
+ if (x !== width1 && data[j + 7] !== 0 && !store.includes(j + 4)) queue.push(j + 4)
+ if (Math.floor(j / (4 * height)) !== 0 && data[j - width * 4 + 3] !== 0 && !store.includes(j - width * 4)) queue.push(j - width * 4)
+ }
+ if (store.length >= 6) continue
+ for (const j of store) {
+ data[j + 3] = 0
+ }
}
- args.rendering = false
- this.content_vue.rendering = false
- this.content_vue.image = out.canvas
- const size = out.canvas.toDataURL().slice(22).length * 0.75
- this.content_vue.dimensions = `${out.canvas.width} x ${out.canvas.height}`
- this.content_vue.size = `${size > 1048576 ? `${Math.roundTo(size / 1048576, 2)} MB` : `${Math.round(size / 1024)} KB`}`
- dialog.object.style.width = `${Math.max(450, out.canvas.width)}px`
- dialog.object.querySelector(".dialog_title").textContent = "Minecraft Title Render"
- dialog.object.style.left = `${Math.clamp((window.innerWidth - dialog.object.clientWidth) / 2, 0, 2000)}px`
- dialog.object.addEventListener("keydown", e => {
- if (e.key === "Enter") return e.stopPropagation()
- })
- setTimeout(() => {
- this.content_vue.canvas = dialog.object.querySelector("#minecraft-title-output")
- this.content_vue.canvas.width = this.content_vue.image.width
- this.content_vue.canvas.height = this.content_vue.image.height
- this.content_vue.ctx = this.content_vue.canvas.getContext("2d")
- this.content_vue.ctx.drawImage(this.content_vue.image, 0, 0)
- }, 0)
- }), 10)
- }
- })
- dialog.show()
- },
- position: loadRenderAngle,
- custom() {
- new Dialog({
- id: "custom_resolution",
- title: "Custom Resolution",
- form: {
- resolution: {
- label: "Resolution",
- type: "number",
- value: this.resolution,
- min: 1,
- max: 4096
- },
- info: {
- type: "info",
- text: "The resolution determines the width or height of the render, depending on which one is larger. The chosen resolution may not exactly match the render size"
- },
- info2: {
- type: "info",
- text: "If antialiasing is enabled, the render size is capped at 2048 pixels"
}
- },
- onConfirm: result => this.resolution = this.antialias ? Math.min(result.resolution, 2048) : result.resolution
- }).show()
- }
- },
- data: {
- resolution: 1024,
- antialias: true,
- rendering: false
+ img.ctx.putImageData(imageData, 0, 0)
+ img.autoCrop()
+ let out
+ if (args.antialias) {
+ const canvas = new CanvasFrame(img.width, img.height)
+ canvas.ctx.filter = "blur(0.75px)"
+ canvas.ctx.drawImage(img.canvas, 0, 0)
+ out = new CanvasFrame(Math.floor(img.width / 2), Math.floor(img.height / 2))
+ out.ctx.drawImage(canvas.canvas, 0, 0, out.width, out.height)
+ } else {
+ out = img
+ }
+ args.rendering = false
+ this.content_vue.rendering = false
+ this.content_vue.image = out.canvas
+ const size = out.canvas.toDataURL().slice(22).length * 0.75
+ this.content_vue.dimensions = `${out.canvas.width} x ${out.canvas.height}`
+ this.content_vue.size = `${size > 1048576 ? `${Math.roundTo(size / 1048576, 2)} MB` : `${Math.round(size / 1024)} KB`}`
+ dialog.object.style.width = `${Math.max(450, out.canvas.width)}px`
+ dialog.object.querySelector(".dialog_title").textContent = "Minecraft Title Render"
+ dialog.object.style.left = `${Math.clamp((window.innerWidth - dialog.object.clientWidth) / 2, 0, 2000)}px`
+ dialog.object.addEventListener("keydown", e => {
+ if (e.key === "Enter") return e.stopPropagation()
+ })
+ setTimeout(() => {
+ this.content_vue.canvas = dialog.object.querySelector("#minecraft-title-output")
+ this.content_vue.canvas.width = this.content_vue.image.width
+ this.content_vue.canvas.height = this.content_vue.image.height
+ this.content_vue.ctx = this.content_vue.canvas.getContext("2d")
+ this.content_vue.ctx.drawImage(this.content_vue.image, 0, 0)
+ }, 0)
+ }), 10)
+ }
+ })
+ dialog.show()
},
- template: `
-