Move “demo” into “playground” directory as to match VM and Blocks
This commit is contained in:
Andrew Sliwinski
@@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<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-webgl.js"></script>
|
|
||||||
<script>
|
|
||||||
var canvas = document.getElementById('scratch-stage');
|
|
||||||
var renderer = new RenderWebGLLocal(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});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
// 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));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
// We return a simple javascript object with x and y defined
|
|
||||||
return {
|
|
||||||
x: event.pageX - offsetX,
|
|
||||||
y: event.pageY - offsetY
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
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('demoWorker.js');
|
|
||||||
renderer.connectWorker(demoWorker);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
89
playground/index.html
Normal file
89
playground/index.html
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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);
|
||||||
|
|
||||||
|
var fudgeInput = document.getElementById('fudge');
|
||||||
|
function onFudgeMinChanged(newValue) {
|
||||||
|
fudgeInput.min = newValue;
|
||||||
|
}
|
||||||
|
function onFudgeMaxChanged(newValue) {
|
||||||
|
fudgeInput.max = newValue;
|
||||||
|
}
|
||||||
|
function onFudgeChanged(newValue) {
|
||||||
|
demoWorker.postMessage({fudge: newValue});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// 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));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// We return a simple javascript object with x and y defined
|
||||||
|
return {
|
||||||
|
x: event.pageX - offsetX,
|
||||||
|
y: event.pageY - offsetY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
</html>
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
|
importScripts('../render-worker.js');
|
||||||
importScripts('./render-webgl-worker.js');
|
|
||||||
|
|
||||||
var renderer;
|
var renderer;
|
||||||
var drawableID;
|
var drawableID;
|
||||||
@@ -21,7 +20,7 @@ onmessage = function(message) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
function initWorker() {
|
function initWorker() {
|
||||||
renderer = new RenderWebGLWorker();
|
renderer = new window.RenderWebGLWorker();
|
||||||
var create1 = renderer.createDrawable();
|
var create1 = renderer.createDrawable();
|
||||||
var create2 = renderer.createDrawable();
|
var create2 = renderer.createDrawable();
|
||||||
|
|
||||||
Reference in New Issue
Block a user