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

Synchronize with master branch

Browse Source
This commit is contained in:
Andrew Sliwinski 2016-08-08 14:58:35 -04:00
parent f5cd625be8
commit 92fc916b86
7 changed files with 117 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Makefile
View File

@ -1,5 +1,6 @@
ESLINT=./node_modules/.bin/eslint
WEBPACK=./node_modules/.bin/webpack --progress --colors
WEBPACK_DEV_SERVER=./node_modules/.bin/webpack-dev-server
# ------------------------------------------------------------------------------
@ -9,6 +10,9 @@ build:
watch:
$(WEBPACK) --watch --watch-poll
serve:
$(WEBPACK_DEV_SERVER) --host 0.0.0.0 --content-base ./
# ------------------------------------------------------------------------------
lint:
@ -21,4 +25,4 @@ test:
# ------------------------------------------------------------------------------
.PHONY: build watch lint test
.PHONY: build watch serve lint test

7
index.html Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="0; URL='/playground'" />
<title>Redirect to playground</title>
</head>
</html>

4
package.json
View File

@ -27,6 +27,8 @@
"eslint": "2.7.0",
"json-loader": "0.5.4",
"raw-loader": "0.5.1",
"webpack": "1.13.0"
"tap": "5.7.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1"
}
}

151
playground/index.html
View File

@ -1,89 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scratch WebGL rendering demo</title>
</head>
<head>
<meta charset="UTF-8">
<title>Scratch WebGL rendering demo</title>
</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>
<p>
<input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
</p>
<p>
Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
</p>
<script src="../render.js"></script>
<script>
var canvas = document.getElementById('scratch-stage');
var renderer = new RenderWebGLLocal(canvas);
<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>
var fudgeInput = document.getElementById('fudge');
function onFudgeMinChanged(newValue) {
fudgeInput.min = newValue;
}
function onFudgeMaxChanged(newValue) {
fudgeInput.max = newValue;
}
function onFudgeChanged(newValue) {
demoWorker.postMessage({fudge: newValue});
}
<p>
<input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
</p>
<p>
Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
</p>
// Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
function getMousePos(event, element) {
var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null)['paddingLeft'], 10) || 0;
var stylePaddingTop = parseInt(document.defaultView.getComputedStyle(element, null)['paddingTop'], 10) || 0;
var styleBorderLeft = parseInt(document.defaultView.getComputedStyle(element, null)['borderLeftWidth'], 10) || 0;
var styleBorderTop = parseInt(document.defaultView.getComputedStyle(element, null)['borderTopWidth'], 10) || 0;
<script src="../render.js"></script>
<script>
var canvas = document.getElementById('scratch-stage');
var renderer = new RenderWebGLLocal(canvas);
// Some pages have fixed-position bars at the top or left of the page
// They will mess up mouse coordinates and this fixes that
var html = document.body.parentNode;
var htmlTop = html.offsetTop;
var htmlLeft = html.offsetLeft;
var fudgeInput = document.getElementById('fudge');
function onFudgeMinChanged(newValue) {
fudgeInput.min = newValue;
}
function onFudgeMaxChanged(newValue) {
fudgeInput.max = newValue;
}
function onFudgeChanged(newValue) {
demoWorker.postMessage({fudge: newValue});
}
// Compute the total offset. It's possible to cache this if you want
var offsetX = 0, offsetY = 0;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
function getMousePos(event, element) {
var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null)['paddingLeft'], 10) || 0;
var stylePaddingTop = parseInt(document.defaultView.getComputedStyle(element, null)['paddingTop'], 10) || 0;
var styleBorderLeft = parseInt(document.defaultView.getComputedStyle(element, null)['borderLeftWidth'], 10) || 0;
var styleBorderTop = parseInt(document.defaultView.getComputedStyle(element, null)['borderTopWidth'], 10) || 0;
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
// This part is not strictly necessary, it depends on your styling
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
// Some pages have fixed-position bars at the top or left of the page
// They will mess up mouse coordinates and this fixes that
var html = document.body.parentNode;
var htmlTop = html.offsetTop;
var htmlLeft = html.offsetLeft;
// We return a simple javascript object with x and y defined
return {
x: event.pageX - offsetX,
y: event.pageY - offsetY
};
}
// Compute the total offset. It's possible to cache this if you want
var offsetX = 0, offsetY = 0;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
canvas.onclick = function(event) {
var mousePos = getMousePos(event, canvas);
var pickPromise = renderer.pick(mousePos.x, mousePos.y);
pickPromise.then(function(pickID) {
console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
});
};
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar
// This part is not strictly necessary, it depends on your styling
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
function drawStep() {
renderer.draw();
requestAnimationFrame(drawStep);
}
drawStep();
// We return a simple javascript object with x and y defined
return {
x: event.pageX - offsetX,
y: event.pageY - offsetY
};
}
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
canvas.onclick = function(event) {
var mousePos = getMousePos(event, canvas);
var pickID = renderer.pick(mousePos.x, mousePos.y);
console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
};
function drawStep() {
renderer.draw();
requestAnimationFrame(drawStep);
}
drawStep();
renderer.setDebugCanvas(document.getElementById('debug-canvas'));
var demoWorker = new Worker('worker.js');
renderer.connectWorker(demoWorker);
</script>
</body>
var demoWorker = new Worker('worker.js');
renderer.connectWorker(demoWorker);
</script>
</body>
</html>

6
playground/worker.js
View File

@ -29,7 +29,7 @@ function initWorker() {
drawableID = id;
renderer.updateDrawableProperties(drawableID, {
position: [0, 0],
scale: 100,
scale: [100, 100],
direction: 90
});
});
@ -50,9 +50,9 @@ function thinkStep() {
var props = {};
//props.position = [posX, posY];
props.direction = fudge;
//props.direction = fudge;
//props.pixelate = fudge;
//props.scale = 100;
props.scale = [fudge, 100];
renderer.updateDrawableProperties(drawableID, props);
}

27
src/Drawable.js
View File

@ -59,9 +59,10 @@ class Drawable {
}
this._position = twgl.v3.create(0, 0);
this._scale = 100;
this._scale = twgl.v3.create(100, 100);
this._direction = 90;
this._transformDirty = true;
this._visible = true;
this._effectBits = 0;
// Create a transparent 1x1 texture for temporary use
@ -292,6 +293,14 @@ Drawable.prototype.getUniforms = function () {
return this._uniforms;
};
/**
* Retrieve whether this Drawable is visible.
* @returns {boolean}
*/
Drawable.prototype.getVisible = function () {
return this._visible;
};
/**
* Update the position, direction, scale, or effect properties of this Drawable.
* @param {Object.<string,*>} properties The new property values to set.
@ -312,10 +321,16 @@ Drawable.prototype.updateProperties = function (properties) {
this._direction = properties.direction;
dirty = true;
}
if ('scale' in properties && this._scale != properties.scale) {
this._scale = properties.scale;
if ('scale' in properties && (
this._scale[0] != properties.scale[0] ||
this._scale[1] != properties.scale[1])) {
this._scale[0] = properties.scale[0];
this._scale[1] = properties.scale[1];
dirty = true;
}
if ('visible' in properties) {
this._visible = properties.visible;
}
if (dirty) {
this.setTransformDirty();
}
@ -369,9 +384,9 @@ Drawable.prototype._calculateTransform = function () {
var rotation = (270 - this._direction) * Math.PI / 180;
twgl.m4.rotateZ(modelMatrix, rotation, modelMatrix);
var scaledSize = twgl.v3.mulScalar(
this._uniforms.u_skinSize, this._scale / 100);
scaledSize[2] = 0; // was NaN because u_skinSize has only 2 components
var scaledSize = twgl.v3.divScalar(twgl.v3.multiply(
this._uniforms.u_skinSize, this._scale), 100);
scaledSize[3] = 0; // was NaN because the vectors have only 2 components.
twgl.m4.scale(modelMatrix, scaledSize, modelMatrix);
this._transformDirty = false;

3
src/RenderWebGL.js
View File

@ -435,6 +435,9 @@ RenderWebGL.prototype._drawThese = function(
var drawable = Drawable.getDrawableByID(drawableID);
// TODO: check if drawable is inside the viewport before anything else
// Hidden drawables (e.g., by a "hide" block) are never drawn.
if (!drawable.getVisible()) continue;
var effectBits = drawable.getEnabledEffects();
var newShader = this._shaderManager.getShader(drawMode, effectBits);
if (currentShader != newShader) {