mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-08-06 19:38:58 -04:00
WebGL-based rendering engine for Scratch 3.0
6c4715f793
The whirl effect's direction was reversed in Scratch 2.0 with the introduction of Stage3D. This "bug" has existed for long enough to become the expected whirl direction. This change adjusts the Scratch 3.0 whirl direction to match the Scratch 2.0 3D whirl direction instead of the Scratch 2.0 2D whirl direction. |
||
|---|---|---|
| playground | ||
| src | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc | ||
| .gitattributes | ||
| .gitignore | ||
| .npmignore | ||
| .travis.yml | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| TRADEMARK | ||
| webpack.config.js | ||
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!