Skip to content

Commit 65687c9

Browse files
daniel86daniel86
authored
NEEMHub integration (#1)
* added README * add gitignore * added index.js * added package.json * changed the package to be a node module that can be published with npm * added render function that can be called outside of render loop * switch to jquery Co-authored-by: Daniel Beßler <[email protected]>
1 parent 909a196 commit 65687c9

28 files changed

+352
-276
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.*

‎Dockerfile

-4
This file was deleted.

‎EffectComposer.js

+9-45
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
* @author alteredq / http://alteredqualia.com/
33
*/
44

5-
THREE.EffectComposer = function ( renderer, renderTarget ) {
5+
var THREE = require('three');
6+
7+
var ShaderPass = require('./passes/ShaderPass.js');
8+
var CopyShader = require('./shader/CopyShader.js');
9+
10+
var EffectComposer = function ( renderer, renderTarget ) {
611

712
this.renderer = renderer;
813

@@ -30,25 +35,11 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
3035

3136
this.passes = [];
3237

33-
// dependencies
34-
35-
if ( THREE.CopyShader === undefined ) {
36-
37-
console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
38-
39-
}
40-
41-
if ( THREE.ShaderPass === undefined ) {
42-
43-
console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
44-
45-
}
46-
47-
this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
38+
this.copyPass = new ShaderPass( CopyShader );
4839

4940
};
5041

51-
Object.assign( THREE.EffectComposer.prototype, {
42+
Object.assign( EffectComposer.prototype, {
5243

5344
swapBuffers: function () {
5445

@@ -177,31 +168,4 @@ Object.assign( THREE.EffectComposer.prototype, {
177168

178169
} );
179170

180-
181-
THREE.Pass = function () {
182-
183-
// if set to true, the pass is processed by the composer
184-
this.enabled = true;
185-
186-
// if set to true, the pass indicates to swap read and write buffer after rendering
187-
this.needsSwap = true;
188-
189-
// if set to true, the pass clears its buffer before rendering
190-
this.clear = false;
191-
192-
// if set to true, the result of the pass is rendered to screen
193-
this.renderToScreen = false;
194-
195-
};
196-
197-
Object.assign( THREE.Pass.prototype, {
198-
199-
setSize: function ( width, height ) {},
200-
201-
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
202-
203-
console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
204-
205-
}
206-
207-
} );
171+
module.exports = EffectComposer;

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# @openease/canvas-three
2+
3+
[![npm (scoped)](https://img.shields.io/npm/v/@openease/canvas-three.svg)](https://www.npmjs.com/package/@openease/canvas-three)
4+
5+
A node module implementing a ROS client that receives marker messages, and displays them in a canvas.
6+
7+
## Install
8+
9+
```
10+
$ npm install @openease/canvas-three
11+
```

‎Viewer.js

+74-50
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,22 @@
44
* @author Jihoon Lee - [email protected]
55
*/
66

7+
var ROS3D = require('ros3d');
8+
var THREE = require('three');
9+
10+
var ShaderPass = require('./passes/ShaderPass.js');
11+
var RenderPass = require('./passes/RenderPass.js');
12+
var CelShadingPass = require('./passes/CelShadingPass.js');
13+
var HighlightingPass = require('./passes/HighlightingPass.js');
14+
var OutlinePass = require('./passes/OutlinePass.js');
15+
var SAOPass = require('./passes/SAOPass.js');
16+
var SSAOPass = require('./passes/SSAOPass.js');
17+
18+
var CopyShader = require('./shader/CopyShader.js');
19+
var FXAAShader = require('./shader/FXAAShader.js');
20+
21+
var EffectComposer = require('./EffectComposer.js');
22+
723
/**
824
* A Viewer can be used to render an interactive 3D scene to a HTML5 canvas.
925
*
@@ -17,7 +33,7 @@
1733
* * antialias (optional) - if antialiasing should be used
1834
* * intensity (optional) - the lighting intensity setting to use
1935
*/
20-
EASE.Viewer = function(options) {
36+
var Viewer = function(options) {
2137
options = options || {};
2238
var that = this;
2339
this.client = options.client;
@@ -32,7 +48,7 @@ EASE.Viewer = function(options) {
3248
this.interval = 1 / 30;
3349

3450
this.renderer = this.createRenderer(options);
35-
this.composer = new THREE.EffectComposer(this.renderer);
51+
this.composer = new EffectComposer(this.renderer);
3652
// create scene node + camera + lights
3753
this.createScene(options);
3854
if( options.sun ) {
@@ -59,8 +75,8 @@ EASE.Viewer = function(options) {
5975
this.createBGScene(options);
6076

6177
// add the renderer to the page
62-
options.div.appendChild(this.renderer.domElement);
63-
options.div.addEventListener('dblclick', function(ev){
78+
options.div.append(this.renderer.domElement);
79+
options.div.on('dblclick', function(ev){
6480
if(that.lastEvent === ev) return;
6581
that.client.unselectMarker();
6682
that.lastEvent = ev;
@@ -74,7 +90,7 @@ EASE.Viewer = function(options) {
7490
this.start();
7591
};
7692

77-
EASE.Viewer.prototype.createRenderer = function(options){
93+
Viewer.prototype.createRenderer = function(options){
7894
var background = options.background || '#111111';
7995
var renderer = new THREE.WebGLRenderer({ antialias: options.antialias });
8096
renderer.setPixelRatio(window.devicePixelRatio);
@@ -86,7 +102,7 @@ EASE.Viewer.prototype.createRenderer = function(options){
86102
return renderer;
87103
};
88104

89-
EASE.Viewer.prototype.createScene = function(options){
105+
Viewer.prototype.createScene = function(options){
90106
var ambient = options.ambient || '#555555';
91107
var cameraPosition = options.camera.position || {x : 3, y : 3, z : 3};
92108
var cameraZoomSpeed = options.camera.zoomSpeed || 0.5;
@@ -119,7 +135,7 @@ EASE.Viewer.prototype.createScene = function(options){
119135
this.highlighter = new ROS3D.Highlighter({mouseHandler : this.mouseHandler});
120136
};
121137

122-
EASE.Viewer.prototype.createHUDScene = function(options){
138+
Viewer.prototype.createHUDScene = function(options){
123139
// create the HUD scene for GUI elements
124140
this.sceneOrtho = new THREE.Scene();
125141
// create the global camera with orthogonal projection
@@ -131,13 +147,13 @@ EASE.Viewer.prototype.createHUDScene = function(options){
131147
this.cameraOrtho.position.z = 10;
132148
};
133149

134-
EASE.Viewer.prototype.createBGScene = function(){
150+
Viewer.prototype.createBGScene = function(){
135151
this.backgroundScene = new THREE.Scene();
136152
this.backgroundCamera = new THREE.Camera();
137153
this.backgroundScene.add(this.backgroundCamera); // TODO is this required?
138154
};
139155

140-
EASE.Viewer.prototype.createSunLight = function(options){
156+
Viewer.prototype.createSunLight = function(options){
141157
var intensity = options.sun.intensity || 0.66;
142158
var color = options.sun.color || '#eeeeee';
143159
var pos = options.sun.pos || [-1, 0.5, 3.0];
@@ -161,7 +177,7 @@ EASE.Viewer.prototype.createSunLight = function(options){
161177
return sun;
162178
};
163179

164-
EASE.Viewer.prototype.createSpotLight = function(options){
180+
Viewer.prototype.createSpotLight = function(options){
165181
var color = options.spot.color || '#ffffbb';
166182
var intensity = options.spot.intensity || 0.9;
167183
var pos = options.spot.pos || [0, 0, 6];
@@ -183,58 +199,58 @@ EASE.Viewer.prototype.createSpotLight = function(options){
183199
return spot;
184200
};
185201

186-
EASE.Viewer.prototype.setSimplePipeline = function(width, height){
202+
Viewer.prototype.setSimplePipeline = function(width, height){
187203
this.composer.passes = [];
188-
// this.composer.addPass(new THREE.RenderPass(this.backgroundScene, this.backgroundCamera));
189-
this.composer.addPass(new THREE.RenderPass(this.scene, this.camera));
190-
this.composer.addPass(new EASE.HighlightingPass(this.scene, this.camera, this.highlighter));
204+
// this.composer.addPass(new RenderPass(this.backgroundScene, this.backgroundCamera));
205+
this.composer.addPass(new RenderPass(this.scene, this.camera));
206+
this.composer.addPass(new HighlightingPass(this.scene, this.camera, this.highlighter));
191207
this.addFXAAPass(width, height, true);
192-
// this.composer.addPass(new THREE.RenderPass(this.sceneOrtho, this.cameraOrtho));
208+
// this.composer.addPass(new RenderPass(this.sceneOrtho, this.cameraOrtho));
193209
};
194210

195-
EASE.Viewer.prototype.setComicPipeline = function(width, height){
196-
var outlinePass = new EASE.OutlinePass(this.scene, this.camera, width, height);
211+
Viewer.prototype.setComicPipeline = function(width, height){
212+
var outlinePass = new OutlinePass(this.scene, this.camera, width, height);
197213
this.composer.passes = [];
198-
this.composer.addPass(new THREE.RenderPass(this.scene, this.camera, outlinePass.mNormal));
199-
this.composer.addPass(new THREE.RenderPass(this.scene, this.camera, outlinePass.mDepth));
200-
this.composer.addPass(new EASE.CelShadingPass(this.scene, this.camera));
201-
// this.composer.addPass(new EASE.HighlightingPass(this.scene, this.camera, this.highlighter));
214+
this.composer.addPass(new RenderPass(this.scene, this.camera, outlinePass.mNormal));
215+
this.composer.addPass(new RenderPass(this.scene, this.camera, outlinePass.mDepth));
216+
this.composer.addPass(new CelShadingPass(this.scene, this.camera));
217+
// this.composer.addPass(new HighlightingPass(this.scene, this.camera, this.highlighter));
202218
this.composer.addPass(outlinePass);
203219
this.addFXAAPass(width, height, true);
204220
};
205221

206-
EASE.Viewer.prototype.addBlitPass = function(){
207-
var blit = new THREE.ShaderPass(THREE.CopyShader)
222+
Viewer.prototype.addBlitPass = function(){
223+
var blit = new ShaderPass(CopyShader)
208224
blit.renderToScreen = true;
209225
this.composer.addPass(blit);
210226
};
211227

212-
EASE.Viewer.prototype.addFXAAPass = function(width, height, renderToScreen){
213-
this.fxaaPass = new THREE.ShaderPass(THREE.FXAAShader);
228+
Viewer.prototype.addFXAAPass = function(width, height, renderToScreen){
229+
this.fxaaPass = new ShaderPass(FXAAShader);
214230
this.fxaaPass.uniforms['resolution'].value.set(1.0/width, 1.0/height);
215231
this.fxaaPass.renderToScreen = renderToScreen;
216232
this.composer.addPass( this.fxaaPass );
217233
};
218234

219-
EASE.Viewer.prototype.addSSAOPass = function(width, height, renderToScreen){
220-
this.ssaoPass = new THREE.SSAOPass(this.scene, this.camera, width, height);
235+
Viewer.prototype.addSSAOPass = function(width, height, renderToScreen){
236+
this.ssaoPass = new SSAOPass(this.scene, this.camera, width, height);
221237
this.ssaoPass.renderToScreen = renderToScreen;
222238
this.composer.addPass( this.ssaoPass );
223239
};
224240

225-
EASE.Viewer.prototype.addSAOPass = function(renderToScreen){
226-
var saoPass = new THREE.SAOPass(this.scene, this.camera, true, false, {x: 256, y: 256});
241+
Viewer.prototype.addSAOPass = function(renderToScreen){
242+
var saoPass = new SAOPass(this.scene, this.camera, true, false, {x: 256, y: 256});
227243
this.saoPass = saoPass;
228244
saoPass.renderToScreen = renderToScreen;
229245
this.composer.addPass(saoPass);
230246
if(this.showDatgui) {
231247
var saoFolder = gui.addFolder('SAO');
232248
saoFolder.add( saoPass.params, 'output', {
233-
'Beauty': THREE.SAOPass.OUTPUT.Beauty,
234-
'Beauty+SAO': THREE.SAOPass.OUTPUT.Default,
235-
'SAO': THREE.SAOPass.OUTPUT.SAO,
236-
'Depth': THREE.SAOPass.OUTPUT.Depth,
237-
'Normal': THREE.SAOPass.OUTPUT.Normal
249+
'Beauty': SAOPass.OUTPUT.Beauty,
250+
'Beauty+SAO': SAOPass.OUTPUT.Default,
251+
'SAO': SAOPass.OUTPUT.SAO,
252+
'Depth': SAOPass.OUTPUT.Depth,
253+
'Normal': SAOPass.OUTPUT.Normal
238254
} ).onChange( function ( value ) { saoPass.params.output = parseInt( value ); } );
239255
saoFolder.add( saoPass.params, 'saoBias', - 1, 1 );
240256
saoFolder.add( saoPass.params, 'saoIntensity', 0, 1 );
@@ -251,15 +267,15 @@ EASE.Viewer.prototype.addSAOPass = function(renderToScreen){
251267
/**
252268
* Start the render loop
253269
*/
254-
EASE.Viewer.prototype.start = function(){
270+
Viewer.prototype.start = function(){
255271
this.stopped = false;
256272
this.draw();
257273
};
258274

259275
/**
260276
* Renders the associated scene to the viewer.
261277
*/
262-
EASE.Viewer.prototype.draw = function(){
278+
Viewer.prototype.draw = function(){
263279
if(this.stopped){
264280
return; // Do nothing if stopped
265281
}
@@ -268,6 +284,18 @@ EASE.Viewer.prototype.draw = function(){
268284
if(this.delta > this.interval) {
269285
// update the controls
270286
this.cameraControls.update();
287+
this.render();
288+
this.delta = this.delta % this.interval;
289+
}
290+
291+
// draw the frame
292+
this.animationRequestId = requestAnimationFrame(this.draw.bind(this));
293+
};
294+
295+
/**
296+
* Renders the associated scene to the viewer.
297+
*/
298+
Viewer.prototype.render = function(){
271299
this.renderer.clear();
272300
if(this.useShader) {
273301
this.composer.render();
@@ -278,18 +306,12 @@ EASE.Viewer.prototype.draw = function(){
278306
this.highlighter.renderHighlights(this.scene, this.renderer, this.camera);
279307
this.renderer.render(this.sceneOrtho, this.cameraOrtho);
280308
}
281-
282-
this.delta = this.delta % this.interval;
283-
}
284-
285-
// draw the frame
286-
this.animationRequestId = requestAnimationFrame(this.draw.bind(this));
287309
};
288310

289311
/**
290312
* Stop the render loop
291313
*/
292-
EASE.Viewer.prototype.stop = function(){
314+
Viewer.prototype.stop = function(){
293315
if(!this.stopped){
294316
// Stop animation render loop
295317
cancelAnimationFrame(this.animationRequestId);
@@ -303,7 +325,7 @@ EASE.Viewer.prototype.stop = function(){
303325
* @param object - the THREE Object3D to add
304326
* @param selectable (optional) - if the object should be added to the selectable list
305327
*/
306-
EASE.Viewer.prototype.addObject = function(object, selectable) {
328+
Viewer.prototype.addObject = function(object, selectable) {
307329
if (selectable) {
308330
this.selectableObjects.add(object);
309331
} else {
@@ -317,7 +339,7 @@ EASE.Viewer.prototype.addObject = function(object, selectable) {
317339
* @param width - new width value
318340
* @param height - new height value
319341
*/
320-
EASE.Viewer.prototype.resize = function(width, height) {
342+
Viewer.prototype.resize = function(width, height) {
321343
this.camera.width = width;
322344
this.camera.height = height;
323345
this.camera.aspect = width / height;
@@ -338,7 +360,7 @@ EASE.Viewer.prototype.resize = function(width, height) {
338360
if(this.fxaaPass) this.fxaaPass.uniforms['resolution'].value.set(1.0/width, 1.0/height);
339361
};
340362

341-
EASE.Viewer.prototype.addMarker = function(marker,node) {
363+
Viewer.prototype.addMarker = function(marker,node) {
342364
if(marker.isBackgroundMarker) {
343365
this.backgroundScene.add(node);
344366
}
@@ -367,7 +389,7 @@ EASE.Viewer.prototype.addMarker = function(marker,node) {
367389
};
368390
};
369391

370-
EASE.Viewer.prototype.removeMarker = function(marker, node) {
392+
Viewer.prototype.removeMarker = function(marker, node) {
371393
if(marker.isBackgroundMarker) {
372394
this.backgroundScene.remove(node);
373395
}
@@ -384,7 +406,7 @@ EASE.Viewer.prototype.removeMarker = function(marker, node) {
384406
this.client.removeMarker(marker);
385407
};
386408

387-
EASE.Viewer.prototype.addEventListener = function(marker) {
409+
Viewer.prototype.addEventListener = function(marker) {
388410
var that = this;
389411
var addEventListenerRecursive = function(child) {
390412
child.addEventListener('dblclick', function(ev){
@@ -414,9 +436,11 @@ EASE.Viewer.prototype.addEventListener = function(marker) {
414436
marker.traverse(addEventListenerRecursive);
415437
};
416438

417-
EASE.Viewer.prototype.highlight = function(node) {
439+
Viewer.prototype.highlight = function(node) {
418440
this.highlighter.hoverObjs[node.uuid] = node;
419441
};
420-
EASE.Viewer.prototype.unhighlight = function(node) {
442+
Viewer.prototype.unhighlight = function(node) {
421443
delete this.highlighter.hoverObjs[node.uuid];
422444
};
445+
446+
module.exports = Viewer;

‎index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
module.exports = require("./Viewer.js");

0 commit comments

Comments
 (0)