public void ToOriginal()
{
position.copy(original);
previous.copy(original);
acc.set(0, 0, 0);
}
void onDocumentMouseDown(Event arg)
{
if (!IsActive)
{
return;
}
MouseEvent e = arg.As <MouseEvent>();
e.PreventDefault();
THREE.Vector3 vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
THREE.Intersection[] intersects = raycaster.intersectObjects(allObjects);
if (intersects.Length > 0)
{
THREE.Intersection interSec = intersects[0];
THREE.Mesh m = interSec.Object as THREE.Mesh;
if (m != null)
{
controls.enabled = false;
selected = m;
intersects = raycaster.intersectObject(plane);
offset.copy(interSec.point).sub(plane.position);
Container.Style.Cursor = Cursor.Move;
}
}
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page = null)
{
// 20140704 no balls shown?
// broken?
// view-source:http://www.mrdoob.com/lab/javascript/beachballs/
//Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
var origin = new THREE.Vector3(0, 15, 0);
var isMouseDown = false;
var renderer = new THREE.WebGLRenderer(
new
{
antialias = true,
alpha = false
});
renderer.setClearColor(new THREE.Color(0x101010));
renderer.domElement.AttachToDocument();
// scene
var camera = new THREE.PerspectiveCamera(
40,
Native.window.aspect, 1,
1000
);
camera.position.x = -30;
camera.position.y = 10;
camera.position.z = 30;
camera.lookAt(new THREE.Vector3(0, 10, 0));
#region AtResize
Action AtResize = delegate
{
camera.aspect = (double)Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
var scene = new THREE.Scene();
var light = new THREE.HemisphereLight(0xffffff, 0x606060, 1.2);
light.position.set(-10, 10, 10);
scene.add(light);
{
var geometry = new THREE.CubeGeometry(20, 20, 20);
var material = new THREE.MeshBasicMaterial(
new { wireframe = true, opacity = 0.1, transparent = true });
var mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 10;
scene.add(mesh);
}
var intersectionPlane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20, 8, 8));
intersectionPlane.position.y = 10;
intersectionPlane.visible = false;
scene.add(intersectionPlane);
// geometry
var ballGeometry = new THREE.Geometry();
var ballMaterial = new THREE.MeshPhongMaterial(
new __MeshPhongMaterialDictionary
{
vertexColors = THREE.FaceColors,
specular = 0x808080,
shininess = 2000
}
);
//
var colors = new[] {
new THREE.Color( 0xe52b30 ),
new THREE.Color( 0xe52b30 ),
new THREE.Color( 0x2e1b6a ),
new THREE.Color( 0xdac461 ),
new THREE.Color( 0xf07017 ),
new THREE.Color( 0x38b394 ),
new THREE.Color( 0xeaf1f7 )
};
var amount = colors.Length;
var geometryTop = new THREE.SphereGeometry(1, 5 * amount, 2, 0, Math.PI * 2.0, 0, 0.30);
for (var j = 0; j < geometryTop.faces.Length; j++)
{
geometryTop.faces[j].color = colors[0];
}
THREE.GeometryUtils.merge(ballGeometry, geometryTop);
var geometryBottom = new THREE.SphereGeometry(1, 5 * amount, 2, 0, Math.PI * 2, Math.PI - 0.30, 0.30);
for (var j = 0; j < geometryBottom.faces.Length; j++)
{
geometryBottom.faces[j].color = colors[0];
}
THREE.GeometryUtils.merge(ballGeometry, geometryBottom);
{
var sides = amount - 1;
var size = (Math.PI * 2) / sides;
for (var i = 0; i < sides; i++)
{
var patch = new THREE.SphereGeometry(1, 5, 10, i * size, size, 0.30, Math.PI - 0.60);
for (var j = 0; j < patch.faces.Length; j++)
{
patch.faces[j].color = colors[i + 1];
}
THREE.GeometryUtils.merge(ballGeometry, patch);
}
}
// physics
var world = new CANNON.World();
world.broadphase = new CANNON.NaiveBroadphase();
world.gravity.set(0, -15, 0);
world.solver.iterations = 7;
world.solver.tolerance = 0.1;
var groundShape = new CANNON.Plane();
var groundMaterial = new CANNON.Material();
var groundBody = new CANNON.RigidBody(0, groundShape, groundMaterial);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2.0);
world.add(groundBody);
var planeShapeXmin = new CANNON.Plane();
var planeXmin = new CANNON.RigidBody(0, planeShapeXmin, groundMaterial);
planeXmin.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2.0);
planeXmin.position.set(-10, 0, 0);
world.add(planeXmin);
var planeShapeXmax = new CANNON.Plane();
var planeXmax = new CANNON.RigidBody(0, planeShapeXmax, groundMaterial);
planeXmax.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), -Math.PI / 2.0);
planeXmax.position.set(10, 0, 0);
world.add(planeXmax);
var planeShapeYmin = new CANNON.Plane();
var planeZmin = new CANNON.RigidBody(0, planeShapeYmin, groundMaterial);
planeZmin.position.set(0, 0, -10);
world.add(planeZmin);
var planeShapeYmax = new CANNON.Plane();
var planeZmax = new CANNON.RigidBody(0, planeShapeYmax, groundMaterial);
planeZmax.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI);
planeZmax.position.set(0, 0, 10);
world.add(planeZmax);
var ballBodyMaterial = new CANNON.Material();
world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, ballBodyMaterial, 0.2, 0.5));
world.addContactMaterial(new CANNON.ContactMaterial(ballBodyMaterial, ballBodyMaterial, 0.2, 0.8));
var spheres = new Queue<THREE.Mesh>();
var bodies = new Queue<CANNON.RigidBody>();
Func<double> random = new Random().NextDouble;
#region addBall
Action<double, double, double> addBall = (x, y, z) =>
{
x = Math.Max(-10, Math.Min(10, x));
y = Math.Max(5, y);
z = Math.Max(-10, Math.Min(10, z));
var size = 1.25;
var sphere = new THREE.Mesh(ballGeometry, ballMaterial);
sphere.scale.multiplyScalar(size);
//sphere.useQuaternion = true;
scene.add(sphere);
spheres.Enqueue(sphere);
var sphereShape = new CANNON.Sphere(size);
var sphereBody = new CANNON.RigidBody(0.1, sphereShape, ballBodyMaterial);
sphereBody.position.set(x, y, z);
var q = new
{
a = random() * 3.0,
b = random() * 3.0,
c = random() * 3.0,
d = random() * 3.0
};
Console.WriteLine("addBall " + new { x, y, z, q });
//sphereBody.quaternion.set(q.a, q.b, q.c, q.d);
world.add(sphereBody);
bodies.Enqueue(sphereBody);
};
#endregion
for (var i = 0; i < 100; i++)
{
addBall(
random() * 10 - 5,
random() * 20,
random() * 10 - 5
);
}
//
var projector = new THREE.Projector();
var ray = new THREE.Raycaster();
var mouse3D = new THREE.Vector3();
Native.Document.body.ontouchstart +=
e =>
{
e.preventDefault();
isMouseDown = true;
};
Native.Document.body.ontouchmove +=
e =>
{
e.preventDefault();
};
Native.Document.body.ontouchend +=
e =>
{
e.preventDefault();
isMouseDown = false;
};
#region onmousemove
Native.document.body.onmousedown +=
e =>
{
e.preventDefault();
isMouseDown = true;
};
Native.document.body.onmouseup +=
e =>
{
e.preventDefault();
isMouseDown = false;
if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
{
if (Native.Document.pointerLockElement == Native.Document.body)
{
// cant requestFullscreen while pointerLockElement
Console.WriteLine("exitPointerLock");
Native.Document.exitPointerLock();
Native.Document.exitFullscreen();
return;
}
Console.WriteLine("requestFullscreen");
Native.Document.body.requestFullscreen();
Native.Document.body.requestPointerLock();
return;
}
};
Native.document.body.onmousemove +=
e =>
{
mouse3D.set(
((double)e.CursorX / (double)Native.window.Width) * 2 - 1,
-((double)e.CursorY / (double)Native.window.Height) * 2 + 1,
0.5
);
projector.unprojectVector(mouse3D, camera);
ray.set(camera.position, mouse3D.sub(camera.position).normalize());
var intersects = ray.intersectObject(intersectionPlane);
if (intersects.Length > 0)
{
origin.copy(intersects[0].point);
}
};
#endregion
#region removeBall
Action removeBall = delegate
{
scene.remove(spheres.Dequeue());
world.remove(bodies.Dequeue());
};
#endregion
var sw0 = Stopwatch.StartNew();
var sw = Stopwatch.StartNew();
//var time = Native.window.performance.now();
//var lastTime = Native.window.performance.now();
#region animate
Action render =
delegate
{
var delta = sw.ElapsedMilliseconds;
sw.Restart();
//time = Native.window.performance.now();
camera.position.x = -Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 40;
camera.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 40;
camera.lookAt(new THREE.Vector3(0, 10, 0));
intersectionPlane.lookAt(camera.position);
world.step(delta * 0.001);
//lastTime = time;
for (var i = 0; i < spheres.Count; i++)
{
var sphere = spheres.ElementAt(i);
var body = bodies.ElementAt(i);
sphere.position.copy(body.position);
sphere.quaternion.copy(body.quaternion);
}
renderer.render(scene, camera);
};
Native.window.onframe += delegate
{
if (isMouseDown)
{
if (spheres.Count > 200)
{
removeBall();
}
addBall(
origin.x + (random() * 4.0 - 2),
origin.y + (random() * 4.0 - 2),
origin.z + (random() * 4.0 - 2)
);
}
render();
};
#endregion
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://threejs.org/examples/#webgl_postprocessing_godrays
// view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var sunPosition = new THREE.Vector3(0, 1000, -1000);
var screenSpacePosition = new THREE.Vector3();
var mouseX = 0;
var mouseY = 0;
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
//var postprocessing = { enabled : true };
var orbitRadius = 200;
var bgColor = 0x000511;
var sunColor = 0xffee00;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
//
var materialDepth = new THREE.MeshDepthMaterial(new { });
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var loader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
loader.load(
new Models.tree().Content.src,
new Action <THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
// sphere
var geo = new THREE.SphereGeometry(1, 20, 10);
var sphereMesh = new THREE.Mesh(geo, materialScene);
var sc = 20;
sphereMesh.scale.set(sc, sc, sc);
scene.add(sphereMesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setClearColor(bgColor);
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.autoClear = false;
renderer.sortObjects = false;
var postprocessing_scene = new THREE.Scene();
var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000);
postprocessing_camera.position.z = 100;
postprocessing_scene.add(postprocessing_camera);
var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat };
var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
// investigate further for now.
// pars.format = THREE.LuminanceFormat;
// I would have this quarter size and use it as one of the ping-pong render
// targets but the aliasing causes some temporal flickering
var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Aggressive downsize god-ray ping-pong render targets to minimize cost
var w = Native.window.Width / 4;
var h = Native.window.Height / 4;
var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars);
var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars);
// god-ray shaders
// X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl
// these are special <script src="js/ShaderGodRays.js"></script>
var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic;
var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms);
var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayGenUniforms,
vertexShader = godraysGenShader.vertexShader,
fragmentShader = godraysGenShader.fragmentShader
});
var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic;
var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms);
var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayCombineUniforms,
vertexShader = godraysCombineShader.vertexShader,
fragmentShader = godraysCombineShader.fragmentShader
});
var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic;
var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms);
var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godraysFakeSunUniforms,
vertexShader = godraysFakeSunShader.vertexShader,
fragmentShader = godraysFakeSunShader.fragmentShader
});
postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor);
postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor);
postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75;
var postprocessing_quad = new THREE.Mesh(
new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height),
postprocessing_materialGodraysGenerate
);
postprocessing_quad.position.z = -9900;
postprocessing_scene.add(postprocessing_quad);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
//var planeMaterial = new THREE.MeshLambertMaterial(
// new
// {
// //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src),
// color = 0xA26D41
// //color = 0xff0000
// }
//);
//planeMaterial.map.repeat.x = 300;
//planeMaterial.map.repeat.y = 300;
//planeMaterial.map.wrapS = THREE.RepeatWrapping;
//planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.position.y = -.5f * 100;
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
//scene.add(parent);
}
var random = new Random();
var meshArray = new List <THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region Comanche
new Comanche().Source.Task.ContinueWithResult(
Comanche =>
{
Comanche.position.y = 200;
//dae.position.z = 280;
Comanche.AttachTo(scene);
//scene.add(dae);
//oo.Add(Comanche);
// wont do it
//dae.castShadow = true;
// http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
//var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
//helper.update();
//// If you want a visible bounding box
//scene.add(helper);
Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
Comanche.scale.set(0.5, 0.5, 0.5);
//helper.scale.set(0.5, 0.5, 0.5);
var s2w = Stopwatch.StartNew();
Native.window.onframe += delegate
{
//dae.children[0].children[0].children.Last().al
//dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
//dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
//rotation.y = sw.ElapsedMilliseconds * 0.01;
Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001;
//dae.children[0].children[0].children.Last().app
};
}
);
#endregion
var sw = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// Show Details Severity Code Description Project File Line
//Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238
Native.window.onframe +=
delegate
{
//var time = IDate.now() / 4000;
var time = sw.ElapsedMilliseconds / 4000.0;
sphereMesh.position.x = orbitRadius * Math.Cos(time);
sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100;
//controls.center.copy(blendMesh.position);
//controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position.x += (mouseX - camera.position.x) * 0.036;
//camera.position.y += (-(mouseY) - camera.position.y) * 0.036;
//camera.lookAt(scene.position);
// Find the screenspace position of the sun
screenSpacePosition.copy(sunPosition).project(camera);
screenSpacePosition.x = (screenSpacePosition.x + 1) / 2;
screenSpacePosition.y = (screenSpacePosition.y + 1) / 2;
// Give it to the god-ray and sun shaders
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
// -- Draw sky and sun --
// Clear colors and depths, will clear to sky color
renderer.clearTarget(postprocessing_rtTextureColors, true, true, false);
// Sun render. Runs a shader that gives a brightness based on the screen
// space distance to the sun. Not very efficient, so i make a scissor
// rectangle around the suns position to avoid rendering surrounding pixels.
var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader
var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected
screenSpacePosition.x *= Native.window.Width;
screenSpacePosition.y *= Native.window.Height;
renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH);
renderer.enableScissorTest(true);
postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors);
renderer.enableScissorTest(false);
// -- Draw scene objects --
// Colors
scene.overrideMaterial = null;
renderer.render(scene, camera, postprocessing_rtTextureColors);
// Depth
scene.overrideMaterial = materialDepth;
renderer.render(scene, camera, postprocessing_rtTextureDepth, true);
// -- Render god-rays --
// Maximum length of god-rays (in texture space [0,1]X[0,1])
var filterLen = 1.0;
// Samples taken by filter
var TAPS_PER_PASS = 6.0;
// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
// would start with a small filter support and grow to large. however
// the large-to-small order produces less objectionable aliasing artifacts that
// appear as a glimmer along the length of the beams
// pass 1 - render into first ping-pong target
var pass = 1.0;
var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// pass 2 - render into second ping-pong target
pass = 2.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1);
// pass 3 - 1st RT
pass = 3.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// final pass - composite god-rays onto colors
postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors;
postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine;
renderer.render(postprocessing_scene, postprocessing_camera);
postprocessing_scene.overrideMaterial = null;
};
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IApp page)
{
// http://threejs.org/examples/#webgl_postprocessing_godrays
// view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var sunPosition = new THREE.Vector3(0, 1000, -1000);
var screenSpacePosition = new THREE.Vector3();
var mouseX = 0;
var mouseY = 0;
var windowHalfX = Native.window.Width / 2;
var windowHalfY = Native.window.Height / 2;
//var postprocessing = { enabled : true };
var orbitRadius = 200;
var bgColor = 0x000511;
var sunColor = 0xffee00;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
//
var materialDepth = new THREE.MeshDepthMaterial(new { });
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var loader = new THREE.JSONLoader();
// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
//System.Runtime.CompilerServices.DynamicAttribute
loader.load(
new Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
// sphere
var geo = new THREE.SphereGeometry(1, 20, 10);
var sphereMesh = new THREE.Mesh(geo, materialScene);
var sc = 20;
sphereMesh.scale.set(sc, sc, sc);
scene.add(sphereMesh);
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setClearColor(bgColor);
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.autoClear = false;
renderer.sortObjects = false;
var postprocessing_scene = new THREE.Scene();
var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000);
postprocessing_camera.position.z = 100;
postprocessing_scene.add(postprocessing_camera);
var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat };
var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
// investigate further for now.
// pars.format = THREE.LuminanceFormat;
// I would have this quarter size and use it as one of the ping-pong render
// targets but the aliasing causes some temporal flickering
var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars);
// Aggressive downsize god-ray ping-pong render targets to minimize cost
var w = Native.window.Width / 4;
var h = Native.window.Height / 4;
var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars);
var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars);
// god-ray shaders
// X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl
// these are special <script src="js/ShaderGodRays.js"></script>
var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic;
var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms);
var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayGenUniforms,
vertexShader = godraysGenShader.vertexShader,
fragmentShader = godraysGenShader.fragmentShader
});
var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic;
var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms);
var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godrayCombineUniforms,
vertexShader = godraysCombineShader.vertexShader,
fragmentShader = godraysCombineShader.fragmentShader
});
var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic;
var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms);
var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new
{
uniforms = postprocessing_godraysFakeSunUniforms,
vertexShader = godraysFakeSunShader.vertexShader,
fragmentShader = godraysFakeSunShader.fragmentShader
});
postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor);
postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor);
postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75;
var postprocessing_quad = new THREE.Mesh(
new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height),
postprocessing_materialGodraysGenerate
);
postprocessing_quad.position.z = -9900;
postprocessing_scene.add(postprocessing_quad);
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
//var planeMaterial = new THREE.MeshLambertMaterial(
// new
// {
// //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src),
// color = 0xA26D41
// //color = 0xff0000
// }
//);
//planeMaterial.map.repeat.x = 300;
//planeMaterial.map.repeat.y = 300;
//planeMaterial.map.wrapS = THREE.RepeatWrapping;
//planeMaterial.map.wrapT = THREE.RepeatWrapping;
var plane = new THREE.Mesh(planeGeometry,
new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
);
plane.castShadow = false;
plane.receiveShadow = true;
{
var parent = new THREE.Object3D();
parent.add(plane);
parent.position.y = -.5f * 100;
parent.rotation.x = -Math.PI / 2;
parent.scale.set(100, 100, 100);
//scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
for (var i = 1; i < 100; i++)
{
//THREE.MeshPhongMaterial
var ii = new THREE.Mesh(geometry,
new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshLambertMaterial(
//new
//{
// color = (Convert.ToInt32(0xffffff * random.NextDouble())),
// specular = 0xffaaaa,
// ambient= 0x050505,
//})
);
ii.position.x = i % 2 * 500 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 400;
ii.castShadow = true;
ii.receiveShadow = true;
//ii.scale.set(100, 100, 100 * i);
ii.scale.set(100, 100 * i, 100);
meshArray.Add(ii);
scene.add(ii);
}
#endregion
#region Comanche
new Comanche().Source.Task.ContinueWithResult(
Comanche =>
{
Comanche.position.y = 200;
//dae.position.z = 280;
Comanche.AttachTo(scene);
//scene.add(dae);
//oo.Add(Comanche);
// wont do it
//dae.castShadow = true;
// http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
//var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
//helper.update();
//// If you want a visible bounding box
//scene.add(helper);
Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
Comanche.scale.set(0.5, 0.5, 0.5);
//helper.scale.set(0.5, 0.5, 0.5);
var s2w = Stopwatch.StartNew();
Native.window.onframe += delegate
{
//dae.children[0].children[0].children.Last().al
//dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
//dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
//rotation.y = sw.ElapsedMilliseconds * 0.01;
Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001;
//dae.children[0].children[0].children.Last().app
};
}
);
#endregion
var sw = Stopwatch.StartNew();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// Show Details Severity Code Description Project File Line
//Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238
Native.window.onframe +=
delegate
{
//var time = IDate.now() / 4000;
var time = sw.ElapsedMilliseconds / 4000.0;
sphereMesh.position.x = orbitRadius * Math.Cos(time);
sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100;
//controls.center.copy(blendMesh.position);
//controls.center.y += radius * 2.0;
controls.update();
//var camOffset = camera.position.clone().sub(controls.center);
//camOffset.normalize().multiplyScalar(750);
camera.position = controls.center.clone();
//camera.position.x += (mouseX - camera.position.x) * 0.036;
//camera.position.y += (-(mouseY) - camera.position.y) * 0.036;
//camera.lookAt(scene.position);
// Find the screenspace position of the sun
screenSpacePosition.copy(sunPosition).project(camera);
screenSpacePosition.x = (screenSpacePosition.x + 1) / 2;
screenSpacePosition.y = (screenSpacePosition.y + 1) / 2;
// Give it to the god-ray and sun shaders
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x;
postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y;
// -- Draw sky and sun --
// Clear colors and depths, will clear to sky color
renderer.clearTarget(postprocessing_rtTextureColors, true, true, false);
// Sun render. Runs a shader that gives a brightness based on the screen
// space distance to the sun. Not very efficient, so i make a scissor
// rectangle around the suns position to avoid rendering surrounding pixels.
var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader
var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected
screenSpacePosition.x *= Native.window.Width;
screenSpacePosition.y *= Native.window.Height;
renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH);
renderer.enableScissorTest(true);
postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors);
renderer.enableScissorTest(false);
// -- Draw scene objects --
// Colors
scene.overrideMaterial = null;
renderer.render(scene, camera, postprocessing_rtTextureColors);
// Depth
scene.overrideMaterial = materialDepth;
renderer.render(scene, camera, postprocessing_rtTextureDepth, true);
// -- Render god-rays --
// Maximum length of god-rays (in texture space [0,1]X[0,1])
var filterLen = 1.0;
// Samples taken by filter
var TAPS_PER_PASS = 6.0;
// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
// would start with a small filter support and grow to large. however
// the large-to-small order produces less objectionable aliasing artifacts that
// appear as a glimmer along the length of the beams
// pass 1 - render into first ping-pong target
var pass = 1.0;
var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// pass 2 - render into second ping-pong target
pass = 2.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1);
// pass 3 - 1st RT
pass = 3.0;
stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass);
postprocessing_godrayGenUniforms["fStepSize"].value = stepLen;
postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1;
renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2);
// final pass - composite god-rays onto colors
postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors;
postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2;
postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine;
renderer.render(postprocessing_scene, postprocessing_camera);
postprocessing_scene.overrideMaterial = null;
};
new { }.With(
async delegate
{
//while (true)
do
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
// convert to bool?
} while (await Native.window.async.onresize);
//} while (await Native.window.async.onresize != null);
}
);
//var ze = new ZeProperties();
//ze.Show();
//ze.treeView1.Nodes.Clear();
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
//ze.Left = 0;
}
