Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
104 lines (83 sloc) 2.26 KB
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'/>
<style>
html,body {
height: 100%;
margin: 0px;
}
.flex-column {
display: flex;
flex-flow: column;
}
.flex-row {
display: flex;
flex-flow: row;
}
.flexed {
flex: auto;
}
.view-canvas {
margin: 2px;
border: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class='flex-row' style='height: 100%;'>
<div class='flex-column' style='width: 30%;'>
Top:
<br/>
<canvas id='top' class='view-canvas flexed'></canvas>
<br/>
Front:
<br/>
<canvas id='front' class='view-canvas flexed'></canvas>
<br/>
Left:
<br/>
<canvas id='left' class='view-canvas flexed'></canvas>
</div>
<div class='flex-column flexed'>
Free:
<br/>
<canvas id='free' class='view-canvas flexed'></canvas>
</div>
</div>
<script>
'use strict';
var topView = document.getElementById('top' ).getContext('bitmaprenderer');
var freeView = document.getElementById('free' ).getContext('bitmaprenderer');
var frontView = document.getElementById('front').getContext('bitmaprenderer');
var leftView = document.getElementById('left' ).getContext('bitmaprenderer');
var offscreen = new OffscreenCanvas(512, 512);
var gl = offscreen.getContext('webgl');
offscreen.resizeTo = function(dest) {
this.width = dest.width;
this.height = dest.height;
};
offscreen.commitTo = function(dest) {
var bitmap = this.transferToImageBitmap();
dest.transferImageBitmap(bitmap);
};
offscreen.resizeTo(frontView);
gl.clearColor(1.0, 0.3, 0.3, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
offscreen.commitTo(frontView);
offscreen.resizeTo(leftView);
gl.clearColor(0.3, 1.0, 0.3, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
offscreen.commitTo(leftView);
offscreen.resizeTo(topView);
gl.clearColor(0.3, 0.3, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
offscreen.commitTo(topView);
offscreen.resizeTo(freeView);
gl.clearColor(1.0, 0.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
offscreen.commitTo(freeView);
</script>
</body>
</html>
You can’t perform that action at this time.