codePugHacKEr/pages235
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add playground page that I was using for testing various things (eg textures)

Browse source 
open: http://localhost:5173/texture-render.html
This commit is contained in:
Vitaly Turovsky 2023-10-20 01:58:42 +03:00
commit 3c05774680
3 changed files with 66 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

60
experiments/texture-render.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
//@ts-check
import blockImg from '../prismarine-viewer/public/textures/1.16.1.png'
import blocksStates from '../prismarine-viewer/public/blocksStates/1.16.1.json'
// const block = {
// name: 'oak_sign',
// variant: 0,
// elem: 1,
// face: 'up'
// }
const block = {
name: 'light_gray_stained_glass',
variant: 0,
elem: 0,
face: 'north'
}
//@ts-ignore
const model = Object.entries(blocksStates[block.name].variants).find((a, i) => typeof block.variant === 'number' ? i === block.variant : a === block.variant)[1].model.elements[block.elem]
console.log(model)
const textureUv = model.faces[block.face].texture
const canvas = document.createElement('canvas')
canvas.style.imageRendering = 'pixelated'
document.body.appendChild(canvas)
const factor = 50
const modelWidth = model.to[0] - model.from[0]
const modelHeight = model.to[1] - model.from[1]
canvas.width = modelWidth * factor
canvas.height = modelHeight * factor
// canvas.width = 16 * factor
// canvas.height = 16 * factor * 2
const ctx = canvas.getContext('2d')
//@ts-ignore
ctx.imageSmoothingEnabled = false
const img = new Image()
const img2 = new Image()
img.src = blockImg
img.onload = () => {
//@ts-ignore
ctx.drawImage(img, img.width * textureUv.u, img.height * textureUv.v, img.width * textureUv.su, img.height * textureUv.sv, 0, 0, canvas.width, canvas.height)
// ctx.drawImage(img, 0, 0, canvas.width, canvas.height / 2)
console.log('width;height texture', img.width * textureUv.su, img.height * textureUv.sv)
console.log('base su=sv', 16 / img.width)
}
</script>
</body>
</html>

5
experiments/vite.config.ts Normal file
View file

@ -0,0 +1,5 @@
import { defineConfig } from 'vite';
export default defineConfig({
root: 'experiments',
})

1
package.json
View file

@ -15,6 +15,7 @@
"lint": "eslint \"{src,cypress}/**/*.{ts,js,jsx,tsx}\"",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"start-experiments": "vite --config experiments/vite.config.ts",
"watch-worker": "node prismarine-viewer/buildWorker.mjs -w"
},
"keywords": [