<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D webgl - geometry - catmull spline editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
font-family:Monospace;
font-size:13px;
text-align:center;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - geometry - catmull spline editor</div>
<script src="../build/v3d.js"></script>
<script src="js/controls/DragControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/TransformControls.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
String.prototype.format = function() {
var str = this;
for (var i = 0; i < arguments.length; i++) {
str = str.replace('{' + i + '}', arguments[i]);
}
return str;
};
var container, stats;
var camera, scene, renderer;
var splineHelperObjects = [];
var splinePointsLength = 4;
var positions = [];
var point = new v3d.Vector3();
var geometry = new v3d.BoxBufferGeometry(20, 20, 20);
var transformControl;
var ARC_SEGMENTS = 200;
var splines = {};
var params = {
uniform: true,
tension: 0.5,
centripetal: true,
chordal: true,
addPoint: addPoint,
removePoint: removePoint,
exportSpline: exportSpline
};
init();
animate();
function init() {
container = document.getElementById('container');
scene = new v3d.Scene();
scene.background = new v3d.Color(0xf0f0f0);
camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 250, 1000);
scene.add(camera);
scene.add(new v3d.AmbientLight(0xf0f0f0));
var light = new v3d.SpotLight(0xffffff, 1.5);
light.position.set(0, 1500, 200);
light.castShadow = true;
light.shadow = new v3d.LightShadow(new v3d.PerspectiveCamera(70, 1, 200, 2000));
light.shadow.bias = - 0.000222;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);
var planeGeometry = new v3d.PlaneBufferGeometry(2000, 2000);
planeGeometry.rotateX(- Math.PI / 2);
var planeMaterial = new v3d.ShadowMaterial({ opacity: 0.2 });
var plane = new v3d.Mesh(planeGeometry, planeMaterial);
plane.position.y = - 200;
plane.receiveShadow = true;
scene.add(plane);
var helper = new v3d.GridHelper(2000, 100);
helper.position.y = - 199;
helper.material.opacity = 0.25;
helper.material.transparent = true;
scene.add(helper);
//var axes = new v3d.AxesHelper(1000);
//axes.position.set(- 500, - 500, - 500);
//scene.add(axes);
renderer = new v3d.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);
stats = new Stats();
container.appendChild(stats.dom);
var gui = new dat.GUI();
gui.add(params, 'uniform');
gui.add(params, 'tension', 0, 1).step(0.01).onChange(function(value) {
splines.uniform.tension = value;
updateSplineOutline();
});
gui.add(params, 'centripetal');
gui.add(params, 'chordal');
gui.add(params, 'addPoint');
gui.add(params, 'removePoint');
gui.add(params, 'exportSpline');
gui.open();
// Controls
var controls = new v3d.OrbitControls(camera, renderer.domElement);
controls.damping = 0.2;
controls.addEventListener('change', render);
controls.addEventListener('start', function() {
cancelHideTransorm();
});
controls.addEventListener('end', function() {
delayHideTransform();
});
transformControl = new v3d.TransformControls(camera, renderer.domElement);
transformControl.addEventListener('change', render);
transformControl.addEventListener('dragging-changed', function(event) {
controls.enabled = ! event.value;
});
scene.add(transformControl);
// Hiding transform situation is a little in a mess :()
transformControl.addEventListener('change', function() {
cancelHideTransorm();
});
transformControl.addEventListener('mouseDown', function() {
cancelHideTransorm();
});
transformControl.addEventListener('mouseUp', function() {
delayHideTransform();
});
transformControl.addEventListener('objectChange', function() {
updateSplineOutline();
});
var dragcontrols = new v3d.DragControls(splineHelperObjects, camera, renderer.domElement); //
dragcontrols.enabled = false;
dragcontrols.addEventListener('hoveron', function(event) {
transformControl.attach(event.object);
cancelHideTransorm();
});
dragcontrols.addEventListener('hoveroff', function() {
delayHideTransform();
});
var hiding;
function delayHideTransform() {
cancelHideTransorm();
hideTransform();
}
function hideTransform() {
hiding = setTimeout(function() {
transformControl.detach(transformControl.object);
}, 2500);
}
function cancelHideTransorm() {
if (hiding) clearTimeout(hiding);
}
/*******
* Curves
*********/
for (var i = 0; i < splinePointsLength; i++) {
addSplineObject(positions[i]);
}
positions = [];
for (var i = 0; i < splinePointsLength; i++) {
positions.push(splineHelperObjects[i].position);
}
var geometry = new v3d.BufferGeometry();
geometry.addAttribute('position', new v3d.BufferAttribute(new Float32Array(ARC_SEGMENTS * 3), 3));
var curve = new v3d.CatmullRomCurve3(positions);
curve.curveType = 'catmullrom';
curve.mesh = new v3d.Line(geometry.clone(), new v3d.LineBasicMaterial({
color: 0xff0000,
opacity: 0.35
}));
curve.mesh.castShadow = true;
splines.uniform = curve;
curve = new v3d.CatmullRomCurve3(positions);
curve.curveType = 'centripetal';
curve.mesh = new v3d.Line(geometry.clone(), new v3d.LineBasicMaterial({
color: 0x00ff00,
opacity: 0.35
}));
curve.mesh.castShadow = true;
splines.centripetal = curve;
curve = new v3d.CatmullRomCurve3(positions);
curve.curveType = 'chordal';
curve.mesh = new v3d.Line(geometry.clone(), new v3d.LineBasicMaterial({
color: 0x0000ff,
opacity: 0.35
}));
curve.mesh.castShadow = true;
splines.chordal = curve;
for (var k in splines) {
var spline = splines[k];
scene.add(spline.mesh);
}
load([new v3d.Vector3(289.76843686945404, 452.51481137238443, 56.10018915737797),
new v3d.Vector3(- 53.56300074753207, 171.49711742836848, - 14.495472686253045),
new v3d.Vector3(- 91.40118730204415, 176.4306956436485, - 6.958271935582161),
new v3d.Vector3(- 383.785318791128, 491.1365363371675, 47.869296953772746)]);
}
function addSplineObject(position) {
var material = new v3d.MeshLambertMaterial({ color: Math.random() * 0xffffff });
var object = new v3d.Mesh(geometry, material);
if (position) {
object.position.copy(position);
} else {
object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 600;
object.position.z = Math.random() * 800 - 400;
}
object.castShadow = true;
object.receiveShadow = true;
scene.add(object);
splineHelperObjects.push(object);
return object;
}
function addPoint() {
splinePointsLength ++;
positions.push(addSplineObject().position);
updateSplineOutline();
}
function removePoint() {
if (splinePointsLength <= 4) {
return;
}
splinePointsLength --;
positions.pop();
scene.remove(splineHelperObjects.pop());
updateSplineOutline();
}
function updateSplineOutline() {
for (var k in splines) {
var spline = splines[k];
var splineMesh = spline.mesh;
var position = splineMesh.geometry.attributes.position;
for (var i = 0; i < ARC_SEGMENTS; i++) {
var t = i / (ARC_SEGMENTS - 1);
spline.getPoint(t, point);
position.setXYZ(i, point.x, point.y, point.z);
}
position.needsUpdate = true;
}
}
function exportSpline() {
var strplace = [];
for (var i = 0; i < splinePointsLength; i++) {
var p = splineHelperObjects[i].position;
strplace.push('new v3d.Vector3({0}, {1}, {2})'.format(p.x, p.y, p.z));
}
console.log(strplace.join(',\n'));
var code = '[' + (strplace.join(',\n\t')) + ']';
prompt('copy and paste code', code);
}
function load(new_positions) {
while (new_positions.length > positions.length) {
addPoint();
}
while (new_positions.length < positions.length) {
removePoint();
}
for (var i = 0; i < positions.length; i++) {
positions[i].copy(new_positions[i]);
}
updateSplineOutline();
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
splines.uniform.mesh.visible = params.uniform;
splines.centripetal.mesh.visible = params.centripetal;
splines.chordal.mesh.visible = params.chordal;
renderer.render(scene, camera);
}
</script>
</body>
</html>
- A Detailed Look at Oculus Utilities for Unity
- about
- argos.vu
- contact us
- DevNotes – Archive – 3-15-17 Back
- Electric Tours Dinosaur Colorado
- Free Form Deformation
- Funding Research
- Gallery_One
- harmonic resonance
- Jim’esque Simulation Details
- PitchDeck
- Plasma Dynamics
- points of interest
- Raw Materials
- Rudolph Steiner
- TetraWaveForm
- Volo Meeting 12-11-2018
- VRARA
- WEBFLOW TEMPLATES
- development videos
- development notes
- argosSphere nav table
- devNotes 3-16-16 hex map seam
- devNotes 3-21-16 cursor & hex addressing
- devNotes 3-22-16 cursor & hex addressing
- devNotes 3-23-16 cursor design
- devNotes 3-24-16 cursor design
- devNotes 3-25-16 paint_track – paintList_track – movement recording
- devNotes 3-26-16 unoShader unlit – unity online conference
- devNotes 3-27-16 path recording – spline continuity and net spawning
- devNotes 3-28-16 networking – NetworkTransform – Player Objects – NetworkBehaviour
- devNotes 3-29-16 networking – Setting up a Multiplayer Project
- devNotes 3-30-16 networking – Parenting netCamera – netCamMove code
- devNotes 3-31-16 networking remote client
- devNotes 4-01-16 networking remote testing
- devNotes 4-02-16 networking netMove states – Cmd from client
- devNotes 4-03-16 networking – front end UI – prepare for testing
- devNotes 4-04-16 minApp – targeting & timed performance – as list
- devNotes 4-05-16 pcg utilities – quad spawning – tween – elastic
- devNotes 4-06-16 elastic slerp – quaternion tweens overshoot
- devNotes 4-07-16 slerpspergsburg unclamped
- devNotes 4-08-16 adb – code for ui netManager – 3rd geometry layer
- devNotes 4-09-16 circle lattice packing
- devNotes 4-10-16 goldberg polyhedra construction and addressing
- devNotes 4-11-2016 ico-sphere projection mapping – audio sample
- devNotes 4-12-16 Spherical Mapping – Audio Xurious
- devNotes 4-13-16 quaternion mesh tile matching
- devNotes 4-14-16 tile matching and scaling – multum in parvo
- devNotes 4-15-16 triangle grading – Voronoi cells and Delaunay triangulation
- devNotes 4-16-16 instancing tethered masses with radial repelling forces
- devNotes 4-17-16 triangle center quality – point in given cell
- devNotes 4-18-16 triangle center quality – projections to/from the uv plane
- devNotes 4-19-16 tcq – unit testing – 2D rotator
- devNotes 4-20-16 tcq – unit testing continued
- devNotes 4-21-16 tcq implementation – hex mapping and indexing
- devNotes 4-22-16 hex generation using subdivision
- devNotes 4-23-16 hex alignment and placement
- devNotes 4-24-16 build hexagons from veronoi positions
- devNotes 4-25-16 voronoi position list and data structure
- devNotes 4-26-16 fibonacci voronoi position list nb direction ordering
- devNotes 4-27-16 fibonacci nodes – triangulation and meshing
- devNotes 4-28-16 ArgosFibonacci.cs – quad cells – indexing and tweening
- devNotes 4-29-16 ArgosFibonacci.cs – iTween Callbacks
- devNotes 4-30-16 ArgosFibonacci.cs – iTween driven quaternion lerp
- devNotes 5-01-16 fibo Begin the Beguine
- devNotes 5-02-16 foriero – sequencer
- devNotes 5-03-16 midi specs, delegates and events
- devNotes 5-04-16 midi events – animations – procrustean
- devNotes 5-05-16 video project 1
- devNotes 5-07-16 icosahedral projection
- devNotes 5-07-16 phasor on icoplane
- devNotes 5-08-16 dotProduct gatherings
- devNotes 5-09-16 events, vizEls and spinerettes
- devNotes 5-10-16 patterns, particle system internals, crossfades
- devNotes 5-11-16 path follow, koreographer & theme
- devNotes 5-12-16 scrubber, event editing and composition
- devNotes 5-13-16 timing, events and tweening
- devNotes 5-14-16 navigation, particles and time tweens
- devNotes 5-15-16 particles, instantiation, fibRider and tweening
- devNotes 5-16-16 timed tweens, visual flow and particle dynamics
- devNotes 5-17-16 particle system positioning, world space and ps threading
- devNotes 5-18-16 detail, precision, focus, rigor in the vigor
- devNotes 5-19-16 three tier workflow – particle system foundry
- devNotes 5-20-16 lines, fills and fibonacci
- devNotes 5-21-16 code review, app design and sound painting
- devNotes 5-22-16 topologies, voronoi baking
- devNotes 5-23-16 sound visualization, particle system instances, pivot rotations
- devNotes 5-24-16 Argos Brush, List performance, subFrame tweens
- devNotes 5-25-2016 GPU instancing, audio echo, list processing
- devNotes 5-26-16 quad pool, object reuse, memory management
- devNotes 5-27-16 sound processing, alignment and generation
- devNotes 5-28-16 sound generation, audio processing, harmonizer
- devNotes 5-29-16 Mic input, processing and recording
- devNotes 5-30-16 onFilterRead, windowing and FFTs
- devNotes 5-31-16 fundamental lock, voice tracking, harmonizing
- devNotes 6-01-16 Vuforia 5.5 base, gearVR and performance evaluation
- devNotes 6-02-16 AR sample, ARM performance and debug
- devNotes 6-03-16 native vuforia app structure, dev UI, look and feel
- devNotes 6-04-16 orientation, navigation, gyro, compass raw vector
- devNotes 6-05-16 android UI, handheld AR, Argos VU
- devNotes 6-06-16 GearVR pipeline, micInput, audio compression
- devNotes 6-07-16 audio latency, GearVR ui and mobile testing
- devNotes 6-08-16 texture writing, echo buffer performance, multi tracking
- devNotes 6-09-16 GearVR UI, Argos Sphere Indexing, AR UI Interactions
- devNotes 6-10-16 CLJ AR/VR composition, refinement, integrity
- devNotes 6-11-16 GearVR interface, parameter adjustment settings file, movement
- devNotes 6-12-16 VR lab, sound and partSys interfaces
- devNotes 6-13-16 echo interface, argos meshDraft levels, vertical processing
- devNotes 6-14-16 echo editor ui, argos mesh draft, phi
- devNotes 6-15-16 Sound Plot, Circular buffer, Echo Processing
- devNotes 6-16-16 pipeline back to vr, movement, sphere cursor
- devNotes 6-17-16 GearVR UI work, user movement and navigation
- devNotes 6-18-16 UI GearVR, devPipeline, radial menus
- devNotes 6-19-16 navigation into sphere, HUD, user experience
- devNotes 6-20-16 modal menu cycling, scroll plate, tap tap tap
- devNotes 6-21-16 json, scriptable objects, trackable movement, timing and placement
- devNotes 6-22-16 cursor swap, tool selection, editor functions
- devNotes 6-23-16 AR-VR transitions, singleton manager, ui modal dialog
- devNotes 6-24-16 OVR cursor canvas interaction – transitions – triggers
- devNotes 6-25-16 ioc – amvcc or application-model-view-controller-component
- devNotes 6-26-16 fsm mvc ui Trygve Reenskaug
- devNotes 6-27-16 mvc structure ui interaction
- devNotes 6-28-16 cursor ui interaction – sphere gaze intersection – cursor state
- devNotes 6-29-16 navigation UI state cursor follow
- devNotes 6/30/16 GearVR testing navigation sphere cursor states
- devNotes 7-01-16 sphere interaction cursor states voronoi
- devNotes 7-02-16 navigation OVR Camera rig movement
- devNotes 7-03-16 ui interaction navigation message processing
- devNotes 7-04-16 accordion 3d button selector – movement – sound follow
- devNotes 7-05-16 utility ui, survey, tools, json
- devNotes 7-06-16 MVC hierarchy, persistent storage, reload preferences
- devNotes 7-07-16 galaxy 7 usb debug – performance – initial tests
- devNotes 7-08-16 adb debug workflow
- dj ar initial
- cursor work
- The EU
- phi five alpha omega
- art forms in nature
- packings
- rendering pipeline and shaders
- manuals
- music
- news
- tango devNotes