test('whether the given object is a WebGL context', function (t) {
t.equal(isWebglContext(5), false)
t.equal(isWebglContext('foo'), false)
var gl = getGL()
if (!gl) {
throw new Error('Environment does not support WebGL! unable to test')
}
t.equal(isWebglContext(gl), true)
t.equal(isWebglContext(gl.canvas), false)
t.end()
})
module.exports = function(opts) {
if (!opts || (!opts.vertex || !opts.fragment))
throw "must specify 'vertex' and 'fragment' source";
var vertSource = (opts.vertex).trim();
var fragSource = (opts.fragment).trim();
var gl = opts.gl;
if (!gl) {
gl = getGL();
if (!gl)
throw new Error("WebGL not supported -- try another browser");
}
return compile(gl, vertSource, fragSource, opts.attributeLocations, opts.verbose);
};
function CanvasApp(render, options) {
if (!(this instanceof CanvasApp))
return new CanvasApp(render, options);
//allow options to be passed as first argument
if (typeof render === 'object' && render) {
options = render;
render = null;
}
render = typeof render === 'function' ? render : options.onRender;
options = options||{};
options.retina = typeof options.retina === "boolean" ? options.retina : true;
var hasWidth = typeof options.width === "number",
hasHeight = typeof options.height === "number";
//if either width or height is specified, don't auto-resize to the window...
if (hasWidth || hasHeight)
options.ignoreResize = true;
options.width = hasWidth ? options.width : window.innerWidth;
options.height = hasHeight ? options.height : window.innerHeight;
var DPR = options.retina ? (window.devicePixelRatio||1) : 1;
//setup the canvas
var canvas,
context,
attribs = options.contextAttributes||{};
this.isWebGL = false;
//if user provided a context object
if (isCanvasContext(options.context)) {
context = options.context;
canvas = context.canvas;
}
//otherwise allow for a string to set one up
if (!canvas)
canvas = options.canvas || document.createElement("canvas");
canvas.width = options.width * DPR;
canvas.height = options.height * DPR;
if (!context) {
if (options.context === "webgl" || options.context === "experimental-webgl") {
context = getGL({ canvas: canvas, attributes: attribs });
if (!context) {
throw "WebGL Context Not Supported -- try enabling it or using a different browser";
}
} else {
context = canvas.getContext(options.context||"2d", attribs);
}
}
this.isWebGL = isGL(context);
if (options.retina) {
canvas.style.width = options.width + 'px';
canvas.style.height = options.height + 'px';
}
this.running = false;
this.width = options.width;
this.height = options.height;
this.canvas = canvas;
this.context = context;
this.onResize = options.onResize;
this._DPR = DPR;
this._retina = options.retina;
this._once = options.once;
this._ignoreResize = options.ignoreResize;
this._lastFrame = null;
this._then = Date.now();
this.maxDeltaTime = typeof options.maxDeltaTime === 'number' ? options.maxDeltaTime : 1000/24;
//FPS counter
this.fps = 60;
this._frames = 0;
this._prevTime = this._then;
if (!this._ignoreResize) {
options.resizeDebounce = typeof options.resizeDebounce === 'number'
? options.resizeDebounce : 50;
addEvent(window, "resize", debounce(function() {
this.resize(window.innerWidth, window.innerHeight);
}.bind(this), options.resizeDebounce, false));
addEvent(window, "orientationchange", function() {
this.resize(window.innerWidth, window.innerHeight);
}.bind(this));
}
if (typeof render === "function") {
this.onRender = render.bind(this);
} else {
//dummy render function
this.onRender = function (context, width, height, dt) { };
}
this.renderOnce = function() {
var now = Date.now();
var dt = Math.min(this.maxDeltaTime, (now-this._then));
this._frames++;
if (now > this._prevTime + 1000) {
this.fps = Math.round((this._frames * 1000) / (now - this._prevTime));
this._prevTime = now;
this._frames = 0;
}
if (!this.isWebGL) {
this.context.save();
this.context.scale(this._DPR, this._DPR);
} else {
this.context.viewport(0, 0, this.width * this._DPR, this.height * this._DPR);
}
this.onRender(this.context, this.width, this.height, dt);
if (!this.isWebGL)
this.context.restore();
this._then = now;
};
this._renderHandler = function() {
if (!this.running)
return;
if (!this._once) {
this._lastFrame = requestAnimationFrame(this._renderHandler);
}
this.renderOnce();
}.bind(this);
if (typeof options.onReady === "function") {
options.onReady.call(this, context, this.width, this.height);
}
}
function initializeGLPlot(scene, fullLayout, canvas, gl) {
var glplotOptions = {
canvas: canvas,
gl: gl,
container: scene.container,
axes: scene.axesOptions,
spikes: scene.spikeOptions,
pickRadius: 10,
snapToData: true,
autoScale: true,
autoBounds: false
};
// for static plots, we reuse the WebGL context
// as WebKit doesn't collect them reliably
if(scene.staticMode) {
if(!STATIC_CONTEXT) {
STATIC_CANVAS = document.createElement('canvas');
STATIC_CONTEXT = getContext({
canvas: STATIC_CANVAS,
preserveDrawingBuffer: true,
premultipliedAlpha: true,
antialias: true
});
if(!STATIC_CONTEXT) {
throw new Error('error creating static canvas/context for image server');
}
}
glplotOptions.pixelRatio = scene.pixelRatio;
glplotOptions.gl = STATIC_CONTEXT;
glplotOptions.canvas = STATIC_CANVAS;
}
try {
scene.glplot = createPlot(glplotOptions);
}
catch(e) {
/*
* createPlot will throw when webgl is not enabled in the client.
* Lets return an instance of the module with all functions noop'd.
* The destroy method - which will remove the container from the DOM
* is overridden with a function that removes the container only.
*/
showNoWebGlMsg(scene);
}
var relayoutCallback = function(scene) {
if(scene.fullSceneLayout.dragmode === false) return;
var update = {};
update[scene.id + '.camera'] = getLayoutCamera(scene.camera);
scene.saveCamera(scene.graphDiv.layout);
scene.graphDiv.emit('plotly_relayout', update);
};
scene.glplot.canvas.addEventListener('mouseup', relayoutCallback.bind(null, scene));
scene.glplot.canvas.addEventListener('wheel', relayoutCallback.bind(null, scene));
if(!scene.staticMode) {
scene.glplot.canvas.addEventListener('webglcontextlost', function(ev) {
Lib.warn('Lost WebGL context.');
ev.preventDefault();
});
}
if(!scene.camera) {
var cameraData = scene.fullSceneLayout.camera;
scene.camera = createCamera(scene.container, {
center: [cameraData.center.x, cameraData.center.y, cameraData.center.z],
eye: [cameraData.eye.x, cameraData.eye.y, cameraData.eye.z],
up: [cameraData.up.x, cameraData.up.y, cameraData.up.z],
zoomMin: 0.1,
zoomMax: 100,
mode: 'orbit'
});
}
scene.glplot.camera = scene.camera;
scene.glplot.oncontextloss = function() {
scene.recoverContext();
};
scene.glplot.onrender = render.bind(null, scene);
// List of scene objects
scene.traces = {};
return true;
}
proto.makeFramework = function() {
// create canvas and gl context
if(this.staticPlot) {
if(!STATIC_CONTEXT) {
STATIC_CANVAS = document.createElement('canvas');
STATIC_CONTEXT = getContext({
canvas: STATIC_CANVAS,
preserveDrawingBuffer: false,
premultipliedAlpha: true,
antialias: true
});
if(!STATIC_CONTEXT) {
throw new Error('Error creating static canvas/context for image server');
}
}
this.canvas = STATIC_CANVAS;
this.gl = STATIC_CONTEXT;
}
else {
var liveCanvas = document.createElement('canvas');
var gl = getContext({
canvas: liveCanvas,
premultipliedAlpha: true
});
if(!gl) showNoWebGlMsg(this);
this.canvas = liveCanvas;
this.gl = gl;
}
// position the canvas
var canvas = this.canvas;
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';
canvas.style['pointer-events'] = 'none';
this.updateSize(canvas);
// disabling user select on the canvas
// sanitizes double-clicks interactions
// ref: https://github.com/plotly/plotly.js/issues/744
canvas.className += 'user-select-none';
// create SVG container for hover text
var svgContainer = this.svgContainer = document.createElementNS(
'http://www.w3.org/2000/svg',
'svg');
svgContainer.style.position = 'absolute';
svgContainer.style.top = svgContainer.style.left = '0px';
svgContainer.style.width = svgContainer.style.height = '100%';
svgContainer.style['z-index'] = 20;
svgContainer.style['pointer-events'] = 'none';
// create div to catch the mouse event
var mouseContainer = this.mouseContainer = document.createElement('div');
mouseContainer.style.position = 'absolute';
// append canvas, hover svg and mouse div to container
var container = this.container;
container.appendChild(canvas);
container.appendChild(svgContainer);
container.appendChild(mouseContainer);
};
limitations under the License.
*********************************************************/
import background from './dots'
import createContext from 'webgl-context'
import tone from 'tone'
import { render } from 'deku'
import keys from './keys'
import math from './math'
import Piano from './piano'
import StartAudioContext from './start-audio-context'
let gl = createContext({alpha:true, premultipliedAlpha:false})
let TWOPI = Math.PI * 2.0
// tone.Master.mute = true
if( gl ){
// IOS Shim
window.parent.postMessage("loaded", "*");
//send the ready message to the parent
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
//full screen button on iOS
if (isIOS){
tone.startMobile()
//default buffer size to render (in pixels)
var width = 512/4;
var height = 512;
//number of varyings to use, max - 29
var VARYINGS = 29;
var blocksNumber = width / VARYINGS;
//default sample rate
var sampleRate = 44100;
var gl = createContext({
width: width,
height: height
});
// micro optimizations
gl.disable(gl.DEPTH_TEST);
gl.disable(gl.BLEND);
gl.disable(gl.CULL_FACE);
gl.disable(gl.DITHER);
gl.disable(gl.POLYGON_OFFSET_FILL);
gl.disable(gl.SAMPLE_COVERAGE);
gl.disable(gl.SCISSOR_TEST);
gl.disable(gl.STENCIL_TEST);
gl.lineWidth(1.0);