78c0d09c72
Scratch uses y=up, whereas WebGL and the Canvas element both use y=down. To make this work, we set a non-conventional projection matrix when rendering to the stage. Some of the internal renders (touching color, stamp, etc.) were using a y-flipped projection matrix, though, which means that the output was double-flipped and would appear incorrect. For the touching-color block this just meant a cosmetic issue: the debug canvas looks upside-down. For pen stamp, though, it's a real issue since the stamp was appearing upside down on the stage. This change ensures that the projection matrix for every internal render follows WebGL / Canvas conventions, and that we only y-flip on the final render to the stage.
scratch-render
WebGL-based rendering engine for Scratch 3.0
Installation
npm install https://github.com/LLK/scratch-render.git
Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scratch WebGL rendering demo</title>
</head>
<body>
<canvas id="myStage"></canvas>
<canvas id="myDebug"></canvas>
</body>
</html>
var canvas = document.getElementById('myStage');
var debug = document.getElementById('myDebugElement');
// Instantiate the renderer
var renderer = new require('scratch-render')(canvas);
// Connect to debug canvas
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
// Start drawing
function drawStep() {
renderer.draw();
requestAnimationFrame(drawStep);
}
drawStep();
// Connect to worker (see "playground" example)
var worker = new Worker('worker.js');
renderer.connectWorker(worker);
Standalone Build
npm run build
<script src="/path/to/render.js"></script>
<script>
var renderer = new window.RenderWebGLLocal();
// do things
</script>
Testing
npm test
Donate
We provide Scratch free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!