4c8bc5d806
* draw pen skin lines and stamps to a framebuffer * skip reading pixels and draw stamp to framebuffer * update silhouette with readPixels * draw pen canvas to buffer when its dirty Composite lines and stamps on browser preferred side (cpu/gpu) until the export texture is needed. Then blend the canvas with the current buffer contents. Updating this way invalidates useProgram optimization and the renderer currently does not have a way to know this. * draw lines on framebuffer through fragment shader * optimize draw regions and pen skin matrix creation * control draw regions * mobile gpus need high precision floats for line drawing * optimize cpu pen line math * sampled pen line caps * sampleless pen skin lines, lint, document pen skin buffer ops * add PenSkin._canvasDirty to constructor * remove DRAW_MODE_line * comment PenSkin reused memory, use memory in drawRectangle * turn draw region id's into optional method handlers A region ID object may have an enter and exit method on it that are used by default when entering and exiting that region. * remove old DRAW_MODE_line precision setting * standardize vert lines on 4 spaces * fixup! turn draw region id's into optional method handlers * do not draw when updating pen skin silhouette * do not premultiply stamp colors by alpha * fixup! do not draw when updating pen skin silhouette * do not premultiply line color * add a small rim around the line for aliasing * variable pen line alias amount * reverse offset pen line on y axis by relative alias amount Reverse the offset to keep small line overlap to a minimum. * fixup! reverse offset pen line on y axis by relative alias amount * medium precision gpu floats
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('myDebug');
// Instantiate the renderer
var renderer = new require('scratch-render')(canvas);
// Connect to debug canvas
renderer.setDebugCanvas(debug);
// 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!