github/scratch-render
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add method to retrieve drawable pixel data

Browse Source 
Towards LLK/scratch-gui#66
This commit is contained in:
Ray Schamp
2017-02-17 14:51:04 -05:00
parent c146debde8
commit a65ea3daed
2 changed files with 81 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
playground/index.html
View File

@@ -8,8 +8,8 @@
</style>
</head>
<body style="background: lightsteelblue">
<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
<p>
<select id="fudgeproperty" onchange="onFudgePropertyChanged(this.value)">
<option value="posx">Position X</option>
@@ -124,12 +124,15 @@
var mousePos = getMousePos(event, canvas);
var pickID = renderer.pick(mousePos.x, mousePos.y);
console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
if (pickID >= 0) {
console.dir(renderer.extractDrawable(pickID, mousePos.x, mousePos.y));
}
};
function drawStep() {
renderer.draw();
//renderer.getBounds(drawableID2);
renderer.isTouchingColor(drawableID2, [255,255,255]);
// renderer.getBounds(drawableID2);
// renderer.isTouchingColor(drawableID2, [255,255,255]);
requestAnimationFrame(drawStep);
}
drawStep();

75
src/RenderWebGL.js
View File

@@ -655,6 +655,78 @@ class RenderWebGL extends EventEmitter {
return hit | 0;
}
/**
* @typedef DrawableExtraction
* @property {Uint8Array} data Raw pixel data for the drawable
* @property {int} width Drawable bounding box width
* @property {int} height Drawable bounding box height
* @property {int} x The x coordinate relative to drawable bounding box
* @property {int} y The y coordinate relative to drawable bounding box
*/
/**
* Return drawable pixel data and picking coordinates relative to the drawable bounds
* @param {int} drawableID The ID of the drawable to get pixel data for
* @param {int} x The client x coordinate of the picking location.
* @param {int} y The client y coordinate of the picking location.
* @return {?DrawableExtraction} Data about the picked drawable
*/
extractDrawable (drawableID, x, y) {
const drawable = this._allDrawables[drawableID];
if (!drawable) return;
const gl = this._gl;
twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
const bounds = this._touchingBounds(drawableID);
if (!bounds) return;
// Translate input x and y to coordinates relative to the drawable
const pickX = x - ((this._nativeSize[0] / 2) + bounds.left);
const pickY = y - ((this._nativeSize[1] / 2) - bounds.top);
// Limit size of viewport to the bounds around the target Drawable,
// and create the projection matrix for the draw.
gl.viewport(0, 0, bounds.width, bounds.height);
const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
try {
gl.disable(gl.BLEND);
this._drawThese([drawableID], ShaderManager.DRAW_MODE.default, projection);
} finally {
gl.enable(gl.BLEND);
}
const data = new Uint8Array(bounds.width * bounds.height * 4);
gl.readPixels(0, 0, bounds.width, bounds.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
if (this._debugCanvas) {
this._debugCanvas.width = bounds.width;
this._debugCanvas.height = bounds.height;
const ctx = this._debugCanvas.getContext('2d');
const imageData = ctx.createImageData(bounds.width, bounds.height);
imageData.data.set(data);
ctx.putImageData(imageData, 0, 0);
ctx.beginPath();
ctx.arc(pickX, pickY, 3, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
}
return {
data: data,
width: bounds.width,
height: bounds.height,
x: pickX,
y: pickY
};
}
/**
* Get the candidate bounding box for a touching query.
* @param {int} drawableID ID for drawable of query.
@@ -1019,4 +1091,7 @@ class RenderWebGL extends EventEmitter {
}
}
// :3
RenderWebGL.prototype.canHazPixels = RenderWebGL.prototype.extractDrawable;
module.exports = RenderWebGL;