Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-07-23 14:04:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #7110 from ericrius1/particlesInEdit2

Browse source 
Particles in edit
This commit is contained in:
James B. Pollack 2016-02-16 18:33:01 -08:00
commit f2445e81e0
7 changed files with 647 additions and 760 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
examples/edit.js
View file

@ -26,6 +26,7 @@ Script.include([
"libraries/entityCameraTool.js", "libraries/entityCameraTool.js",
"libraries/gridTool.js", "libraries/gridTool.js",
"libraries/entityList.js", "libraries/entityList.js",
"particle_explorer/particleExplorerTool.js",
"libraries/lightOverlayManager.js", "libraries/lightOverlayManager.js",
]); ]);
@ -37,10 +38,6 @@ var lightOverlayManager = new LightOverlayManager();
var cameraManager = new CameraManager(); var cameraManager = new CameraManager();
var grid = Grid(); var grid = Grid();
// gridTool = GridTool({
// horizontalGrid: grid
// });
// gridTool.setVisible(false);
var entityListTool = EntityListTool(); var entityListTool = EntityListTool();
@ -176,7 +173,8 @@ var toolBar = (function() {
newTextButton, newTextButton,
newWebButton, newWebButton,
newZoneButton, newZoneButton,
newPolyVoxButton; newPolyVoxButton,
newParticleButton
function initialize() { function initialize() {
toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) { toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) {
@ -314,6 +312,20 @@ var toolBar = (function() {
visible: false visible: false
}); });
newParticleButton = toolBar.addTool({
imageURL: toolIconUrl + "particle.svg",
subImage: {
x: 0,
y: 0,
width: 256,
height: 256
},
width: toolWidth,
height: toolHeight,
alpha: 0.9,
visible: false
});
that.setActive(false); that.setActive(false);
} }
@ -360,6 +372,7 @@ var toolBar = (function() {
toolBar.showTool(newWebButton, doShow); toolBar.showTool(newWebButton, doShow);
toolBar.showTool(newZoneButton, doShow); toolBar.showTool(newZoneButton, doShow);
toolBar.showTool(newPolyVoxButton, doShow); toolBar.showTool(newPolyVoxButton, doShow);
toolBar.showTool(newParticleButton, doShow);
}; };
var RESIZE_INTERVAL = 50; var RESIZE_INTERVAL = 50;
@ -616,6 +629,22 @@ var toolBar = (function() {
return true; return true;
} }
if (newParticleButton === toolBar.clicked(clickedOverlay)) {
createNewEntity({
type: "ParticleEffect",
isEmitting: true,
particleRadius: 0.1,
emitAcceleration: {x: 0, y: -1, z: 0},
accelerationSpread: {x: 5, y: 0, z: 5},
emitSpeed: 1,
lifespan: 1,
particleRadius: 0.025,
alphaFinish: 0,
emitRate: 100,
textures: "https://hifi-public.s3.amazonaws.com/alan/Particles/Particle-Sprite-Smoke-1.png",
});
}
return false; return false;
}; };
@ -1226,7 +1255,8 @@ function selectAllEtitiesInCurrentSelectionBox(keepIfTouching) {
function deleteSelectedEntities() { function deleteSelectedEntities() {
if (SelectionManager.hasSelection()) { if (SelectionManager.hasSelection()) {
print(" Delete Entities"); selectedParticleEntity = 0;
particleExplorerTool.destroyWebView();
SelectionManager.saveProperties(); SelectionManager.saveProperties();
var savedProperties = []; var savedProperties = [];
for (var i = 0; i < selectionManager.selections.length; i++) { for (var i = 0; i < selectionManager.selections.length; i++) {
@ -1554,8 +1584,16 @@ PropertiesTool = function(opts) {
} else { } else {
if (data.properties.dynamic === false) { if (data.properties.dynamic === false) {
// this object is leaving dynamic, so we zero its velocities // this object is leaving dynamic, so we zero its velocities
data.properties["velocity"] = {x: 0, y: 0, z: 0}; data.properties["velocity"] = {
data.properties["angularVelocity"] = {x: 0, y: 0, z: 0}; x: 0,
y: 0,
z: 0
};
data.properties["angularVelocity"] = {
x: 0,
y: 0,
z: 0
};
} }
if (data.properties.rotation !== undefined) { if (data.properties.rotation !== undefined) {
var rotation = data.properties.rotation; var rotation = data.properties.rotation;
@ -1838,3 +1876,39 @@ propertyMenu.onSelectMenuItem = function(name) {
var showMenuItem = propertyMenu.addMenuItem("Show in Marketplace"); var showMenuItem = propertyMenu.addMenuItem("Show in Marketplace");
propertiesTool = PropertiesTool(); propertiesTool = PropertiesTool();
var particleExplorerTool = ParticleExplorerTool();
var selectedParticleEntity = 0;
entityListTool.webView.eventBridge.webEventReceived.connect(function(data) {
var data = JSON.parse(data);
if (data.type == "selectionUpdate") {
var ids = data.entityIds;
if(ids.length === 1) {
if (Entities.getEntityProperties(ids[0], "type").type === "ParticleEffect" ) {
if (JSON.stringify(selectedParticleEntity) === JSON.stringify(ids[0])) {
// This particle entity is already selected, so return
return;
}
// Destroy the old particles web view first
particleExplorerTool.destroyWebView();
particleExplorerTool.createWebView();
var properties = Entities.getEntityProperties(ids[0]);
var particleData = {
messageType: "particle_settings",
currentProperties: properties
};
selectedParticleEntity = ids[0];
particleExplorerTool.setActiveParticleEntity(ids[0]);
particleExplorerTool.webView.eventBridge.webEventReceived.connect(function(data) {
var data = JSON.parse(data);
if (data.messageType === "page_loaded") {
particleExplorerTool.webView.eventBridge.emitScriptEvent(JSON.stringify(particleData));
}
});
} else {
selectedParticleEntity = 0;
particleExplorerTool.destroyWebView();
}
}
}
});

45
examples/html/entityProperties.html
View file

@ -1500,51 +1500,6 @@
</div> </div>
</div> </div>
<div class="section-header particle-section">
<label>Particle</label>
</div>
<div class="particle-section property">
<span class="label">Is Emitting</span>
<span class="value">
<input type='checkbox' id="property-particle-is-emitting">
</span>
</div>
<div class="particle-section property">
<div class="label">Max Particles</div>
<div class="value">
<input type='number' id="property-particle-maxparticles" min="0" max="2048" step="1">
</div>
</div>
<div class="particle-section property">
<div class="label">Particle Life Span</div>
<div class="value">
<input type='number' id="property-particle-lifespan" min="0" step="0.1">
</div>
</div>
<div class="particle-section property">
<div class="label">Particle Emission Rate</div>
<div class="value">
<input type='number' id="property-particle-emit-rate" min="0" step="0.5">
</div>
</div>
<div class="particle-section property">
<div class="label">Particle Radius</div>
<div class="value">
<input class="coord" type='number' id="property-particle-radius" min="0" step="0.005">
</div>
</div>
<div class="particle-section property">
<div class="label">Textures</div>
<div class="value">
<textarea id="property-particle-textures" value=''></textarea>
</div>
</div>
<div class="section-header light-section"> <div class="section-header light-section">
<label>Light</label> <label>Light</label>
</div> </div>

5
examples/libraries/entityList.js
View file

@ -8,12 +8,16 @@ EntityListTool = function(opts) {
title: 'Entities', source: url, toolWindow: true title: 'Entities', source: url, toolWindow: true
}); });
var searchRadius = 100; var searchRadius = 100;
var visible = false; var visible = false;
webView.setVisible(visible); webView.setVisible(visible);
that.webView = webView;
that.setVisible = function(newVisible) { that.setVisible = function(newVisible) {
visible = newVisible; visible = newVisible;
webView.setVisible(visible); webView.setVisible(visible);
@ -71,6 +75,7 @@ EntityListTool = function(opts) {
webView.eventBridge.emitScriptEvent(JSON.stringify(data)); webView.eventBridge.emitScriptEvent(JSON.stringify(data));
} }
webView.eventBridge.webEventReceived.connect(function(data) { webView.eventBridge.webEventReceived.connect(function(data) {
data = JSON.parse(data); data = JSON.parse(data);
if (data.type == "selectionUpdate") { if (data.type == "selectionUpdate") {

504
examples/particle_explorer/main.js
View file

@ -1,504 +0,0 @@
//
// main.js
//
// Created by James B. Pollack @imgntn on 9/26/2015
// Copyright 2015 High Fidelity, Inc.
// Web app side of the App - contains GUI.
// This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/*global window, alert, EventBridge, dat, listenForSettingsUpdates,createVec3Folder,createQuatFolder,writeVec3ToInterface,writeDataToInterface*/
var Settings = function() {
this.exportSettings = function() {
//copyExportSettingsToClipboard();
showPreselectedPrompt();
};
this.importSettings = function() {
importSettings();
};
};
//2-way bindings-aren't quite ready yet. see bottom of file.
var AUTO_UPDATE = false;
var UPDATE_ALL_FREQUENCY = 100;
var controllers = [];
var colorControllers = [];
var folders = [];
var gui = null;
var settings = new Settings();
var updateInterval;
var currentInputField;
var storedController;
var keysToIgnore = [
'importSettings',
'exportSettings',
'script',
'visible',
'locked',
'userData',
'position',
'dimensions',
'rotation',
'id',
'description',
'type',
'created',
'age',
'ageAsText',
'boundingBox',
'naturalDimensions',
'naturalPosition',
'velocity',
'gravity',
'acceleration',
'damping',
'restitution',
'friction',
'density',
'lifetime',
'scriptTimestamp',
'registrationPoint',
'angularVelocity',
'angularDamping',
'collisionless',
'dynamic',
'href',
'actionData',
'marketplaceID',
'collisionSoundURL',
'shapeType',
'isEmitting',
'sittingPoints',
'originalTextures',
'parentJointIndex',
'parentID'
];
var individualKeys = [];
var vec3Keys = [];
var quatKeys = [];
var colorKeys = [];
window.onload = function() {
if (typeof EventBridge !== 'undefined') {
var stringifiedData = JSON.stringify({
messageType: 'page_loaded'
});
EventBridge.emitWebEvent(
stringifiedData
);
listenForSettingsUpdates();
window.onresize = setGUIWidthToWindowWidth;
} else {
console.log('No event bridge, probably not in interface.');
}
};
function loadGUI() {
//whether or not to autoplace
gui = new dat.GUI({
autoPlace: false
});
//if not autoplacing, put gui in a custom container
if (gui.autoPlace === false) {
var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(gui.domElement);
}
// presets for the GUI itself. a little confusing and import/export is mostly what we want to do at the moment.
// gui.remember(settings);
var keys = _.keys(settings);
_.each(keys, function(key) {
var shouldIgnore = _.contains(keysToIgnore, key);
if (shouldIgnore) {
return;
}
var subKeys = _.keys(settings[key]);
var hasX = _.contains(subKeys, 'x');
var hasY = _.contains(subKeys, 'y');
var hasZ = _.contains(subKeys, 'z');
var hasW = _.contains(subKeys, 'w');
var hasRed = _.contains(subKeys, 'red');
var hasGreen = _.contains(subKeys, 'green');
var hasBlue = _.contains(subKeys, 'blue');
if ((hasX && hasY && hasZ) && hasW === false) {
vec3Keys.push(key);
} else if (hasX && hasY && hasZ && hasW) {
quatKeys.push(key);
} else if (hasRed || hasGreen || hasBlue) {
colorKeys.push(key);
} else {
individualKeys.push(key);
}
});
//alphabetize our keys
individualKeys.sort();
vec3Keys.sort();
quatKeys.sort();
colorKeys.sort();
//add to gui in the order they should appear
gui.add(settings, 'importSettings');
gui.add(settings, 'exportSettings');
addIndividualKeys();
addFolders();
//set the gui width to match the web window width
gui.width = window.innerWidth;
//2-way binding stuff
// if (AUTO_UPDATE) {
// setInterval(manuallyUpdateDisplay, UPDATE_ALL_FREQUENCY);
// registerDOMElementsForListenerBlocking();
// }
}
function addIndividualKeys() {
_.each(individualKeys, function(key) {
//temporary patch for not crashing when this goes below 0
var controller;
if (key.indexOf('emitRate') > -1) {
controller = gui.add(settings, key).min(0);
} else {
controller = gui.add(settings, key);
}
//2-way - need to fix not being able to input exact values if constantly listening
//controller.listen();
//keep track of our controller
controllers.push(controller);
//hook into change events for this gui controller
controller.onChange(function(value) {
// Fires on every change, drag, keypress, etc.
writeDataToInterface(this.property, value);
});
});
}
function addFolders() {
_.each(colorKeys, function(key) {
createColorPicker(key);
});
_.each(vec3Keys, function(key) {
createVec3Folder(key);
});
_.each(quatKeys, function(key) {
createQuatFolder(key);
});
}
function createColorPicker(key) {
var colorObject = settings[key];
var colorArray = convertColorObjectToArray(colorObject);
settings[key] = colorArray;
var controller = gui.addColor(settings, key);
controller.onChange(function(value) {
var obj = {};
obj[key] = convertColorArrayToObject(value);
writeVec3ToInterface(obj);
});
return;
}
function createVec3Folder(category) {
var folder = gui.addFolder(category);
folder.add(settings[category], 'x').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category][this.property] = value;
obj[category].y = settings[category].y;
obj[category].z = settings[category].z;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'y').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category][this.property] = value;
obj[category].z = settings[category].z;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'z').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].y = settings[category].y;
obj[category].x = settings[category].x;
obj[category][this.property] = value;
writeVec3ToInterface(obj);
});
folders.push(folder);
folder.open();
}
function createQuatFolder(category) {
var folder = gui.addFolder(category);
folder.add(settings[category], 'x').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category][this.property] = value;
obj[category].y = settings[category].y;
obj[category].z = settings[category].z;
obj[category].w = settings[category].w;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'y').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category][this.property] = value;
obj[category].z = settings[category].z;
obj[category].w = settings[category].w;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'z').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category].y = settings[category].y;
obj[category][this.property] = value;
obj[category].w = settings[category].w;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'w').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category].y = settings[category].y;
obj[category].z = settings[category].z;
obj[category][this.property] = value;
writeVec3ToInterface(obj);
});
folders.push(folder);
folder.open();
}
function convertColorObjectToArray(colorObject) {
var colorArray = [];
_.each(colorObject, function(singleColor) {
colorArray.push(singleColor);
});
return colorArray;
}
function convertColorArrayToObject(colorArray) {
var colorObject = {
red: colorArray[0],
green: colorArray[1],
blue: colorArray[2]
};
return colorObject;
}
function writeDataToInterface(property, value) {
var data = {};
data[property] = value;
var sendData = {
messageType: "settings_update",
updatedSettings: data
};
var stringifiedData = JSON.stringify(sendData);
EventBridge.emitWebEvent(stringifiedData);
}
function writeVec3ToInterface(obj) {
var sendData = {
messageType: "settings_update",
updatedSettings: obj
};
var stringifiedData = JSON.stringify(sendData);
EventBridge.emitWebEvent(stringifiedData);
}
function listenForSettingsUpdates() {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
//2-way
// if (data.messageType === 'object_update') {
// _.each(data.objectSettings, function(value, key) {
// settings[key] = value;
// });
// }
if (data.messageType === 'initial_settings') {
_.each(data.initialSettings, function(value, key) {
settings[key] = {};
settings[key] = value;
});
loadGUI();
}
});
}
function manuallyUpdateDisplay() {
// Iterate over all controllers
// this is expensive, write a method for indiviudal controllers and use it when the value is different than a cached value, perhaps.
var i;
for (i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
}
function setGUIWidthToWindowWidth() {
if (gui !== null) {
gui.width = window.innerWidth;
}
}
function handleInputKeyPress(e) {
if (e.keyCode === 13) {
importSettings();
}
return false;
}
function importSettings() {
var importInput = document.getElementById('importer-input');
try {
var importedSettings = JSON.parse(importInput.value);
var keys = _.keys(importedSettings);
_.each(keys, function(key) {
var shouldIgnore = _.contains(keysToIgnore, key);
if (shouldIgnore) {
return;
}
settings[key] = importedSettings[key];
});
writeVec3ToInterface(settings);
manuallyUpdateDisplay();
} catch (e) {
alert('Not properly formatted JSON');
}
}
function prepareSettingsForExport() {
var keys = _.keys(settings);
var exportSettings = {};
_.each(keys, function(key) {
var shouldIgnore = _.contains(keysToIgnore, key);
if (shouldIgnore) {
return;
}
if (key.indexOf('color') > -1) {
var colorObject = convertColorArrayToObject(settings[key]);
settings[key] = colorObject;
}
exportSettings[key] = settings[key];
});
return JSON.stringify(exportSettings);
}
function showPreselectedPrompt() {
window.prompt("Ctrl-C to copy, then Enter.", prepareSettingsForExport());
}
function removeContainerDomElement() {
var elem = document.getElementById("my-gui-container");
elem.parentNode.removeChild(elem);
}
function removeListenerFromGUI(key) {
_.each(gui.__listening, function(controller, index) {
if (controller.property === key) {
storedController = controller;
gui.__listening.splice(index, 1);
}
});
}
//the section below is to try to work at achieving two way bindings;
function addListenersBackToGUI() {
gui.__listening.push(storedController);
storedController = null;
}
function registerDOMElementsForListenerBlocking() {
_.each(gui.__controllers, function(controller) {
var input = controller.domElement.childNodes[0];
input.addEventListener('focus', function() {
console.log('INPUT ELEMENT GOT FOCUS!' + controller.property);
removeListenerFromGUI(controller.property);
});
});
_.each(gui.__controllers, function(controller) {
var input = controller.domElement.childNodes[0];
input.addEventListener('blur', function() {
console.log('INPUT ELEMENT GOT BLUR!' + controller.property);
addListenersBackToGUI();
});
});
// also listen to inputs inside of folders
_.each(gui.__folders, function(folder) {
_.each(folder.__controllers, function(controller) {
var input = controller.__input;
input.addEventListener('focus', function() {
console.log('FOLDER ELEMENT GOT FOCUS!' + controller.property);
});
});
});
}

19
examples/particle_explorer/index.html → examples/particle_explorer/particleExplorer.html
View file

@ -1,5 +1,5 @@
<!-- <!--
// main.js // particleExplorer.hml
// //
// //
// Created by James B. Pollack @imgntn on 9/26/2015 // Created by James B. Pollack @imgntn on 9/26/2015
@ -16,7 +16,9 @@
<head> <head>
<script type="text/javascript" src="dat.gui.min.js"></script> <script type="text/javascript" src="dat.gui.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="main.js?123"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="../html/eventBridgeLoader.js"></script>
<script type="text/javascript" src="particleExplorer.js?v42"></script>
<script> <script>
</script> </script>
<style> <style>
@ -33,6 +35,17 @@ body{
.importer{ .importer{
margin-bottom:4px; margin-bottom:4px;
} }
.exported-props-section {
width: 50%;
margin: 0 auto;
}
#exported-props {
/* Set the margin-left and margin-right automatically set */
color: white;
white-space: pre-wrap; /* css-3 */
}
::-webkit-input-placeholder { ::-webkit-input-placeholder {
text-align: center; text-align: center;
@ -50,6 +63,8 @@ body{
<body> <body>
<div class="importer"> <div class="importer">
<input type='text' id="importer-input" placeholder="Import: Paste JSON here." onkeypress="handleInputKeyPress(event)"> <input type='text' id="importer-input" placeholder="Import: Paste JSON here." onkeypress="handleInputKeyPress(event)">
<div class = "exported-props-section">
<div id = "exported-props"></div>
</div> </div>
<div id="my-gui-container"> <div id="my-gui-container">
</div> </div>

628
examples/particle_explorer/particleExplorer.js
View file

@ -2,215 +2,497 @@
// particleExplorer.js // particleExplorer.js
// //
// Created by James B. Pollack @imgntn on 9/26/2015 // Created by James B. Pollack @imgntn on 9/26/2015
// includes setup from @ctrlaltdavid's particlesTest.js
// Copyright 2015 High Fidelity, Inc. // Copyright 2015 High Fidelity, Inc.
// // Web app side of the App - contains GUI.
// Interface side of the App. // This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.
// Quickly edit the aesthetics of a particle system.
// //
// Distributed under the Apache License, Version 2.0. // Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
// //
// next version: 2 way bindings, integrate with edit.js /*global window, alert, EventBridge, dat, listenForSettingsUpdates,createVec3Folder,createQuatFolder,writeVec3ToInterface,writeDataToInterface*/
//
/*global print, WebWindow, MyAvatar, Entities, AnimationCache, SoundCache, Scene, Camera, Overlays, HMD, AvatarList, AvatarManager, Controller, UndoStack, Window, Account, GlobalServices, Script, ScriptDiscoveryService, LODManager, Menu, Vec3, Quat, AudioDevice, Paths, Clipboard, Settings, XMLHttpRequest, randFloat, randInt */
var box, var Settings = function() {
sphere, this.exportSettings = function() {
sphereDimensions = { //copyExportSettingsToClipboard();
x: 0.4, showPreselectedPrompt();
y: 0.8, };
z: 0.2 this.importSettings = function() {
}, importSettings();
pointDimensions = { };
x: 0.0, };
y: 0.0,
z: 0.0
},
sphereOrientation = Quat.fromPitchYawRollDegrees(-60.0, 30.0, 0.0),
verticalOrientation = Quat.fromPitchYawRollDegrees(-90.0, 0.0, 0.0),
particles,
particleExample = -1,
PARTICLE_RADIUS = 0.04,
SLOW_EMIT_RATE = 2.0,
HALF_EMIT_RATE = 50.0,
FAST_EMIT_RATE = 100.0,
SLOW_EMIT_SPEED = 0.025,
FAST_EMIT_SPEED = 1.0,
GRAVITY_EMIT_ACCELERATON = {
x: 0.0,
y: -0.3,
z: 0.0
},
ZERO_EMIT_ACCELERATON = {
x: 0.0,
y: 0.0,
z: 0.0
},
PI = 3.141593,
DEG_TO_RAD = PI / 180.0,
NUM_PARTICLE_EXAMPLES = 18;
var particleProperties; //2-way bindings-aren't quite ready yet. see bottom of file.
var AUTO_UPDATE = false;
var UPDATE_ALL_FREQUENCY = 100;
function setUp() { var controllers = [];
var boxPoint, var colorControllers = [];
spawnPoint; var folders = [];
var gui = null;
var settings = new Settings();
var updateInterval;
boxPoint = Vec3.sum(MyAvatar.position, Vec3.multiply(4.0, Quat.getFront(Camera.getOrientation()))); var currentInputField;
boxPoint = Vec3.sum(boxPoint, { var storedController;
x: 0.0, //CHANGE TO WHITELIST
y: -0.5, var keysToAllow = [
z: 0.0 'isEmitting',
}); 'maxParticles',
spawnPoint = Vec3.sum(boxPoint, { 'lifespan',
x: 0.0, 'emitRate',
y: 1.0, 'emitSpeed',
z: 0.0 'speedSpread',
'emitOrientation',
'emitDimensios',
'emitRadiusStart',
'polarStart',
'polarFinish',
'azimuthFinish',
'emitAcceleration',
'accelerationSpread',
'particleRadius',
'radiusSpread',
'radiusStart',
'radiusFinish',
'color',
'colorSpread',
'colorStart',
'colorFinish',
'alpha',
'alphaSpread',
'alphaStart',
'alphaFinish',
'emitterShouldTrail',
'textures'
];
var individualKeys = [];
var vec3Keys = [];
var quatKeys = [];
var colorKeys = [];
window.onload = function() {
openEventBridge(function() {
var stringifiedData = JSON.stringify({
messageType: 'page_loaded'
}); });
box = Entities.addEntity({ EventBridge.emitWebEvent(
type: "Box", stringifiedData
name: "ParticlesTest Box", );
position: boxPoint,
rotation: verticalOrientation, listenForSettingsUpdates();
dimensions: { window.onresize = setGUIWidthToWindowWidth;
x: 0.3, })
y: 0.3,
z: 0.3 };
},
color: { function loadGUI() {
red: 128, //whether or not to autoplace
green: 128, gui = new dat.GUI({
blue: 128 autoPlace: false
},
lifetime: 3600, // 1 hour; just in case
visible: true
}); });
// Same size and orientation as emitter when ellipsoid. //if not autoplacing, put gui in a custom container
sphere = Entities.addEntity({ if (gui.autoPlace === false) {
type: "Sphere", var customContainer = document.getElementById('my-gui-container');
name: "ParticlesTest Sphere", customContainer.appendChild(gui.domElement);
position: boxPoint, }
rotation: sphereOrientation,
dimensions: sphereDimensions, // presets for the GUI itself. a little confusing and import/export is mostly what we want to do at the moment.
color: { // gui.remember(settings);
red: 128,
green: 128, var keys = _.keys(settings);
blue: 128
}, _.each(keys, function(key) {
lifetime: 3600, // 1 hour; just in case var shouldAllow = _.contains(keysToAllow, key);
visible: false
if (shouldAllow) {
var subKeys = _.keys(settings[key]);
var hasX = _.contains(subKeys, 'x');
var hasY = _.contains(subKeys, 'y');
var hasZ = _.contains(subKeys, 'z');
var hasW = _.contains(subKeys, 'w');
var hasRed = _.contains(subKeys, 'red');
var hasGreen = _.contains(subKeys, 'green');
var hasBlue = _.contains(subKeys, 'blue');
if ((hasX && hasY && hasZ) && hasW === false) {
vec3Keys.push(key);
} else if (hasX && hasY && hasZ && hasW) {
quatKeys.push(key);
} else if (hasRed || hasGreen || hasBlue) {
colorKeys.push(key);
} else {
individualKeys.push(key);
}
}
}); });
// 1.0m above the box or ellipsoid. //alphabetize our keys
particles = Entities.addEntity({ individualKeys.sort();
type: "ParticleEffect", vec3Keys.sort();
name: "ParticlesTest Emitter", quatKeys.sort();
position: spawnPoint, colorKeys.sort();
emitOrientation: verticalOrientation,
particleRadius: PARTICLE_RADIUS, //add to gui in the order they should appear
radiusSpread: 0.0, gui.add(settings, 'importSettings');
emitRate: SLOW_EMIT_RATE, gui.add(settings, 'exportSettings');
emitSpeed: FAST_EMIT_SPEED, addIndividualKeys();
speedSpread: 0.0, addFolders();
emitAcceleration: GRAVITY_EMIT_ACCELERATON,
accelerationSpread: { //set the gui width to match the web window width
x: 0.0, gui.width = window.innerWidth;
y: 0.0,
z: 0.0 //2-way binding stuff
}, // if (AUTO_UPDATE) {
textures: "https://hifi-public.s3.amazonaws.com/alan/Particles/Particle-Sprite-Smoke-1.png", // setInterval(manuallyUpdateDisplay, UPDATE_ALL_FREQUENCY);
color: { // registerDOMElementsForListenerBlocking();
red: 255, // }
green: 255,
blue: 255
},
lifespan: 5.0,
locked: false,
isEmitting: true,
lifetime: 3600 // 1 hour; just in case
});
} }
SettingsWindow = function() { function addIndividualKeys() {
var _this = this; _.each(individualKeys, function(key) {
//temporary patch for not crashing when this goes below 0
var controller;
this.webWindow = null; if (key.indexOf('emitRate') > -1) {
controller = gui.add(settings, key).min(0);
this.init = function() { } else {
Script.update.connect(waitForObjectAuthorization); controller = gui.add(settings, key);
_this.webWindow = new WebWindow('Particle Explorer', Script.resolvePath('index.html'), 400, 600, false);
_this.webWindow.eventBridge.webEventReceived.connect(_this.onWebEventReceived);
};
this.sendData = function(data) {
_this.webWindow.eventBridge.emitScriptEvent(JSON.stringify(data));
};
this.onWebEventReceived = function(data) {
var _data = JSON.parse(data);
if (_data.messageType === 'page_loaded') {
_this.webWindow.setVisible(true);
_this.pageLoaded = true;
sendInitialSettings(particleProperties);
} }
if (_data.messageType === 'settings_update') {
editEntity(_data.updatedSettings); //2-way - need to fix not being able to input exact values if constantly listening
//controller.listen();
//keep track of our controller
controllers.push(controller);
//hook into change events for this gui controller
controller.onChange(function(value) {
// Fires on every change, drag, keypress, etc.
writeDataToInterface(this.property, value);
});
});
}
function addFolders() {
_.each(colorKeys, function(key) {
createColorPicker(key);
});
_.each(vec3Keys, function(key) {
createVec3Folder(key);
});
_.each(quatKeys, function(key) {
createQuatFolder(key);
});
}
function createColorPicker(key) {
var colorObject = settings[key];
var colorArray = convertColorObjectToArray(colorObject);
settings[key] = colorArray;
var controller = gui.addColor(settings, key);
controller.onChange(function(value) {
var obj = {};
obj[key] = convertColorArrayToObject(value);
writeVec3ToInterface(obj);
});
return; return;
} }
}; function createVec3Folder(category) {
var folder = gui.addFolder(category);
folder.add(settings[category], 'x').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category][this.property] = value;
obj[category].y = settings[category].y;
obj[category].z = settings[category].z;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'y').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category][this.property] = value;
obj[category].z = settings[category].z;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'z').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].y = settings[category].y;
obj[category].x = settings[category].x;
obj[category][this.property] = value;
writeVec3ToInterface(obj);
});
folders.push(folder);
folder.open();
}
function createQuatFolder(category) {
var folder = gui.addFolder(category);
folder.add(settings[category], 'x').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category][this.property] = value;
obj[category].y = settings[category].y;
obj[category].z = settings[category].z;
obj[category].w = settings[category].w;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'y').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category][this.property] = value;
obj[category].z = settings[category].z;
obj[category].w = settings[category].w;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'z').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category].y = settings[category].y;
obj[category][this.property] = value;
obj[category].w = settings[category].w;
writeVec3ToInterface(obj);
});
folder.add(settings[category], 'w').step(0.1).onChange(function(value) {
// Fires when a controller loses focus.
var obj = {};
obj[category] = {};
obj[category].x = settings[category].x;
obj[category].y = settings[category].y;
obj[category].z = settings[category].z;
obj[category][this.property] = value;
writeVec3ToInterface(obj);
});
folders.push(folder);
folder.open();
}
function convertColorObjectToArray(colorObject) {
var colorArray = [];
_.each(colorObject, function(singleColor) {
colorArray.push(singleColor);
});
return colorArray;
}
function convertColorArrayToObject(colorArray) {
var colorObject = {
red: colorArray[0],
green: colorArray[1],
blue: colorArray[2]
}; };
function waitForObjectAuthorization() { return colorObject;
var properties = Entities.getEntityProperties(particles, "isKnownID"); }
var isKnownID = properties.isKnownID;
if (isKnownID === false || SettingsWindow.pageLoaded === false) { function writeDataToInterface(property, value) {
var data = {};
data[property] = value;
var sendData = {
messageType: "settings_update",
updatedSettings: data
};
var stringifiedData = JSON.stringify(sendData);
EventBridge.emitWebEvent(stringifiedData);
}
function writeVec3ToInterface(obj) {
var sendData = {
messageType: "settings_update",
updatedSettings: obj
};
var stringifiedData = JSON.stringify(sendData);
EventBridge.emitWebEvent(stringifiedData);
}
function listenForSettingsUpdates() {
EventBridge.scriptEventReceived.connect(function(data) {
data = JSON.parse(data);
if (data.messageType === 'particle_settings') {
_.each(data.currentProperties, function(value, key) {
settings[key] = {};
settings[key] = value;
});
loadGUI();
}
});
}
function manuallyUpdateDisplay() {
// Iterate over all controllers
// this is expensive, write a method for indiviudal controllers and use it when the value is different than a cached value, perhaps.
var i;
for (i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
}
function setGUIWidthToWindowWidth() {
if (gui !== null) {
gui.width = window.innerWidth;
}
}
function handleInputKeyPress(e) {
if (e.keyCode === 13) {
importSettings();
}
return false;
}
function importSettings() {
var importInput = document.getElementById('importer-input');
try {
var importedSettings = JSON.parse(importInput.value);
var keys = _.keys(importedSettings);
_.each(keys, function(key) {
var shouldAllow = _.contains(keysToAllow, key);
if (!shouldAllow) {
return; return;
} }
var currentProperties = Entities.getEntityProperties(particles);
particleProperties = currentProperties; settings[key] = importedSettings[key];
Script.update.connect(sendObjectUpdates); });
Script.update.disconnect(waitForObjectAuthorization);
writeVec3ToInterface(settings);
manuallyUpdateDisplay();
} catch (e) {
alert('Not properly formatted JSON');
}
} }
function sendObjectUpdates() { function prepareSettingsForExport() {
var currentProperties = Entities.getEntityProperties(particles); var keys = _.keys(settings);
sendUpdatedObject(currentProperties);
var exportSettings = {};
_.each(keys, function(key) {
var shouldAllow = _.contains(keysToAllow, key);
if (!shouldAllow) {
return;
} }
function sendInitialSettings(properties) { if (key.indexOf('color') > -1) {
var settings = { var colorObject = convertColorArrayToObject(settings[key]);
messageType: 'initial_settings', settings[key] = colorObject;
initialSettings: properties
};
settingsWindow.sendData(settings);
} }
function sendUpdatedObject(properties) { exportSettings[key] = settings[key];
var settings = { });
messageType: 'object_update',
objectSettings: properties return JSON.stringify(exportSettings, null, 4);
};
settingsWindow.sendData(settings);
} }
function editEntity(properties) { function showPreselectedPrompt() {
Entities.editEntity(particles, properties); var elem = document.getElementById("exported-props");
var exportSettings = prepareSettingsForExport();
elem.innerHTML = "";
var buttonnode= document.createElement('input');
buttonnode.setAttribute('type','button');
buttonnode.setAttribute('value','close');
elem.appendChild(document.createTextNode("COPY THE BELOW FIELD TO CLIPBOARD:"));
elem.appendChild(document.createElement("br"));
var textAreaNode = document.createElement("textarea");
textAreaNode.value = exportSettings;
elem.appendChild(textAreaNode);
elem.appendChild(document.createElement("br"));
elem.appendChild(buttonnode);
buttonnode.onclick = function() {
console.log("click")
elem.innerHTML = "";
} }
function tearDown() { //window.alert("Ctrl-C to copy, then Enter.", prepareSettingsForExport());
Entities.deleteEntity(particles);
Entities.deleteEntity(box);
Entities.deleteEntity(sphere);
Script.update.disconnect(sendObjectUpdates);
} }
var settingsWindow = new SettingsWindow(); function removeContainerDomElement() {
settingsWindow.init(); var elem = document.getElementById("my-gui-container");
setUp(); elem.parentNode.removeChild(elem);
Script.scriptEnding.connect(tearDown); }
function removeListenerFromGUI(key) {
_.each(gui.__listening, function(controller, index) {
if (controller.property === key) {
storedController = controller;
gui.__listening.splice(index, 1);
}
});
}
//the section below is to try to work at achieving two way bindings;
function addListenersBackToGUI() {
gui.__listening.push(storedController);
storedController = null;
}
function registerDOMElementsForListenerBlocking() {
_.each(gui.__controllers, function(controller) {
var input = controller.domElement.childNodes[0];
input.addEventListener('focus', function() {
console.log('INPUT ELEMENT GOT FOCUS!' + controller.property);
removeListenerFromGUI(controller.property);
});
});
_.each(gui.__controllers, function(controller) {
var input = controller.domElement.childNodes[0];
input.addEventListener('blur', function() {
console.log('INPUT ELEMENT GOT BLUR!' + controller.property);
addListenersBackToGUI();
});
});
// also listen to inputs inside of folders
_.each(gui.__folders, function(folder) {
_.each(folder.__controllers, function(controller) {
var input = controller.__input;
input.addEventListener('focus', function() {
console.log('FOLDER ELEMENT GOT FOCUS!' + controller.property);
});
});
});
}

60
examples/particle_explorer/particleExplorerTool.js Normal file
View file

@ -0,0 +1,60 @@
//
// particleExplorerTool.js
//
// Created by Eric Levin on 2/15/16
// Copyright 2016 High Fidelity, Inc.
// Adds particleExplorer tool to the edit panel when a user selects a particle entity from the edit tool window
// This is an example of a new, easy way to do two way bindings between dynamically created GUI and in-world entities.
//
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/*global window, alert, EventBridge, dat, listenForSettingsUpdates,createVec3Folder,createQuatFolder,writeVec3ToInterface,writeDataToInterface*/
var PARTICLE_EXPLORER_HTML_URL = Script.resolvePath('particleExplorer.html');
ParticleExplorerTool = function() {
var that = {};
that.createWebView = function() {
var url = PARTICLE_EXPLORER_HTML_URL;
that.webView = new OverlayWebWindow({
title: 'Particle Explorer',
source: url,
toolWindow: true
});
that.webView.setVisible(true);
that.webView.eventBridge.webEventReceived.connect(that.webEventReceived);
}
that.destroyWebView = function() {
if (!that.webView) {
print("EBL CAN'ZT CLOSE WEB VIEW- IT DOESNT EXISTS!")
return;
}
print("EBL CLOSING WEB VIEW")
that.webView.close();
that.webView = null;
that.activeParticleEntity = 0;
}
that.webEventReceived = function(data) {
var data = JSON.parse(data);
if (data.messageType === "settings_update") {
Entities.editEntity(that.activeParticleEntity, data.updatedSettings);
}
}
that.setActiveParticleEntity = function(id) {
that.activeParticleEntity = id;
}
return that;
};