Skip to content

WIP Run Flare-JS in a WebWorker with an offscreencanvas #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sanbornhilland wants to merge 1 commit into
base: master
Choose a base branch
from
Open

WIP Run Flare-JS in a WebWorker with an offscreencanvas #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23,667 changes: 23,667 additions & 0 deletions example/example.build.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions example/example.build.js.map
View file
Open in desktop

Large diffs are not rendered by default.

63 changes: 24 additions & 39 deletions example/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>2Dimensions - Flare Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<script src="../build/Flare.min.js"></script>
<script src="../build/gl-matrix.js"></script>

<!-- example implementation is in here -->
<script src="./example.js" compile></script>

<style>
body {
margin: 0;
Expand All @@ -19,40 +13,31 @@
</style>

<script>
let flareExample;
function onLoad() {
flareExample = new FlareExample(document.getElementById("canvas"));
flareExample.load("./ball.flj", function (error) {
if (error) {
console.log("failed to load actor file...", error);
}
});

flareExample.setSize(684, 387);
document.body.addEventListener('dragover', function (evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = "copy";
}, true);
const flareExample = new Worker('./example.build.js')

document.body.addEventListener('dragleave', function (evt) {
evt.stopPropagation();
evt.preventDefault();
});

document.body.addEventListener("drop", function (evt) {
// Reload another actor by dragging and dropping the file in.
evt.stopPropagation();
evt.preventDefault();

const files = evt.dataTransfer.files;

flareExample.load(files[0], function (error) {
if (error) {
console.log("oh no", error);
}
});
}, true);
function onLoad() {
const canvas = document.getElementById("canvas")
const offscreencanvas = canvas.transferControlToOffscreen()

flareExample.postMessage({
type: 'INIT',
canvas: offscreencanvas,
width: canvas.width,
height: canvas.height,
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
}, [offscreencanvas])

flareExample.postMessage({
type: 'LOAD',
url: './minion.flr',
})

flareExample.postMessage({
type: 'SET_SIZE',
width: 684,
height: 387,
})
}
</script>
</head>
Expand Down
281 changes: 140 additions & 141 deletions example/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,179 +1,178 @@
const FlareExample = (function ()
import { mat2d } from 'gl-matrix'
const Flare = require('../source/Flare.js')

const _ViewCenter = [500.0, 500.0];
const _Scale = 0.5;

function FlareExample(canvas)
{
const _ViewCenter = [500.0, 500.0];
const _Scale = 0.5;
const _ScreenScale = 1.0;
this._Graphics = new Flare.Graphics(canvas);
this._LastAdvanceTime = Date.now();
this._ViewTransform = mat2d.create();
this._AnimationInstance = null;
this._Animation = null;
this._SoloSkaterAnimation = null;

const _ScreenMouse = vec2.create();
const _WorldMouse = vec2.create();
const _This = this;

function FlareExample(canvas)
{
this._Graphics = new Flare.Graphics(canvas);
this._LastAdvanceTime = Date.now();
this._ViewTransform = mat2d.create();
this._AnimationInstance = null;
this._Animation = null;
this._SoloSkaterAnimation = null;
_ScheduleAdvance(_This);
_Advance(_This);
}

const _This = this;
function _Advance(_This)
{
_ScheduleAdvance(_This);

_ScheduleAdvance(_This);
_Advance(_This);
_This.setSize(self.innerWidth, self.innerHeight);

document.addEventListener("keydown", function(ev)
{
// 68 D
// 65 A
// 39 right
// 37 left
switch(ev.keyCode)
{
case 32: // Enter
break;
case 16: // Shift
break;
case 68: // 'D'
case 39: // right
break;
case 65: // 'A'
case 37: // left
break;
case 87:
case 38:
break;
const now = Date.now();
const elapsed = (now - _This._LastAdvanceTime)/1000.0;
_This._LastAdvanceTime = now;

}
});
const actor = _This._ActorInstance;

if(_This._AnimationInstance)
{
const ai = _This._AnimationInstance;
ai.time = ai.time + elapsed;
ai.apply(_This._ActorInstance, 1.0);
}

function _Advance(_This)
if(actor)
{
_This.setSize(window.innerWidth, window.innerHeight);
const graphics = _This._Graphics;

const now = Date.now();
const elapsed = (now - _This._LastAdvanceTime)/1000.0;
_This._LastAdvanceTime = now;
const w = graphics.viewportWidth;
const h = graphics.viewportHeight;

const actor = _This._ActorInstance;
const vt = _This._ViewTransform;
vt[0] = _Scale;
vt[3] = _Scale;
vt[4] = (-_ViewCenter[0] * _Scale + w/2);
vt[5] = (-_ViewCenter[1] * _Scale + h/2);

if(_This._AnimationInstance)
{
const ai = _This._AnimationInstance;
ai.time = ai.time + elapsed;
ai.apply(_This._ActorInstance, 1.0);
}
actor.advance(elapsed);
}

if(actor)
{
const graphics = _This._Graphics;

const w = graphics.viewportWidth;
const h = graphics.viewportHeight;

const vt = _This._ViewTransform;
vt[0] = _Scale;
vt[3] = _Scale;
vt[4] = (-_ViewCenter[0] * _Scale + w/2);
vt[5] = (-_ViewCenter[1] * _Scale + h/2);

actor.advance(elapsed);
}
_Draw(_This, _This._Graphics);
}

_Draw(_This, _This._Graphics);
_ScheduleAdvance(_This);
}
let count = 0

function _Draw(viewer, graphics)
{
if(!viewer._Actor)
{
return;
}
setInterval(() => {
console.log(count)

graphics.clear([0.3628, 0.3628, 0.3628, 1.0]);
graphics.setView(viewer._ViewTransform);
viewer._ActorInstance.draw(graphics);
}
count = 0
}, 1000)

function _ScheduleAdvance(viewer)
function _Draw(viewer, graphics)
{
if(!viewer._Actor)
{
clearTimeout(viewer._AdvanceTimeout);
//if(document.hasFocus())
{
window.requestAnimationFrame(function()
{
_Advance(viewer);
});
}
/*else
{
viewer._AdvanceTimeout = setTimeout(function()
{
_Advance(viewer);
}, _LowFrequencyAdvanceTime);
}*/
return;
}

FlareExample.prototype.load = function(url, callback)
count++

graphics.clear([0.3628, 0.3628, 0.3628, 1.0]);
graphics.setView(viewer._ViewTransform);
viewer._ActorInstance.draw(graphics);
}

function _ScheduleAdvance(viewer)
{
{
const loader = new Flare.ActorLoader();
const _This = this;
loader.load(url, function(actor)
{
if(!actor || actor.error)
{
callback(!actor ? null : actor.error);
}
else
self.requestAnimationFrame(function()
{
_This.setActor(actor);
callback();
}
});
};
_Advance(viewer);
});
}
}

FlareExample.prototype.setActor = function(actor)
FlareExample.prototype.load = function(url, callback)
{
const loader = new Flare.ActorLoader();
const _This = this;
loader.load(url, function(actor)
{
if(this._Actor)
if(!actor || actor.error)
{
this._Actor.dispose(this._Graphics);
callback(!actor ? null : actor.error);
}
if(this._ActorInstance)
else
{
this._ActorInstance.dispose(this._Graphics);
_This.setActor(actor);
callback();
}
actor.initialize(this._Graphics);
});
};

const actorInstance = actor.makeInstance();
actorInstance.initialize(this._Graphics);

this._Actor = actor;
this._ActorInstance = actorInstance;
FlareExample.prototype.setActor = function(actor)
{
if(this._Actor)
{
this._Actor.dispose(this._Graphics);
}
if(this._ActorInstance)
{
this._ActorInstance.dispose(this._Graphics);
}
actor.initialize(this._Graphics);

const actorInstance = actor.makeInstance();
actorInstance.initialize(this._Graphics);

if(actorInstance)
this._Actor = actor;
this._ActorInstance = actorInstance;

if(actorInstance)
{
actorInstance.initialize(this._Graphics);
if(actorInstance._Animations.length)
{
actorInstance.initialize(this._Graphics);
if(actorInstance._Animations.length)
{
this._Animation = actorInstance._Animations[0];
this._AnimationInstance = new Flare.AnimationInstance(this._Animation._Actor, this._Animation);

if(!this._AnimationInstance)
{
console.log("NO ANIMATION IN HERE!?");
return;
}
this._Animation = actorInstance._Animations[0];
this._AnimationInstance = new Flare.AnimationInstance(this._Animation._Actor, this._Animation);

if(!this._AnimationInstance)
{
console.log("NO ANIMATION IN HERE!?");
return;
}

}
};
}
};

FlareExample.prototype.setSize = function(width, height)
{
this._Graphics.setSize(width, height);
};
FlareExample.prototype.setSize = function(width, height)
{
this._Graphics.setSize(width, height);
};

return FlareExample;
}());
let flareExample;

self.addEventListener("message", (event) => {
switch (event.data.type)
{
case "INIT":
/*
* Window isn't available in WW so we're getting this info
* passed from the main thread and then mocking it. IRL it
* would make sense for the app to have no refs to window.
*/
self.innerWidth = event.data.innerWidth
self.innerHeight = event.data.innerHeight
flareExample = new FlareExample(event.data.canvas);
break;

case "LOAD":
flareExample.load(event.data.url, function (error) {
if (error) {
console.log("failed to load actor file...", error);
}
});
break;

case "SET_SIZE":
flareExample.setSize(event.data.width, event.data.height)
}
});
Loading