mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-07-04 02:41:01 -04:00
69 lines
3 KiB
HTML
69 lines
3 KiB
HTML
<body>
|
|
<script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
|
|
<script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
|
|
<script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
|
|
<script src="../helper/page-util.js"></script>
|
|
<!-- note: this uses the BUILT version of scratch-render! make sure to npm run build -->
|
|
<script src="../../dist/web/scratch-render.js"></script>
|
|
|
|
<canvas id="test" width="480" height="360"></canvas>
|
|
<canvas id="cpu" width="480" height="360"></canvas>
|
|
<br/>
|
|
<canvas id="merge" width="480" height="360"></canvas>
|
|
<input type="file" id="file" name="file">
|
|
|
|
<script>
|
|
// These variables are going to be available in the "window global" intentionally.
|
|
// Allows you easy access to debug with `vm.greenFlag()` etc.
|
|
window.devicePixelRatio = 1;
|
|
const gpuCanvas = document.getElementById('test');
|
|
var render = new ScratchRender(gpuCanvas);
|
|
var vm = initVM(render);
|
|
|
|
const fileInput = document.getElementById('file');
|
|
const loadFile = loadFileInputIntoVM.bind(null, fileInput, vm, render);
|
|
fileInput.addEventListener('change', e => {
|
|
loadFile()
|
|
.then(() => {
|
|
vm.greenFlag();
|
|
setTimeout(() => {
|
|
renderCpu();
|
|
}, 1000);
|
|
});
|
|
});
|
|
|
|
const cpuCanvas = document.getElementById('cpu');
|
|
const cpuCtx = cpuCanvas.getContext('2d');
|
|
const cpuImageData = cpuCtx.getImageData(0, 0, cpuCanvas.width, cpuCanvas.height);
|
|
function renderCpu() {
|
|
cpuImageData.data.fill(255);
|
|
const drawBits = render._drawList.map(id => {
|
|
const drawable = render._allDrawables[id];
|
|
if (!(drawable._visible && drawable.skin)) {
|
|
return;
|
|
}
|
|
drawable.updateCPURenderAttributes();
|
|
return { id, drawable };
|
|
}).reverse().filter(Boolean);
|
|
const color = new Uint8ClampedArray(3);
|
|
for (let x = -239; x <= 240; x++) {
|
|
for (let y = -180; y< 180; y++) {
|
|
render.constructor.sampleColor3b([x, y], drawBits, color);
|
|
const offset = (((179-y) * 480) + 239 + x) * 4
|
|
cpuImageData.data.set(color, offset);
|
|
}
|
|
}
|
|
cpuCtx.putImageData(cpuImageData, 0, 0);
|
|
|
|
const merge = document.getElementById('merge');
|
|
const ctx = merge.getContext('2d');
|
|
ctx.drawImage(gpuCanvas, 0, 0);
|
|
const gpuImageData = ctx.getImageData(0, 0, 480, 360);
|
|
for (let x=0; x<gpuImageData.data.length; x++) {
|
|
gpuImageData.data[x] = 255 - Math.abs(gpuImageData.data[x] - cpuImageData.data[x]);
|
|
}
|
|
|
|
ctx.putImageData(gpuImageData, 0, 0);
|
|
}
|
|
</script>
|
|
</body>
|