public void MakeMesh()
{
THREE.SphereGeometry ballGeo = new THREE.SphereGeometry(Radius - 10, 20, 20);
THREE.MeshPhongMaterial ballMaterial = new THREE.MeshPhongMaterial();
ballMaterial.color = new THREE.Color().setHex(0xaaaaaa);
Mesh = new THREE.Mesh(ballGeo, ballMaterial);
Mesh.castShadow = true;
Mesh.receiveShadow = true;
Mesh.visible = Apply;
}
public void MakeMesh()
{
THREE.SphereGeometry ballGeo = new THREE.SphereGeometry(Radius - 10, 20, 20);
THREE.MeshPhongMaterial ballMaterial = new THREE.MeshPhongMaterial();
ballMaterial.color = new THREE.Color().setHex(0xaaaaaa);
Mesh = new THREE.Mesh(ballGeo, ballMaterial);
Mesh.castShadow = true;
Mesh.receiveShadow = true;
Mesh.visible = Apply;
}
/// <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)
{
// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
// http://threejs.org/examples/#webgl_postprocessing_dof
// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.sortObjects = false;
//var material_depth = new THREE.MeshDepthMaterial();
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
//var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading };
// red vs yellow
var parameters = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading };
var cubeMaterial = new THREE.MeshBasicMaterial(parameters);
var geo = new THREE.SphereGeometry(1, 20, 10);
var xgrid = 14;
var ygrid = 9;
var zgrid = 14;
var nobjects = xgrid * ygrid * zgrid;
var c = 0;
//var s = 0.25;
var s = 60;
for (var i = 0; i < xgrid; i++)
{
for (var j = 0; j < ygrid; j++)
{
for (var k = 0; k < zgrid; k++)
{
var mesh = new THREE.Mesh(geo, cubeMaterial);
var x = 200 * (i - xgrid / 2);
var y = 200 * (j - ygrid / 2);
var z = 200 * (k - zgrid / 2);
mesh.position.set(x, y, z);
mesh.scale.set(s, s, s);
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add(mesh);
//objects.push(mesh);
c++;
}
}
}
//scene.matrixAutoUpdate = false;
var renderPass = new THREE.RenderPass(scene, camera);
// THREE.BokehPass relies on THREE.BokehShader
var bokehPass = new THREE.BokehPass(scene, camera, new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0,
width = Native.window.Width,
height = Native.window.Height
});
bokehPass.renderToScreen = true;
// maskpass
// THREE.EffectComposer relies on THREE.CopyShader
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(bokehPass);
renderer.autoClear = false;
var effectController = new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0
};
//var matChanger = function() {
// postprocessing.bokeh.uniforms["focus"].value = effectController.focus;
// postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture;
// postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur;
// };
var controls = new THREE.OrbitControls(camera);
#region onframe
Native.window.onframe +=
delegate
{
controls.update();
camera.position = controls.center.clone();
composer.render(0.1);
};
#endregion
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);
}
);
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine
// http://youtu.be/Lo1IU8UAutE
// 60hz 2160 4K!
// The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre.
// C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/"
//1533 KB/s(3865902 bytes in 2.461s)
//C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png"
//1556 KB/s(2714294 bytes in 1.703s)
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png"
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809
// the eye nor the display will be able to do any stereo
// until tech is near matrix capability. 2019?
// cubemap can be used for all long range scenes
// http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera
// subst /D b:
// subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web
// subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web
// what if we want to do subst in another winstat or session?
// ColladaLoader: Empty or non-existing file (assets/ChromeStereoLightAnimation/S6Edge.dae)
/// <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://stemkoski.github.io/Three.js/Shadow.html
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#region += Launched chrome.app.window
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
//chrome.runtime.UpdateAvailable += delegate
//{
// new chrome.Notification(title: "UpdateAvailable");
//};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "ChromeStereoLightAnimation");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.padding = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
// Severity Code Description Project File Line
//Error CS0201 Only assignment, call, increment, decrement, and new object expressions can be used as a statement ChromeStereoLightAnimation Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\Application.cs 187
//new Action<int>(
var camera0 = default(THREE.PerspectiveCamera);
foreach (var y in
from eyeid in new[] { 0, 1 }
select (Action)
delegate
{
var scene = new THREE.Scene();
var floorTexture = THREE.ImageUtils.loadTexture(
new HTML.Images.FromAssets.checkerboard().src
//"images/checkerboard.jpg"
);
#region function init()
// SCENE
// CAMERA
float SCREEN_WIDTH = Native.window.Width / 2;
//float SCREEN_WIDTH = Native.screen.width / 2;
float SCREEN_HEIGHT = Native.window.Height;
var VIEW_ANGLE = 45;
float ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
var NEAR = 0.1;
var FAR = 20000;
// RENDERER
// WebGLDeferredRenderer
var renderer = new THREE.WebGLRenderer(new { antialias = true });
//renderer.setSize((int)SCREEN_WIDTH, (int)SCREEN_HEIGHT);
renderer.domElement.AttachToDocument();
//renderer.domElement.style.SetLocation(Native.window.Width / 2 * (1 - eyeid), 0);
// EVENTS
// CONTROLS
// STATS
// LIGHT
//var light = new THREE.PointLight(0xffffff);
//light.position.set(0,250,0);
//scene.add(light);
////////////
// CUSTOM //
////////////
// must enable shadows on the renderer
renderer.shadowMapEnabled = true;
// SKYBOX/FOG
var skyBoxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyBoxMaterial = new THREE.MeshBasicMaterial(new { color = 0x9999ff, side = THREE.BackSide });
var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
// scene.add(skyBox);
scene.fog = new THREE.FogExp2(0x9999ff, 0.00025);
// "shadow cameras" show the light source and direction
// spotlight #1 -- yellow, dark shadow
var spotlight = new THREE.SpotLight(0xffff00);
spotlight.position.set(-60, 150, -30);
spotlight.shadowCameraVisible = true;
spotlight.shadowDarkness = 0.95;
spotlight.intensity = 2;
// must enable shadow casting ability for the light
spotlight.castShadow = true;
scene.add(spotlight);
// spotlight #2 -- red, light shadow
var spotlight2 = new THREE.SpotLight(0xff0000);
//var spotlight2 = new THREE.SpotLight(0xffff00);
spotlight2.position.set(60, 150, -60);
scene.add(spotlight2);
spotlight2.shadowCameraVisible = true;
spotlight2.shadowDarkness = 0.70;
spotlight2.intensity = 2;
spotlight2.castShadow = true;
// THREE.WebGLProgram: gl.getProgramInfoLog() Pixel shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16).
for (int i = 0; i < 8; i++)
{
// spotlight #3 blue
var spotlight3 = new THREE.SpotLight(0x0000ff);
//var spotlight3 = new THREE.SpotLight(0x00ffff);
spotlight3.position.set(150 * i, 80, -100);
//spotlight3.shadowCameraVisible = true;
spotlight3.shadowDarkness = 0.95;
spotlight3.intensity = 2;
spotlight3.castShadow = true;
scene.add(spotlight3);
// change the direction this spotlight is facing
var lightTarget = new THREE.Object3D();
lightTarget.position.set(150 * i, 10, -100);
scene.add(lightTarget);
spotlight3.target = lightTarget;
}
// cube: mesh to cast shadows
#region castShadow
var cubeGeometry = new THREE.CubeGeometry(50, 50, 50);
var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0x888888 });
var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial);
//cube.position.set(0, 50, 0);
cube0.position.set(0, 100, 0);
// Note that the mesh is flagged to cast shadows
cube0.castShadow = true;
scene.add(cube0);
// floor: mesh to receive shadows
// public static ImageUtilsType ImageUtils;
//var floorTexture = new THREE.ImageUtils.loadTexture("images/checkerboard.jpg");
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);
#endregion
// Note the change to Lambert material.
#region receiveShadow
var floorMaterial = new THREE.MeshLambertMaterial(new { map = floorTexture, side = THREE.DoubleSide });
//var floorGeometry = new THREE.PlaneGeometry(1000 * 8, 1000 * 8, 100, 100);
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100);
for (int i = 0; i < 8; i++)
{
var floor0 = new THREE.Mesh(floorGeometry, floorMaterial);
floor0.position.y = -0.5;
floor0.position.x = 1000 * i;
floor0.rotation.x = Math.PI / 2;
// Note the mesh is flagged to receive shadows
floor0.receiveShadow = true;
scene.add(floor0);
}
#endregion
// create "light-ball" meshes
var sphereGeometry = new THREE.SphereGeometry(10, 16, 8);
var darkMaterial = new THREE.MeshBasicMaterial(new { color = 0x000000 });
{
var wireframeMaterial = new THREE.MeshBasicMaterial(
new { color = 0xffff00, wireframe = true, transparent = true });
var shape = THREE.SceneUtils.createMultiMaterialObject(
sphereGeometry, new[] { darkMaterial, wireframeMaterial });
shape.position = spotlight.position;
scene.add(shape);
}
{
var wireframeMaterial = new THREE.MeshBasicMaterial(
new { color = 0xff0000, wireframe = true, transparent = true });
var shape = THREE.SceneUtils.createMultiMaterialObject(
sphereGeometry, new[] { darkMaterial, wireframeMaterial });
shape.position = spotlight2.position;
scene.add(shape);
}
//{
// var wireframeMaterial = new THREE.MeshBasicMaterial(
// new { color = 0x0000ff, wireframe = true, transparent = true });
// var shape = THREE.SceneUtils.createMultiMaterialObject(
// sphereGeometry, new[] { darkMaterial, wireframeMaterial });
// shape.position = spotlight3.position;
// scene.add(shape);
//}
#endregion
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0, 150, 400);
camera.lookAt(scene.position);
if (eyeid == 0)
{
camera0 = camera;
var controls = new THREE.OrbitControls(camera0, renderer.domElement);
//var controls = new THREE.OrbitControls(camera0, Native.document.body);
Native.window.onframe += delegate
{
renderer.render(scene, camera0);
controls.update();
//stats.update();
};
}
else
{
Native.window.onframe += delegate
{
camera.rotation.set(camera0.rotation.x, camera0.rotation.y, camera0.rotation.z);
camera.position.set(camera0.position.x, camera0.position.y, camera0.position.z);
// lets not add any stereo effect. as we may need to run in 360 mono mode anyway to gain speed?
//camera.translateX()
// scene is unique to renderer!!!!!
// we are doing everything twice for now.
renderer.render(scene, camera);
//controls.update();
//stats.update();
};
}
#region onresize
new { }.With(
async delegate
{
do
{
// allow webview to behave in S6 multiview mode
//SCREEN_WIDTH = Native.screen.width / 2;
SCREEN_WIDTH = Native.window.Width / 2;
//camera.aspect = Native.window.aspect;
camera.aspect = SCREEN_WIDTH / Native.window.Height;
camera.updateProjectionMatrix();
//renderer0.setSize(Native.window.Width / 2, Native.window.Height);
renderer.setSize((int)SCREEN_WIDTH, Native.window.Height);
//renderer0.domElement.style.SetLocation(Native.window.Width / 2 * eyeid, 0);
renderer.domElement.style.SetLocation((int)SCREEN_WIDTH * (1 - eyeid), 0);
}
while (await Native.window.async.onresize);
});
#endregion
}
)
y();
Console.WriteLine("do you see it?");
}
public override void Init()
{
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000);
// create a render and set the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(Width, Height);
renderer.shadowMapEnabled = true;
// add the output of the renderer to the html element
Container.AppendChild(renderer.domElement);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial();
planeMaterial.color = new THREE.Color(0.9, 0.9, 0.9);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);
// create a cube
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial(); // { color = 0xff0000 };
cubeMaterial.color = new THREE.Color(1, 0, 0);
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// position the cube
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
// add the cube to the scene
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial(); // { color = 0x7777ff };
sphereMaterial.color = new THREE.Color(0, 0, 1);
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// position the sphere
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
// add the sphere to the scene
scene.add(sphere);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(); //0xffffff);
spotLight.color = new THREE.Color(1, 1, 1);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 10.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = new int[] { 65, 83, 68 };
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine
// inspired by http://granular.cs.umu.se/cannon.js/examples/threejs_fps.html
/// <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)
{
//Uncaught Error: ERROR: Quaternion's .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code.
// WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported
// IE11 does not work yet
//DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
// DEPRECATED: Quaternion's .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead. Three.js:913
//Uncaught TypeError: Object [object Object] has no method 'subSelf'
// { REVISION: '57' };
var boxes = new List<CANNON.RigidBody>();
var boxMeshes = new List<THREE.Mesh>();
var balls = new List<CANNON.RigidBody>();
var ballMeshes = new List<THREE.Mesh>();
Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null);
var time = Date_now();
#region initCannon
// // Setup our world
var world = new CANNON.World();
world.quatNormalizeSkip = 0;
world.quatNormalizeFast = false;
//world.solver.setSpookParams(300, 10);
world.solver.iterations = 5;
world.gravity.set(0, -20, 0);
world.broadphase = new CANNON.NaiveBroadphase();
// // Create a slippery material (friction coefficient = 0.0)
var physicsMaterial = new CANNON.Material("slipperyMaterial");
var physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial,
physicsMaterial,
0.0, // friction coefficient
0.3 // restitution
);
// // We must add the contact materials to the world
world.addContactMaterial(physicsContactMaterial);
var controls_sphereShape = default(CANNON.Sphere);
var controls_sphereBody = default(CANNON.RigidBody);
{ // Create a sphere
var mass = 5;
var radius = 1.3;
var sphereShape = new CANNON.Sphere(radius);
var sphereBody = new CANNON.RigidBody(mass, sphereShape, physicsMaterial);
controls_sphereShape = sphereShape;
controls_sphereBody = sphereBody;
sphereBody.position.set(0, 5, 0);
sphereBody.linearDamping = 0.05;
world.add(sphereBody);
// // Create a plane
var groundShape = new CANNON.Plane();
var groundBody = new CANNON.RigidBody(0, groundShape, physicsMaterial);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.add(groundBody);
}
#endregion
#region init
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 0.1, 1000);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 0, 500);
var ambient = new THREE.AmbientLight(0x111111);
scene.add(ambient);
var light = new THREE.SpotLight(0xffffff, 1.0);
light.position.set(10, 30, 20);
light.target.position.set(0, 0, 0);
// if(true){
light.castShadow = true;
light.shadowCameraNear = 20;
light.shadowCameraFar = 50;//camera.far;
light.shadowCameraFov = 40;
light.shadowMapBias = 0.1;
light.shadowMapDarkness = 0.7;
light.shadowMapWidth = 2 * 512;
light.shadowMapHeight = 2 * 512;
// //light.shadowCameraVisible = true;
// }
scene.add(light);
var controls = new PointerLockControls(camera, controls_sphereBody);
scene.add(controls.getObject());
// // floor
var geometry = new THREE.PlaneGeometry(300, 300, 50, 50);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var material = new THREE.MeshLambertMaterial(new { color = 0xdddddd });
//Native.Window.
// THREE.Design.THREE.ColorUtils.adjustHSV(material.color, 0, 0, 0.9);
// Replaced ColorUtils.adjustHSV() with Color's .offsetHSL().
//new IFunction("material", "THREE.ColorUtils.offsetHSL( material.color, 0, 0, 0.9 );").apply(null, material);
//
var mesh = new THREE.Mesh(geometry, material)
{
castShadow = true,
receiveShadow = true
};
scene.add(mesh);
var renderer = new THREE.WebGLRenderer(new object());
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
//renderer.setSize(Native.Window.Width, Native.Window.Height);
//renderer.setClearColor(scene.fog.color, 1);
renderer.domElement.style.backgroundColor = JSColor.Black;
renderer.domElement.AttachToDocument();
#region onresize
Action AtResize = delegate
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
var r = new Random();
Func<f> Math_random = () => r.NextFloat();
#region Add boxes
{ //
for (var i = 0; i < 32; i++)
{
var boxsize = Math_random() * 0.5;
var halfExtents = new CANNON.Vec3(boxsize, boxsize, boxsize);
var boxShape = new CANNON.Box(halfExtents);
var boxGeometry = new THREE.CubeGeometry(halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2);
var x = (Math_random() - 0.5) * 20;
var y = 1 + (Math_random() - 0.5) * 1;
var z = (Math_random() - 0.5) * 20;
var boxBody = new CANNON.RigidBody(5, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
world.add(boxBody);
scene.add(boxMesh);
boxBody.position.set(x, y, z);
boxMesh.position.set(x, y, z);
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
//boxMesh.useQuaternion = true;
boxes.Add(boxBody);
boxMeshes.Add(boxMesh);
}
}
#endregion
#region Add linked boxes
{ //
var size = 0.5;
var he = new CANNON.Vec3(size, size, size * 0.1);
var boxShape = new CANNON.Box(he);
var mass = 0.0;
var space = 0.1 * size;
var N = 5;
var last = default(CANNON.RigidBody);
var boxGeometry = new THREE.CubeGeometry(he.x * 2, he.y * 2, he.z * 2);
for (var i = 0; i < N; i++)
{
var boxbody = new CANNON.RigidBody(mass, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
boxbody.position.set(5, (N - i) * (size * 2 + 2 * space) + size * 2 + space, 0);
boxbody.linearDamping = 0.01;
boxbody.angularDamping = 0.01;
//boxMesh.useQuaternion = true;
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
world.add(boxbody);
scene.add(boxMesh);
boxes.Add(boxbody);
boxMeshes.Add(boxMesh);
if (i != 0)
{
// Connect this body to the last one
var c1 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(-size, size + space, 0), last, new CANNON.Vec3(-size, -size - space, 0));
var c2 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(size, size + space, 0), last, new CANNON.Vec3(size, -size - space, 0));
world.addConstraint(c1);
world.addConstraint(c2);
}
else
{
mass = 0.3;
}
last = boxbody;
}
}
#endregion
#endregion
var dt = 1.0 / 60;
controls.enabled = true;
// vr and tilt shift?
Native.window.onframe += delegate
{
if (controls.enabled)
{
// how big of a world can we hold?
// async ?
world.step(dt);
// Update ball positions
for (var i = 0; i < balls.Count; i++)
{
balls[i].position.copy(ballMeshes[i].position);
balls[i].quaternion.copy(ballMeshes[i].quaternion);
}
// Update box positions
for (var i = 0; i < boxes.Count; i++)
{
boxes[i].position.copy(boxMeshes[i].position);
boxes[i].quaternion.copy(boxMeshes[i].quaternion);
}
}
controls.update(Date_now() - time);
renderer.render(scene, camera);
time = Date_now();
};
#region havePointerLock
renderer.domElement.onclick +=
delegate
{
renderer.domElement.requestPointerLock();
};
#endregion
#region onmousedown
renderer.domElement.onmousedown +=
e =>
{
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");
renderer.domElement.requestFullscreen();
renderer.domElement.requestPointerLock();
return;
}
var ballradius = 0.1 + Math_random() * 0.9;
var ballShape = new CANNON.Sphere(ballradius);
var ballGeometry = new THREE.SphereGeometry(ballShape.radius, 32, 32);
var shootDirection = new THREE.Vector3();
var shootVelo = 15;
var projector = new THREE.Projector();
Action<THREE.Vector3> getShootDir = (targetVec) =>
{
var vector = targetVec;
targetVec.set(0, 0, 1);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray( (THREE.Vector3)(object)controls_sphereBody.position,
vector
//.subSelf(controls_sphereBody.position)
.normalize()
);
targetVec.x = ray.direction.x;
targetVec.y = ray.direction.y;
targetVec.z = ray.direction.z;
};
var x = controls_sphereBody.position.x;
var y = controls_sphereBody.position.y;
var z = controls_sphereBody.position.z;
// could we attach physics via binding list?
var ballBody = new CANNON.RigidBody(1, ballShape);
var ballMesh = new THREE.Mesh(ballGeometry, material);
world.add(ballBody);
scene.add(ballMesh);
ballMesh.castShadow = true;
ballMesh.receiveShadow = true;
balls.Add(ballBody);
ballMeshes.Add(ballMesh);
getShootDir(shootDirection);
ballBody.velocity.set(shootDirection.x * shootVelo,
shootDirection.y * shootVelo,
shootDirection.z * shootVelo);
// // Move the ball outside the player sphere
x += shootDirection.x * (controls_sphereShape.radius + ballShape.radius);
y += shootDirection.y * (controls_sphereShape.radius + ballShape.radius);
z += shootDirection.z * (controls_sphereShape.radius + ballShape.radius);
ballBody.position.set(x, y, z);
ballMesh.position.set(x, y, z);
//ballMesh.useQuaternion = true;
};
#endregion
//var ze = new ZeProperties();
//ze.Show();
//ze.Left = 0;
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
}
public override void Init()
{
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000);
// create a render and set the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(Width, Height);
renderer.shadowMapEnabled = true;
// add the output of the renderer to the html element
Container.AppendChild(renderer.domElement);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshLambertMaterial();
planeMaterial.color = new THREE.Color(0.9, 0.9, 0.9);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);
// create a cube
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial(); // { color = 0xff0000 };
cubeMaterial.color = new THREE.Color(1, 0, 0);
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// position the cube
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
// add the cube to the scene
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial(); // { color = 0x7777ff };
sphereMaterial.color = new THREE.Color(0, 0, 1);
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// position the sphere
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
// add the sphere to the scene
scene.add(sphere);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(); //0xffffff);
spotLight.color = new THREE.Color(1, 1, 1);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 10.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = new int[] { 65, 83, 68 };
}
/// <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;
}
/// <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)
{
//FormStyler.AtFormCreated =
//s =>
//{
// s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
// //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget());
// var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget());
// s.Context.GetHTMLTarget().style.backgroundColor = "#efefef";
// //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41";
//};
#if AsWEBSERVER
#region += Launched chrome.app.window
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
// if we run as a server. we can open up on android.
//chrome.Notification.DefaultTitle = "Nexus7";
//chrome.Notification.DefaultIconUrl = new x128().src;
ChromeTCPServer.TheServerWithStyledForm.Invoke(
AppSource.Text
//, AtFormCreated: FormStyler.AtFormCreated
//AtFormConstructor:
// f =>
// {
// //arg[0] is typeof System.Int32
// //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)]
// // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs
// f.BackColor = System.Drawing.Color.FromArgb(0xA26D41);
// }
);
return;
}
#endregion
#else
#region += Launched chrome.app.window
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
//chrome.runtime.UpdateAvailable += delegate
//{
// new chrome.Notification(title: "UpdateAvailable");
//};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "x360x83");
// https://developer.chrome.com/apps/app_window#type-CreateWindowOptions
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: new
{
alwaysOnTop = true,
visibleOnAllWorkspaces = true
}
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
#endif
// GpuProcessHostUIShim: The GPU process crashed!
var poke = new WebGLRenderingContext();
if (poke == null)
{
new IHTMLPre { "GpuProcessHostUIShim: The GPU process crashed! restart process."
}.AttachToDocument();
return;
}
// are we in a RemoteApp ? software renderer?
// this may hang the buggy rdp protocol...
// crash
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
//int cubefacesizeMAX = 2048 * 2; // 6 faces, ?
int cubefacesizeMAX = 2048 * 1; // 6 faces, ?
int cubefacesize = cubefacesizeMAX; // 6 faces, ?
//int cubefacesize = 1024; // 6 faces, ?
// "X:\vr\tape1\0000x2048.png"
// for 60hz render we may want to use float camera percision, not available for ui.
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/"
// "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/"
//if (Environment.ProcessorCount < 8)
// //cubefacesize = 64; // 6 faces, ?
// // fast gif?
//cubefacesize = 1024; // 6 faces, ?
// not 8k..
//cubefacesize = 512; // 6 faces, ?
// big cubeface may be draw only half of itself?
// can we keep fast fps yet highp?
// can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm?
//const int cubefacesize = 128; // 6 faces, ?
//var cubecameraoffsetx = 256;
var cubecameraoffsetx = 400;
//var uizoom = 0.1;
//var uizoom = cubefacesize / 128f;
var uizoom = 128f / cubefacesize;
Native.css.style.backgroundColor = "blue";
Native.css.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
(Native.body.style as dynamic).webkitUserSelect = "text";
IHTMLCanvas shader1canvas = null;
//return;
// Earth params
//var radius = 0.5;
//var radius = 1024;
//var radius = 2048;
//var radius = 512;
//var radius = 256;
//var radius = 400;
// can we have not fly beyond moon too much?
//var radius = 500;
//var radius = 480;
//var radius = -480;
//var segments = 32;
//var segments = 128 * 2;
//var rotation = 6;
//const int size = 128;
//const int size = 256; // 6 faces, 12KB
//const int size = 512; // 6 faces, ?
// WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
//const int size = 720; // 6 faces, ?
//const int size = 1024; // 6 faces, ?
//const int cubefacesize = 1024; // 6 faces, ?
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/x360x83/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg )
// var far = 0xffffff;
// need a zoom effect
// 5pixels to 33%
// radius needs to be a bit bigger so wa cant zoom thru it
// far image at this distance
var skyboxradius0 = 0 + 2048 * 4;
var near = cubefacesize * 0.33;
var skyboxradius = skyboxradius0 * 1.2;
var far = skyboxradius * 2;
//var near = cubefacesize * 0.5;
//var near = cubefacesize * 0.4;
//var near = cubefacesize * 0.25;
new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument();
//new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument();
var sw = Stopwatch.StartNew();
var oo = new List<THREE.Object3D>();
// what about physics and that portal rendering?
// if we are running as a chrome web server, we may also be opened as android ndk webview app
//var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000);
// once we update source
// save the source
// manually recompile
//cameraPX.position.z = 400;
//// the camera should be close enough for the object to float off the FOV of PX
//cameraPX.position.z = 200;
// scene
// can we make the 3D object orbit around us ?
// and
// stream it to vr?
var scene = new THREE.Scene();
// since our cube camera is somewhat a fixed thing
// would it be easier to move mountains to come to us?
// once we change code would chrome app be able to let VR know that a new view is available?
var sceneg = new THREE.Group();
sceneg.AttachTo(scene);
// whatif we reuse the skybox as is and skip rendering it?
// that means we cannot rotate via sky, we have to rotate other elements in reverse.
// can we have a checkbox to hide or render the skybox?
var scenezooms = new THREE.Group();
scenezooms.AttachTo(scene);
// fly up?
//sceneg.translateZ(-1024);
// rotate the world, as the skybox then matches what we have on filesystem
scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
//scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
// yet for headtracking we shall rotate camera
//sceneg.position.set(0, 0, -1024);
//sceneg.position.set(0, -1024, 0);
//scene.add(new THREE.AmbientLight(0x333333));
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xaaaaaa));
//scene.add(new THREE.AmbientLight(0xcccccc));
//scene.add(new THREE.AmbientLight(0xeeeeee));
scene.add(new THREE.AmbientLight(0xffffff));
//var light = new THREE.DirectionalLight(0xffffff, 1);
//// sun should be beyond moon
////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance);
////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//// where shall the light source be to see half planet?
//light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance);
//scene.add(light);
//var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument();
//var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument();
//var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument();
//new IHTMLHorizontalRule { }.AttachToDocument();
// whats WebGLRenderTargetCube do?
// WebGLRenderer preserveDrawingBuffer
var renderer0 = new THREE.WebGLRenderer(
new
{
//antialias = true,
alpha = true,
preserveDrawingBuffer = true
}
);
// https://github.com/mrdoob/three.js/issues/3836
// the construct. white bg
// cyan?
//renderer0.setClearColor(0xfffff, 1);
//renderer0.setClearColor(0xfffff, 0);
renderer0.setClearColor(0x0, 0);
//renderer0.setClearColor(0x0, 1);
//renderer.setSize(window.Width, window.Height);
renderer0.setSize(cubefacesize, cubefacesize);
//renderer0.domElement.AttachToDocument();
//rendererPX.domElement.style.SetLocation(0, 0);
//renderer0.domElement.style.SetLocation(4, 4);
// top
// http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene
// need a place to show the cubemap face to GUI
// how does the stereo OTOY do it?
// https://www.opengl.org/wiki/Sampler_(GLSL)
// http://www.richardssoftware.net/Home/Post/25
// [+X, –X, +Y, –Y, +Z, –Z] fa
// move up
//camera.position.set(-1200, 800, 1200);
//var cameraoffset = new THREE.Vector3(0, 15, 0);
// can we aniamte it?
//var cameraoffset = new THREE.Vector3(0, 800, 1200);
// can we have linear animation fromcenter of the map to the edge and back?
// then do the flat earth sun orbit?
var cameraoffset = new THREE.Vector3(
// left?
-512,
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1024,
//1200
0
// can we hover top of the map?
);
// original vieworigin
//var cameraoffset = new THREE.Vector3(-1200, 800, 1200);
// whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk?
var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 1800, valueAsNumber = 1800 / 2, title = "frameIDslider" }.AttachToDocument();
var xframeID = 0;
new { }.With(
async delegate
{
next:
//Console.WriteLine("enter vsync0ambient");
Native.document.title = new { xframeID }.ToString();
vsync0ambient = new TaskCompletionSource<object>();
await vsync0ambient.Task;
await Task.Delay(1000 / 15);
//await Task.Delay(1000);
//Console.WriteLine("await vsync0ambient 5");
//await Task.Delay(5000);
xframeID++;
goto next;
}
);
new IHTMLHorizontalRule { }.AttachToDocument();
var camerazMIN = 0 - 2048 * 4;
var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "camerax" }.AttachToDocument();
// up. whats the most high a rocket can go 120km?
new IHTMLHorizontalRule { }.AttachToDocument();
// how high is the bunker?
var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 2048 * 4, valueAsNumber = 0, title = "cameray" }.AttachToDocument();
new IHTMLBreak { }.AttachToDocument();
var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument();
new IHTMLHorizontalRule { }.AttachToDocument();
//var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument();
//var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0 - 2048 * 4, title = "cameraz" }.AttachToDocument();
var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = camerazMIN, max = 0, valueAsNumber = camerazMIN, title = "cameraz" }.AttachToDocument();
// the zoom hting..
new IHTMLHorizontalRule { }.AttachToDocument();
var skyrotup = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -450, max = 450, valueAsNumber = 0, title = "skyrotup" }.AttachToDocument();
var skyrotright = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -450, max = 450, valueAsNumber = 0, title = "skyrotright" }.AttachToDocument();
new IHTMLPre { () => new { skyrotup = skyrotup.valueAsNumber, skyrotright = skyrotright.valueAsNumber } }.AttachToDocument();
new IHTMLHorizontalRule { }.AttachToDocument();
// were we able to test for it?
//var zoomrotup = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -450, max = 450, valueAsNumber = -12, title = "up" }.AttachToDocument();
var zoomrotup = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -450, max = 450, valueAsNumber = 0, title = "up" }.AttachToDocument();
var zoomrotright = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -450, max = 450, valueAsNumber = 0, title = "right" }.AttachToDocument();
new IHTMLPre { () => new {
// on 0 zoom we should rely on the original skybox?
cameraz = cameraz.valueAsNumber,
zoomrotup = zoomrotup.valueAsNumber, zoomrotright = zoomrotright.valueAsNumber } }.AttachToDocument();
// for render server
var fcamerax = 0.0;
var fcameray = 0.0;
var fcameraz = 0.0;
//while (await camerax.async.onchange)
//cameray.onchange += delegate
//{
// if (cameray.valueAsNumber < cameray.max)
// camerayHigh.valueAsNumber = camerayHigh.min;
//};
camerayHigh.onmousedown += delegate
{
//if (camerayHigh.valueAsNumber > camerayHigh.min)
cameray.valueAsNumber = cameray.max;
};
Action applycameraoffset = delegate
{
// make sure UI and gpu sync up
var cy = cameray;
if (cameray.valueAsNumber < cameray.max)
camerayHigh.valueAsNumber = camerayHigh.min;
if (camerayHigh.valueAsNumber > camerayHigh.min)
cameray.valueAsNumber = cameray.max;
if (cameray.valueAsNumber == cameray.max)
cy = camerayHigh;
cameraoffset = new THREE.Vector3(
// left?
1.0 * (camerax + fcamerax),
// height?
//0,
//1600,
//1024,
// if the camera is in the center, would we need to move the scene?
// we have to move the camera. as we move the scene the lights are messed up
//2014,
1.0 * (cy + fcameray),
//1200
1.0 * (cameraz + fcameraz)
// can we hover top of the map?
);
};
#region y
// need to rotate90?
var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: near, far: far);
applycameraoffset += delegate
{
cameraNY.position.copy(new THREE.Vector3(0, 0, 0));
cameraNY.lookAt(new THREE.Vector3(0, -1, 0));
cameraNY.position.add(cameraoffset);
};
//cameraNY.lookAt(new THREE.Vector3(0, 1, 0));
var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2);
canvasNY.canvas.title = "NY";
canvasNY.canvas.AttachToDocument();
canvasNY.canvas.style.transformOrigin = "0 0";
// roslyn!
//canvasNY.canvas.style.transform = $"scale({uizoom})";
canvasNY.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: near, far: far);
applycameraoffset += delegate
{
cameraPY.position.copy(new THREE.Vector3(0, 0, 0));
cameraPY.lookAt(new THREE.Vector3(0, 1, 0));
cameraPY.position.add(cameraoffset);
};
//cameraPY.lookAt(new THREE.Vector3(0, -1, 0));
var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0);
canvasPY.canvas.title = "PY";
canvasPY.canvas.AttachToDocument();
canvasPY.canvas.style.transformOrigin = "0 0";
//canvasPY.canvas.style.transform = $"scale({uizoom})";
canvasPY.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// transpose xz?
#region x
var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: near, far: far);
applycameraoffset += delegate
{
cameraNX.position.copy(new THREE.Vector3(0, 0, 0));
cameraNX.lookAt(new THREE.Vector3(0, 0, 1));
cameraNX.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(0, 0, -1));
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNX.lookAt(new THREE.Vector3(1, 0, 0));
var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNX.canvas.title = "NX";
canvasNX.canvas.AttachToDocument();
canvasNX.canvas.style.transformOrigin = "0 0";
//canvasNX.canvas.style.transform = $"scale({uizoom})";
canvasNX.canvas.style.transform = "scale(" + uizoom + ")";
// front??
var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: near, far: far);
applycameraoffset += delegate
{
cameraPX.position.copy(new THREE.Vector3(0, 0, 0));
cameraPX.lookAt(new THREE.Vector3(0, 0, -1));
cameraPX.position.add(cameraoffset);
};
//cameraPX.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPX.lookAt(new THREE.Vector3(1, 0, 0));
//cameraPX.lookAt(new THREE.Vector3(-1, 0, 0));
var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPX.canvas.title = "PX";
canvasPX.canvas.AttachToDocument();
canvasPX.canvas.style.transformOrigin = "0 0";
//canvasPX.canvas.style.transform = $"scale({uizoom})";
canvasPX.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
#region z
var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: near, far: far);
//cameraNZ.lookAt(new THREE.Vector3(0, 0, -1));
applycameraoffset += delegate
{
cameraNZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraNZ.lookAt(new THREE.Vector3(1, 0, 0));
cameraNZ.position.add(cameraoffset);
};
//cameraNX.lookAt(new THREE.Vector3(-1, 0, 0));
//cameraNZ.lookAt(new THREE.Vector3(0, 0, 1));
var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasNZ.canvas.title = "NZ";
canvasNZ.canvas.AttachToDocument();
canvasNZ.canvas.style.transformOrigin = "0 0";
//canvasNZ.canvas.style.transform = $"scale({uizoom})";
canvasNZ.canvas.style.transform = "scale(" + uizoom + ")";
var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: near, far: far);
//cameraPZ.lookAt(new THREE.Vector3(1, 0, 0));
applycameraoffset += delegate
{
cameraPZ.position.copy(new THREE.Vector3(0, 0, 0));
cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0));
cameraPZ.position.add(cameraoffset);
};
//cameraPZ.lookAt(new THREE.Vector3(0, 0, 1));
//cameraPZ.lookAt(new THREE.Vector3(0, 0, -1));
var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize);
canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1);
canvasPZ.canvas.title = "PZ";
canvasPZ.canvas.AttachToDocument();
canvasPZ.canvas.style.transformOrigin = "0 0";
//canvasPZ.canvas.style.transform = $"scale({uizoom})";
canvasPZ.canvas.style.transform = "scale(" + uizoom + ")";
#endregion
// c++ alias locals would be nice..
var canvas0 = (IHTMLCanvas)renderer0.domElement;
var old = new
{
CursorX = 0,
CursorY = 0
};
var st = new Stopwatch();
st.Start();
//canvas0.css.active.style.cursor = IStyle.CursorEnum.move;
// X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs
// THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll
// http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/
// https://www.youtube.com/watch?v=D-Wl9jAB45Q
#region gl4K spherical
var gl4K = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true);
var c4k = gl4K.canvas.AttachToDocument();
// 3840x2160
//c.style.SetSize(3840, 2160);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube
// when can we go up?
c4k.width = 3840;
c4k.height = 2160;
// https://www.youtube.com/watch?v=sLprVF6d7Ug
// 8K is 7680 4320
// https://www.youtube.com/watch?v=RNdHaeBhT9Q
// 8K is 7680 3840
//c.width = 7680;
////c.height = 3840;
//c.height = 4320;
//c.width = 3840 * 2;
//c.height = 2160 * 2;
//c.width = 3840;
//c.height = 2160;
// 1,777777777777778
// https://www.youtube.com/watch?v=fTfJwzRsE-w
//c.width = 7580;
//c.height = 3840;
//1,973958333333333
//7580
// 3840
// wont work
//c.width = 8192;
//c.height = 4096;
// this has the wrong aspect?
//c.width = 6466;
//c.height = 3232;
new IHTMLPre { new { c4k.width, c4k.height } }.AttachToDocument();
//6466x3232
//var suizoom = 720f / c.height;
//var suizoom = 360f / c.height;
var suizoom = 480f / c4k.width;
c4k.style.backgroundColor = "yellow";
c4k.style.transformOrigin = "0 0";
//c.style.transform = $"scale({suizoom})";
c4k.style.transform = "scale(" + suizoom + ")";
//c.style.backgroundColor = "yellow";
c4k.style.position = IStyle.PositionEnum.absolute;
c4k.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0,
8 + (int)(uizoom * cubefacesize + 8) * 3 + 120
);
// until we figure out how to fix the shader, we can try to fake it?
// will allow atleast a nice static 8K image?
// S6 did a 6546x3272 image. 5k?
// 1.77
var c8k = new CanvasRenderingContext2D(3840 * 2, 2160 * 2);
//var c8k = new CanvasRenderingContext2D(5120, 2880);
// 5120 x 2880 pixel
// 8k canvas wont load in chrome?
c8k.canvas.AttachToDocument();
c8k.canvas.style.backgroundColor = "cyan";
c8k.canvas.style.transformOrigin = "0% 0%";
c8k.canvas.style.transform = "scale(" + (suizoom / 2) + ")";
c8k.canvas.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 120,
8 + (int)(uizoom * cubefacesize + 8) * 3 + 120 + 320
);
var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass(
null,
gl4K,
precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl4K),
supportDerivatives: gl4K.getExtension("OES_standard_derivatives") != null,
callback: null,
obj: null,
forceMuted: false,
forcePaused: false,
//quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0),
outputGainNode: null
);
// how shall we upload our textures?
// can we reference GLSL.samplerCube yet?
//pass.mInputs[0] = new samplerCube { };
pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { };
pass.MakeHeader_Image();
var vs = new Shaders.ProgramFragmentShader();
pass.NewShader_Image(vs);
#endregion
// why is it flipped?
//var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument();
var frame0 = new HTML.Images.FromAssets._20150912_154522().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._20150912_154522recenter().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().AttachToDocument();
//var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument();
//var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument();
//var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument();
// 270px
//xor.style.height = "";
frame0.style.height = "270px";
frame0.style.width = "480px";
frame0.style.SetLocation(
8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16,
8 + (int)(uizoom * cubefacesize + 8) * 3 + 120);
#region DirectoryEntry
var dir = default(DirectoryEntry);
new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate
{
dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
};
frame0.style.cursor = IStyle.CursorEnum.pointer;
frame0.title = "save frame";
frame0.onclick += delegate
{
// http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf
// A method of creating synthetic stereoscopic panoramic images that can be implemented
//in most rendering packages has been presented. If single panoramic pairs can be created
//then stereoscopic panoramic movies are equally possible giving rise to the prospect of
//movies where the viewer can interact with, at least with regard to what they choose to look
//at.These images can be projected so as to engage the two features of the human visual
//system that assist is giving us a sense of immersion, the feeling of “being there”. That is,
//imagery that contains parallax information as captured from two horizontally separated eye
//positions (stereopsis)and imagery that fills our peripheral vision.The details that define
//how the two panoramic images should be created in rendering packages are provided, in
//particular, how to precisely configure the virtual cameras and control the distance to zero
//parallax.
// grab a frame
if (dir == null)
{
var c8ksw = Stopwatch.StartNew();
c8k.drawImage(frame0, 0, 0, c8k.canvas.width, c8k.canvas.height);
c8k.drawImage(gl4K, 0, 0, c8k.canvas.width, c8k.canvas.height);
// not exporting to file system?
//var f0 = new IHTMLImage { src = gl4K.canvas.toDataURL() };
//var f0 = new IHTMLImage { src = c8k.canvas.toDataURL() };
// png would be 50mb?
var f0 = new IHTMLImage { src = c8k.canvas.toDataURL(quality: 0.9) };
// 22989ms { c8ksw = 00:00:12.12976 }
Console.WriteLine(new { c8ksw });
//var f0 = (IHTMLImage)gl.canvas;
//var f0 = (IHTMLImage)gl.canvas;
//var base64 = gl.canvas.toDataURL();
//frame0.src = base64;
frame0.src = f0.src;
// 7MB!
return;
}
// // ---------------------------
//IrfanView
//---------------------------
//Warning !
//The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension !
//Rename ?
//---------------------------
//Yes No
//---------------------------
// haha this will render the thumbnail.
//dir.WriteAllBytes("0000.png", frame0);
//dir.WriteAllBytes("0000.png", gl.canvas);
var glsw = Stopwatch.StartNew();
dir.WriteAllBytes("0000.png", gl4K);
new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument();
// {{ ElapsedMilliseconds = 1548 }}
// 3.7MB
// 3840x2160
};
#endregion
#region render 60hz 30sec
new IHTMLButton {
"render 60hz 30sec"
}.AttachToDocument().onclick += async e =>
{
e.Element.disabled = true;
var total = Stopwatch.StartNew();
var status = "rendering... " + new { dir };
new IHTMLPre { () => status }.AttachToDocument();
if (dir == null)
{
//dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
}
total.Restart();
vsync1renderman = new TaskCompletionSource<object>();
await vsync1renderman.Task;
status = "rendering... vsync";
//var frameid = 0;
frameIDslider.valueAsNumber = -1;
goto beforeframe;
// parallax offset?
await_nextframe:
//var filename = frameIDslider.valueAsNumber.ToString().PadLeft(4, '0') + ".png";
var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".jpg";
status = "rendering... " + new { filename };
vsync1renderman = new TaskCompletionSource<object>();
await vsync1renderman.Task;
// frame0 has been rendered
var swcapture = Stopwatch.StartNew();
status = "WriteAllBytes... " + new { filename };
//await Native.window.async.onframe;
// https://code.google.com/p/chromium/issues/detail?id=404301
if (dir != null)
{
c8k.drawImage(frame0, 0, 0, c8k.canvas.width, c8k.canvas.height);
c8k.drawImage(gl4K, 0, 0, c8k.canvas.width, c8k.canvas.height);
//await dir.WriteAllBytes(filename, gl4K);
await dir.WriteAllBytes(filename, c8k);
}
//await dir.WriteAllBytes(filename, gl.canvas);
status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds };
status = "rdy " + new { filename, fcamerax };
//await Native.window.async.onframe;
// design mode v render mode
if (cubefacesize < cubefacesizeMAX)
frameIDslider.valueAsNumber += 15;
else
frameIDslider.valueAsNumber++;
beforeframe:
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
// fcamerax = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
// speed? S6 slow motion?
// this is really slow. if we do x4x2 =x8
// https://www.youtube.com/watch?v=r76ULW16Ib8
//fcamerax += 16 * (1.0 / 60.0);
// some shaders need to know where the camera is looking from. can we tell them?
//fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
//// up
//fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f));
// cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)));
// up
//fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f));
//fcamerax += (1.0 / 60.0);
//fcamerax += (1.0 / 60.0) * 120;
// in 30 sec can we have a zoom in and out?
// so 15 sec at 60 fps needs to be -max z
var a = Math.Abs(frameIDslider.valueAsNumber - (60 * 15));
var aa = a / (60f * 15);
//cameraz.valueAsNumber = (int)(camerazMIN * aa);
cameraz.valueAsNumber = (int)(camerazMIN * (1.0 - aa));
// 60hz 30sec
if (frameIDslider.valueAsNumber < 60 * 30)
{
// Blob GC? either this helms or the that we made a Blob static.
//await Task.Delay(11);
await Task.Delay(33);
goto await_nextframe;
}
total.Stop();
status = "all done " + new { frameid = frameIDslider.valueAsNumber, total.ElapsedMilliseconds };
vsync1renderman = default(TaskCompletionSource<object>);
// http://stackoverflow.com/questions/22899333/delete-javascript-blobs
e.Element.disabled = false;
};
#endregion
// "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj"
// asus will hang
// https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a
// can we get one frame into vr?
// cube: mesh to cast shadows
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 })
// );
// floor2.position.set(0, 0, -cubefacesize / 2);
// floor2.AttachTo(scene);
//}
//{
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff })
// );
// floor2.position.set(-cubefacesize / 2, 0, 0);
// floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
// floor2.AttachTo(scene);
//}
//var p900toCubeSize = cubefacesize / 1080f;
var p900toCubeSize = cubefacesize / 1920f;
//p900toCubeSize *= 0.7f;
// where is this magic number coming from??
p900toCubeSize *= 0.65f;
//p900toCubeSize *= 0.5f;
// http://stackoverflow.com/questions/17648067/three-js-drawing-two-overlapping-transparent-spheres-and-hiding-intersection
var farimage = new output00609();
var nearimage = new output01085();
// front?
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
//var tex0 = new THREE.Texture(shader1canvas) { needsUpdate = true };
//var tex0 = new THREE.Texture(new output01027()) { needsUpdate = true };
//var tex0 = new THREE.Texture(new output00630()) { needsUpdate = true };
var tex0 = new THREE.Texture(farimage) { needsUpdate = true, minFilter = THREE.LinearFilter };
applycameraoffset += delegate { tex0.needsUpdate = true; };
//var planeGeometry0 = new THREE.PlaneGeometry(1920, 1080, 8, 8);
var planeGeometry0 = new THREE.PlaneGeometry((int)(1920 * p900toCubeSize), (int)(1080 * p900toCubeSize), 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
// black otherwise?
transparent = true,
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//(floor2 as dynamic).renderDepth = 0.2;
//floor2.position.set(0, 0, -cubefacesize * 0.55);
// zoom in and get 90FOV clouseup?
floor2.position.set(-cubefacesize * 0.50 - skyboxradius0, 0, 0);
//floor2.position.set(-skyboxradius0 - 128, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
//floor2.AttachTo(scene);
floor2.AttachTo(scenezooms);
}
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
//var tex0 = new THREE.Texture(shader1canvas) { needsUpdate = true };
//var tex0 = new THREE.Texture(new output01027()) { needsUpdate = true };
var tex0 = new THREE.Texture(nearimage) { needsUpdate = true, minFilter = THREE.LinearFilter };
//var tex0 = new THREE.Texture(new output00630()) { needsUpdate = true };
applycameraoffset += delegate { tex0.needsUpdate = true; };
//var planeGeometry0 = new THREE.PlaneGeometry(1920, 1080, 8, 8);
//var planeGeometry0 = new THREE.PlaneGeometry((int)(1920 * 0.1), (int)(1080 * 0.1), 8, 8);
var planeGeometry0 = new THREE.PlaneGeometry((int)(1920 * p900toCubeSize), (int)(1080 * p900toCubeSize), 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
// black otherwise?
transparent = true,
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//floor2.position.set(0, 0, -cubefacesize * 0.55);
//(floor2 as dynamic).renderDepth = 0.3;
// zoom in and get 90FOV clouseup?
floor2.position.set(-cubefacesize * 0.50, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
//floor2.AttachTo(scene);
floor2.AttachTo(scenezooms);
}
Action<IHTMLImage, double> AddFrame = (img, z) =>
{
{
//var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
//var tex0 = new THREE.Texture(new moon());
//var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
//var tex0 = new THREE.Texture(shader1canvas) { needsUpdate = true };
//var tex0 = new THREE.Texture(new output01027()) { needsUpdate = true };
//var tex0 = new THREE.Texture(new output00630()) { needsUpdate = true };
var tex0 = new THREE.Texture(img) { needsUpdate = true, minFilter = THREE.LinearFilter };
applycameraoffset += delegate { tex0.needsUpdate = true; };
//var planeGeometry0 = new THREE.PlaneGeometry(1920, 1080, 8, 8);
var planeGeometry0 = new THREE.PlaneGeometry((int)(1920 * p900toCubeSize), (int)(1080 * p900toCubeSize), 8, 8);
var floor2 = new THREE.Mesh(planeGeometry0,
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
//new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
new THREE.MeshPhongMaterial(
new
{
// black otherwise?
transparent = true,
map = tex0,
//ambient = 0x00ff00,
//color = 0x00ff00
})
);
//(floor2 as dynamic).renderDepth = 0.2;
//floor2.position.set(0, 0, -cubefacesize * 0.55);
// zoom in and get 90FOV clouseup?
floor2.position.set(-cubefacesize * 0.50 - skyboxradius0 * z, 0, 0);
//floor2.position.set(-skyboxradius0 - 128, 0, 0);
floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2);
//floor2.AttachTo(scene);
floor2.AttachTo(scenezooms);
}
};
new IHTMLButton { "load frames from disk " }.AttachToDocument().onclick += async e =>
{
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\360\x360x83\Application.cs
// Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\360\x360azimuthal\Application.cs
e.Element.disabled = true;
// how do we load the files?
var dir2 = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" });
var dir2r = dir2.createReader();
var files2 = await dir2r.readFileEntries();
var files2count = files2.Count();
Console.WriteLine(new { files2count });
// does this dir have the first and last image we already know of?
// 55390ms { files2count = 4324 }
var firstcandidate = files2.First();
//Console.WriteLine(new { firstcandidate, farimage.src });
// 19230ms { firstcandidate = [object FileEntry], src = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/x360x83/output00609.png }
// 10903ms { firstcandidate = output00001.png, farimage = output00609.png }
var files2skip = files2.SkipWhile(firstcandidate1 => firstcandidate1.name != farimage.src.SkipUntilLastOrEmpty("/"));
//Console.WriteLine(new { files2skip = files2skip.Count() });
var files2take = files2skip.TakeWhile(firstcandidate1 => firstcandidate1.name != nearimage.src.SkipUntilLastOrEmpty("/"));
//6228ms { files2count = 4324 }
//view-source:54116 6377ms { files2take = 476 }
// reverse?
var files3 = files2take.ToArray();
var files3count = files3.Count();
//Console.WriteLine(new { files2take = files2take.Count() });
//var step = 8;
//var step = 1;//crashes
//var step = 2;//crashes after load
var step = 4;//crashes after load
//var step = 3;//
//var step = (int)(files3count * 0.05);
//var step = (int)(files3count * 0.25);
for (int i = step; i < files3count; i += step)
{
//files3[i].
Console.WriteLine(new { i });
e.Element.innerText = new { step, i, files3count }.ToString();
//files3[i].file()
var ff = await files3[i].file();
//83fc21e4-a2da-408d-9831-571313ead641
//Refcount: 1
//Content Type: image/png
//Type: file
//Path: X:\p900\7\DCIM\100NIKON\DSCN0018\output00767.png
//Modification Time: Sunday, September 13, 2015 at 10:24:01 AM
//Length: 2,131,791
// are we running out of blobs?
var url = ff.ToObjectURL();
var img = new IHTMLImage(url);
await img.async.oncomplete;
//async ff =>
//{
// var ffbytes = await ff.readAsBytes();
//var ffimage = (IHTMLImage)ffbytes;
var aa = (double)i / files3count;
AddFrame(img, 1.0 - aa);
// }
//);
//files3[i].
}
e.Element.innerText = "done " + new { step, files3count }.ToString();
};
//{
// //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true };
// //var tex0 = new THREE.Texture(new moon());
// //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true };
// var tex0 = new THREE.Texture(shader1canvas) { needsUpdate = true };
// applycameraoffset += delegate { tex0.needsUpdate = true; };
// var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8);
// var floor2 = new THREE.Mesh(planeGeometry0,
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 })
// //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 })
// new THREE.MeshPhongMaterial(
// new
// {
// map = tex0,
// //ambient = 0x00ff00,
// //color = 0x00ff00
// })
// );
// floor2.position.set(cubefacesize * 0.55, 0, 0);
// floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2);
// floor2.AttachTo(scene);
//}
// X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs
// X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs
// hidden for alpha AppWindows
//#if FBACKGROUND
#region galaxy_starfield
new THREE.Texture().With(
async s =>
{
//var i = new HTML.Images.FromAssets.galaxy_starfield();
//var i = new HTML.Images.FromAssets.galaxy_starfield150FOV();
var bytes = await frame0.async.bytes;
//for (int ii = 0; ii < bytes.Length; ii += 4)
//{
// bytes[ii + 3] = (byte)(bytes[ii + 0]);
// bytes[ii + 0] = 0xff;
// bytes[ii + 1] = 0xff;
// bytes[ii + 2] = 0xff;
//}
var cc = new CanvasRenderingContext2D(frame0.width, frame0.height);
cc.bytes = bytes;
// does not do a thing?
//s.flipY = true;
s.image = cc;
s.needsUpdate = true;
var stars_material = new THREE.MeshBasicMaterial(
new
{
//map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src),
map = s,
// both?
//side = THREE.BackSide,
transparent = true
});
// nice
//stars_material.opacity = 0.5;
// THREE.SphereGeometry = function ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength ) {
// http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/
// how are we to construct geometry that has higher detail in one spot for zoom in
var skyboxsphere = new THREE.SphereGeometry(skyboxradius, 512, 512
// left to right
// 0 .. 45 deg
// center it?
//Math.PI - Math.PI / 4
//, Math.PI / 4,
//// up to down
//// 0 .. 22 deg
//0, Math.PI / 2
);
//
var stars = new THREE.Mesh(
// radius not used?
//new THREE.SphereGeometry(skyboxradius, 64, 64),
//new THREE.SphereGeometry(skyboxradius, 8, 8),
// we need to be able to zoom in!
//new THREE.SphereGeometry(skyboxradius, 256, 256),
// chrome will crash on laptop?
// chrome will crash on red!
//new THREE.SphereGeometry(skyboxradius, 1024, 1024),
//new THREE.SphereGeometry(skyboxradius, 1024, 1024),
//new THREE.SphereGeometry(skyboxradius, 512, 512),
//new THREE.SphereGeometry(skyboxradius, 600, 600),
// orr perhaps do we need detailed geometry only in specific spot?
skyboxsphere,
stars_material
);
// http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity
//(stars_material as dynamic).opacity = 0.5;
stars.scale.x = -1;
// http://stackoverflow.com/questions/31797871/three-js-alpha-on-entire-object
applycameraoffset += delegate
{
if (cameraz.valueAsNumber == 0)
{
// static 5k image should take over...
stars_material.opacity = 0.0;
return;
}
var a = (cameraz.valueAsNumber / (double)camerazMIN);
stars.rotation.set(0, 0, 0);
// skyrotright
//stars.rotateOnAxis(new THREE.Vector3(0, 0, 1), (Math.PI / 2) * (skyrotup.valueAsNumber / 900.0));
stars.rotateOnAxis(new THREE.Vector3(0, 1, 0), (Math.PI / 2) * (skyrotright.valueAsNumber / 900.0));
stars.rotateOnAxis(new THREE.Vector3(0, 0, 1), (Math.PI / 2) * ((a * 35.0 + skyrotup.valueAsNumber) / 900.0));
stars_material.opacity = (1.0 - a) * 0.7 + 0.3;
};
// can we get our hrozion recentered?
//stars.rotateOnAxis(new THREE.Vector3(0, 0, 1), (Math.PI / 2) * (3 / 90.0));
//stars.rotateOnAxis(new THREE.Vector3(0, 0, 1), (Math.PI / 2) * (1.3 / 90.0));
//stars.rotateOnAxis(new THREE.Vector3(0, 0, 1), (Math.PI / 2) * (1.5 / 90.0));
applycameraoffset += delegate
{
scenezooms.rotation.set(0, 0, 0);
// keep skybox where it is
scenezooms.rotateOnAxis(new THREE.Vector3(0, 0, 1), (Math.PI / 2) * (zoomrotup.valueAsNumber / 900.0));
scenezooms.rotateOnAxis(new THREE.Vector3(0, 1, 0), (Math.PI / 2) * (zoomrotright.valueAsNumber / 900.0));
};
var hideskybox = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox", @checked = true }.AttachToDocument();
//Native.window.onframe += delegate
//{
// //
// stars.visible = !hideskybox.@checked;
//};
hideskybox.onchange += delegate
{
//
stars.visible = !hideskybox.@checked;
};
stars.visible = !hideskybox.@checked;
scene.add(stars);
}
);
#endregion
//var NYonly = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "NY only" }.AttachToDocument();
var PXonly = new IHTMLInput
{
type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox,
@checked = true,
title = "PX only"
}.AttachToDocument();
//new Models.ColladaS6Edge().Source.Task.ContinueWithResult(
// dae =>
{
//dae.position.y = -80;
//dae.AttachTo(sceneg);
//scene.add(dae);
//oo.Add(dae);
// view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html
// https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html
Native.window.onframe +=
e =>
{
// Z:\jsc.svn\examples\javascript\test\TestDelegateIfIfReturn\Application.cs
// let render man know..
var flag1 = vsync1renderman != null;
// nonroslyn!!
if (flag1)
// this if block is not detected?
{
// whats going on with if clauses?
nop();
// wtf???
var flag0 = vsync1renderman.Task.IsCompleted;
if (flag0)
return;
}
if (vsync0ambient != null)
if (vsync0ambient.Task.IsCompleted)
return;
// 38045ms Native.window.onframe { vsync1renderman = , vsync0ambient = [object Object] }
//Console.WriteLine("Native.window.onframe " + new { vsync1renderman, vsync0ambient });
//return;
//if (pause) return;
//if (pause.@checked)
// return;
// can we float out of frame?
// haha. a bit too flickery.
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0;
//dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0;
//globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0;
//clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0;
//sphere.rotation.y += speed;
//clouds.rotation.y += speed;
// manual rebuild?
// red compiler notifies laptop chrome of pending update
// app reloads
applycameraoffset();
renderer0.clear();
//rendererPY.clear();
//cameraPX.aspect = canvasPX.aspect;
//cameraPX.updateProjectionMatrix();
// um what does this do?
//cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0;
// mousewheel allos the camera to move closer
// once we see the frame in vr, can we udp sync vr tracking back to laptop?
//this.targetPX.x += 1;
//this.targetNX.x -= 1;
//this.targetPY.y += 1;
//this.targetNY.y -= 1;
//this.targetPZ.z += 1;
//this.targetNZ.z -= 1;
// how does the 360 or shadertoy want our cubemaps?
// and then rotate right?
// how can we render cubemap?
if (cameraz.valueAsNumber == 0)
renderer0.setClearColor(0x0, 0);
else
renderer0.setClearColor(0x0, 1);
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEach(cc =>
{
cc.clearRect(0, 0, cubefacesize, cubefacesize);
}
);
//gl.clear()
if (PXonly.@checked)
{
var cameraPXsw = Stopwatch.StartNew();
renderer0.render(scene, cameraPX);
// 35207ms { cameraPXsw = 00:00:00.88 }
//75505ms { cameraPXsw = 00:00:00.61 }
//Console.WriteLine(new { cameraPXsw });
// clear if transparent?
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//return;
}
else
{
#region x
// upside down?
renderer0.render(scene, cameraPX);
canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNX);
canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region z
renderer0.render(scene, cameraPZ);
canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
renderer0.render(scene, cameraNZ);
canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
#endregion
#region y
renderer0.render(scene, cameraPY);
//canvasPY.save();
//canvasPY.translate(0, size);
//canvasPY.rotate((float)(-Math.PI / 2));
canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasPY.restore();
// the floor?
// render only this one?
renderer0.render(scene, cameraNY);
//canvasNY.save();
//canvasNY.translate(size, 0);
//canvasNY.rotate((float)(Math.PI / 2));
canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize);
//canvasNY.restore();
// ?
#endregion
//renderer0.render(scene, cameraPX);
//rendererPY.render(scene, cameraPY);
// at this point we should be able to render the sphere texture
//public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072;
//public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073;
//public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074;
//var cube0 = new IHTMLImage[] {
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(),
// new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz()
//};
#region Paint_Image
new[] {
canvasPX, canvasNX,
canvasPY, canvasNY,
canvasPZ, canvasNZ
}.WithEachIndex(
(img, index) =>
{
gl4K.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex);
//gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false);
gl4K.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true
// https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
//gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl4K.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas);
}
);
// http://stackoverflow.com/questions/11544608/how-to-clear-a-rectangle-area-in-webgl
if (cameraz.valueAsNumber == 0)
gl4K.clearColor(0, 0, 0, 0);
else
gl4K.clearColor(0, 0, 0, 1);
gl4K.clear(gl.COLOR_BUFFER_BIT);
// could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360
pass.Paint_Image(
0,
0,
0,
0,
0
//,
// gl_FragCoord
// cannot be scaled, and can be referenced directly.
// need another way to scale
//zoom: 0.3f
);
//paintsw.Stop();
// what does it do?
gl4K.flush();
#endregion
}
// let render man know..
if (vsync1renderman != null)
if (!vsync1renderman.Task.IsCompleted)
vsync1renderman.SetResult(null);
if (vsync0ambient != null)
if (!vsync0ambient.Task.IsCompleted)
vsync0ambient.SetResult(null);
};
}
//);
Console.WriteLine("do you see it?");
}
/// <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)
{
// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
// http://threejs.org/examples/#webgl_postprocessing_dof
// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"
Native.body.style.margin = "0px";
Native.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.Clear();
var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000);
camera.position.z = 200;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer(new { antialias = false });
renderer.setSize(Native.window.Width, Native.window.Height);
renderer.domElement.AttachToDocument();
renderer.sortObjects = false;
//var material_depth = new THREE.MeshDepthMaterial();
var urls = new[] {
new px().src, new nx().src,
new py().src, new ny().src,
new pz().src, new nz().src,
};
var textureCube = THREE.ImageUtils.loadTextureCube(urls);
//var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading };
// red vs yellow
var parameters = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading };
var cubeMaterial = new THREE.MeshBasicMaterial(parameters);
var geo = new THREE.SphereGeometry(1, 20, 10);
var xgrid = 14;
var ygrid = 9;
var zgrid = 14;
var nobjects = xgrid * ygrid * zgrid;
var c = 0;
//var s = 0.25;
var s = 60;
for (var i = 0; i < xgrid; i++)
for (var j = 0; j < ygrid; j++)
for (var k = 0; k < zgrid; k++)
{
var mesh = new THREE.Mesh(geo, cubeMaterial);
var x = 200 * (i - xgrid / 2);
var y = 200 * (j - ygrid / 2);
var z = 200 * (k - zgrid / 2);
mesh.position.set(x, y, z);
mesh.scale.set(s, s, s);
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
scene.add(mesh);
//objects.push(mesh);
c++;
}
//scene.matrixAutoUpdate = false;
var renderPass = new THREE.RenderPass(scene, camera);
// THREE.BokehPass relies on THREE.BokehShader
var bokehPass = new THREE.BokehPass(scene, camera, new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0,
width = Native.window.Width,
height = Native.window.Height
});
bokehPass.renderToScreen = true;
// maskpass
// THREE.EffectComposer relies on THREE.CopyShader
var composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(bokehPass);
renderer.autoClear = false;
var effectController = new
{
focus = 1.0,
aperture = 0.025,
maxblur = 1.0
};
//var matChanger = function() {
// postprocessing.bokeh.uniforms["focus"].value = effectController.focus;
// postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture;
// postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur;
// };
var controls = new THREE.OrbitControls(camera);
#region onframe
Native.window.onframe +=
delegate
{
controls.update();
camera.position = controls.center.clone();
composer.render(0.1);
};
#endregion
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);
}
);
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine
// inspired by http://granular.cs.umu.se/cannon.js/examples/threejs_fps.html
/// <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)
{
//Uncaught Error: ERROR: Quaternion's .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code.
// WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported
// IE11 does not work yet
//DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();
// DEPRECATED: Quaternion's .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead. Three.js:913
//Uncaught TypeError: Object [object Object] has no method 'subSelf'
// { REVISION: '57' };
var boxes = new List <CANNON.RigidBody>();
var boxMeshes = new List <THREE.Mesh>();
var balls = new List <CANNON.RigidBody>();
var ballMeshes = new List <THREE.Mesh>();
Func <long> Date_now = () => (long)new IFunction("return Date.now();").apply(null);
var time = Date_now();
#region initCannon
// // Setup our world
var world = new CANNON.World();
world.quatNormalizeSkip = 0;
world.quatNormalizeFast = false;
//world.solver.setSpookParams(300, 10);
world.solver.iterations = 5;
world.gravity.set(0, -20, 0);
world.broadphase = new CANNON.NaiveBroadphase();
// // Create a slippery material (friction coefficient = 0.0)
var physicsMaterial = new CANNON.Material("slipperyMaterial");
var physicsContactMaterial = new CANNON.ContactMaterial(
physicsMaterial,
physicsMaterial,
0.0, // friction coefficient
0.3 // restitution
);
// // We must add the contact materials to the world
world.addContactMaterial(physicsContactMaterial);
var controls_sphereShape = default(CANNON.Sphere);
var controls_sphereBody = default(CANNON.RigidBody);
{ // Create a sphere
var mass = 5;
var radius = 1.3;
var sphereShape = new CANNON.Sphere(radius);
var sphereBody = new CANNON.RigidBody(mass, sphereShape, physicsMaterial);
controls_sphereShape = sphereShape;
controls_sphereBody = sphereBody;
sphereBody.position.set(0, 5, 0);
sphereBody.linearDamping = 0.05;
world.add(sphereBody);
// // Create a plane
var groundShape = new CANNON.Plane();
var groundBody = new CANNON.RigidBody(0, groundShape, physicsMaterial);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.add(groundBody);
}
#endregion
#region init
var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 0.1, 1000);
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 0, 500);
var ambient = new THREE.AmbientLight(0x111111);
scene.add(ambient);
var light = new THREE.SpotLight(0xffffff, 1.0);
light.position.set(10, 30, 20);
light.target.position.set(0, 0, 0);
// if(true){
light.castShadow = true;
light.shadowCameraNear = 20;
light.shadowCameraFar = 50;//camera.far;
light.shadowCameraFov = 40;
light.shadowMapBias = 0.1;
light.shadowMapDarkness = 0.7;
light.shadowMapWidth = 2 * 512;
light.shadowMapHeight = 2 * 512;
// //light.shadowCameraVisible = true;
// }
scene.add(light);
var controls = new PointerLockControls(camera, controls_sphereBody);
scene.add(controls.getObject());
// // floor
var geometry = new THREE.PlaneGeometry(300, 300, 50, 50);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
var material = new THREE.MeshLambertMaterial(new { color = 0xdddddd });
//Native.Window.
// THREE.Design.THREE.ColorUtils.adjustHSV(material.color, 0, 0, 0.9);
// Replaced ColorUtils.adjustHSV() with Color's .offsetHSL().
//new IFunction("material", "THREE.ColorUtils.offsetHSL( material.color, 0, 0, 0.9 );").apply(null, material);
//
var mesh = new THREE.Mesh(geometry, material)
{
castShadow = true,
receiveShadow = true
};
scene.add(mesh);
var renderer = new THREE.WebGLRenderer(new object());
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
//renderer.setSize(Native.Window.Width, Native.Window.Height);
//renderer.setClearColor(scene.fog.color, 1);
renderer.domElement.style.backgroundColor = JSColor.Black;
renderer.domElement.AttachToDocument();
#region onresize
Action AtResize = delegate
{
camera.aspect = Native.window.aspect;
camera.updateProjectionMatrix();
renderer.setSize(Native.window.Width, Native.window.Height);
};
Native.window.onresize +=
delegate
{
AtResize();
};
AtResize();
#endregion
var r = new Random();
Func <f> Math_random = () => r.NextFloat();
#region Add boxes
{ //
for (var i = 0; i < 32; i++)
{
var boxsize = Math_random() * 0.5;
var halfExtents = new CANNON.Vec3(boxsize, boxsize, boxsize);
var boxShape = new CANNON.Box(halfExtents);
var boxGeometry = new THREE.CubeGeometry(halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2);
var x = (Math_random() - 0.5) * 20;
var y = 1 + (Math_random() - 0.5) * 1;
var z = (Math_random() - 0.5) * 20;
var boxBody = new CANNON.RigidBody(5, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
world.add(boxBody);
scene.add(boxMesh);
boxBody.position.set(x, y, z);
boxMesh.position.set(x, y, z);
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
//boxMesh.useQuaternion = true;
boxes.Add(boxBody);
boxMeshes.Add(boxMesh);
}
}
#endregion
#region Add linked boxes
{ //
var size = 0.5;
var he = new CANNON.Vec3(size, size, size * 0.1);
var boxShape = new CANNON.Box(he);
var mass = 0.0;
var space = 0.1 * size;
var N = 5;
var last = default(CANNON.RigidBody);
var boxGeometry = new THREE.CubeGeometry(he.x * 2, he.y * 2, he.z * 2);
for (var i = 0; i < N; i++)
{
var boxbody = new CANNON.RigidBody(mass, boxShape);
var boxMesh = new THREE.Mesh(boxGeometry, material);
boxbody.position.set(5, (N - i) * (size * 2 + 2 * space) + size * 2 + space, 0);
boxbody.linearDamping = 0.01;
boxbody.angularDamping = 0.01;
//boxMesh.useQuaternion = true;
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
world.add(boxbody);
scene.add(boxMesh);
boxes.Add(boxbody);
boxMeshes.Add(boxMesh);
if (i != 0)
{
// Connect this body to the last one
var c1 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(-size, size + space, 0), last, new CANNON.Vec3(-size, -size - space, 0));
var c2 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(size, size + space, 0), last, new CANNON.Vec3(size, -size - space, 0));
world.addConstraint(c1);
world.addConstraint(c2);
}
else
{
mass = 0.3;
}
last = boxbody;
}
}
#endregion
#endregion
var dt = 1.0 / 60;
controls.enabled = true;
// vr and tilt shift?
Native.window.onframe += delegate
{
if (controls.enabled)
{
// how big of a world can we hold?
// async ?
world.step(dt);
// Update ball positions
for (var i = 0; i < balls.Count; i++)
{
balls[i].position.copy(ballMeshes[i].position);
balls[i].quaternion.copy(ballMeshes[i].quaternion);
}
// Update box positions
for (var i = 0; i < boxes.Count; i++)
{
boxes[i].position.copy(boxMeshes[i].position);
boxes[i].quaternion.copy(boxMeshes[i].quaternion);
}
}
controls.update(Date_now() - time);
renderer.render(scene, camera);
time = Date_now();
};
#region havePointerLock
renderer.domElement.onclick +=
delegate
{
renderer.domElement.requestPointerLock();
};
#endregion
#region onmousedown
renderer.domElement.onmousedown +=
e =>
{
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");
renderer.domElement.requestFullscreen();
renderer.domElement.requestPointerLock();
return;
}
var ballradius = 0.1 + Math_random() * 0.9;
var ballShape = new CANNON.Sphere(ballradius);
var ballGeometry = new THREE.SphereGeometry(ballShape.radius, 32, 32);
var shootDirection = new THREE.Vector3();
var shootVelo = 15;
var projector = new THREE.Projector();
Action <THREE.Vector3> getShootDir = (targetVec) =>
{
var vector = targetVec;
targetVec.set(0, 0, 1);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray((THREE.Vector3)(object) controls_sphereBody.position,
vector
//.subSelf(controls_sphereBody.position)
.normalize()
);
targetVec.x = ray.direction.x;
targetVec.y = ray.direction.y;
targetVec.z = ray.direction.z;
};
var x = controls_sphereBody.position.x;
var y = controls_sphereBody.position.y;
var z = controls_sphereBody.position.z;
// could we attach physics via binding list?
var ballBody = new CANNON.RigidBody(1, ballShape);
var ballMesh = new THREE.Mesh(ballGeometry, material);
world.add(ballBody);
scene.add(ballMesh);
ballMesh.castShadow = true;
ballMesh.receiveShadow = true;
balls.Add(ballBody);
ballMeshes.Add(ballMesh);
getShootDir(shootDirection);
ballBody.velocity.set(shootDirection.x * shootVelo,
shootDirection.y * shootVelo,
shootDirection.z * shootVelo);
// // Move the ball outside the player sphere
x += shootDirection.x * (controls_sphereShape.radius + ballShape.radius);
y += shootDirection.y * (controls_sphereShape.radius + ballShape.radius);
z += shootDirection.z * (controls_sphereShape.radius + ballShape.radius);
ballBody.position.set(x, y, z);
ballMesh.position.set(x, y, z);
//ballMesh.useQuaternion = true;
};
#endregion
//var ze = new ZeProperties();
//ze.Show();
//ze.Left = 0;
//ze.Add(() => renderer);
//ze.Add(() => controls);
//ze.Add(() => scene);
}
