// 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/chromeequirectangularcameraexperiment
// "x:\util\android-sdk-windows\platform-tools\adb.exe" install -r "r:\jsc.svn\examples\javascript\WebGL\WebGLVRHZTeaser\WebGLVRHZTeaser\bin\Debug\staging\WebGLVRHZTeaser.ApplicationWebService\staging.apk\staging\apk\bin\WebGLVRHZTeaser.Activities-release.apk"
//I/Web Console(25108): 0ms NewInstanceConstructor restore fields.. at http://10.144.157.179:23222/view-source:50800
//I/Web Console(25108): THREE.WebGLRenderer at http://10.144.157.179:23222/view-source:90370
//E/Web Console(25108): Error creating WebGL context. at http://10.144.157.179:23222/view-source:90581
//E/Web Console(25108): Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null at http://10.144.157.179:23222/view-source:90585
/// <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)
{
#if false
#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)
{
chrome.Notification.DefaultTitle = "HZ";
chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src;
ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text);
return;
}
#endregion
#endif
// https://code.google.com/p/chromium/issues/detail?id=483890
Native.document.body.style.margin = "0px";
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
Native.body.style.backgroundColor = "black";
Native.document.body.Clear();
// what dto do if webgl not supported?
double SCREEN_WIDTH = Native.window.Width;
double SCREEN_HEIGHT = Native.window.Height;
#region scene
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var sceneRenderTarget = new THREE.Scene();
var cameraOrtho = new THREE.OrthographicCamera(
(int)SCREEN_WIDTH / -2,
(int)SCREEN_WIDTH / 2,
(int)SCREEN_HEIGHT / 2,
(int)SCREEN_HEIGHT / -2,
-100000,
100000
);
cameraOrtho.position.z = 100;
sceneRenderTarget.add(cameraOrtho);
var camera = new THREE.PerspectiveCamera(
//40,
20,
//10,
Native.window.aspect, 2,
// how far out do we want to zoom?
200000
//9000
);
camera.position.set(-1200, 800, 1200);
var target = new THREE.Vector3(0, 0, 0);
scene.add(camera);
//scene.add(new THREE.AmbientLight(0x212121));
//var spotLight = new THREE.SpotLight(0xffffff, 1.15);
//spotLight.position.set(500, 2000, 0);
//spotLight.castShadow = true;
//scene.add(spotLight);
//var pointLight = new THREE.PointLight(0xff4400, 1.5);
//pointLight.position.set(0, 0, 0);
//scene.add(pointLight);
//scene.add(new THREE.AmbientLight(0xaaaaaa));
scene.add(new THREE.AmbientLight(0x101030));
#endregion
#region light
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.1;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var renderer = new THREE.WebGLRenderer(
new
{
// http://stackoverflow.com/questions/20495302/transparent-background-with-three-js
alpha = true,
preserveDrawingBuffer = true,
antialias = true
}
);
renderer.setSize(1920, 1080);
//renderer.setSize(2560, 1440);
renderer.domElement.AttachToDocument();
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
var renderTarget = new THREE.WebGLRenderTarget(
Native.window.Width, Native.window.Height,
new
{
minFilter = THREE.LinearFilter,
magFilter = THREE.LinearFilter,
format = THREE.RGBAFormat,
stencilBufer = false
}
);
//var composer = new THREE.EffectComposer(renderer, renderTarget);
//var renderModel = new THREE.RenderPass(scene, camera);
//composer.addPass(renderModel);
//#region vblur
//var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
//var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);
////var bluriness = 6.0;
//var bluriness = 4.0;
//// Show Details Severity Code Description Project File Line
////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183
//(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
//(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;
//(hblur.uniforms as dynamic).r.value = 0.5;
//(vblur.uniforms as dynamic).r.value = 0.5;
////vblur.renderToScreen = true;
//composer.addPass(hblur);
//composer.addPass(vblur);
//#endregion
// Uncaught TypeError: renderer.setSize is not a function
// Uncaught TypeError: renderer.getClearColor is not a function
var effect = new THREE.OculusRiftEffect(
renderer,
// how to get the vblur into oculus effect?
//renderModel,
//composer,
//renderTarget,
new
{
worldScale = 100,
//HMD
}
);
effect.setSize(1920, 1080);
//effect.setSize(2560, 1440);
#region WebGLRah66Comanche
// why isnt it being found?
// "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj"
new global::WebGLRah66Comanche.Comanche(
).Source.Task.ContinueWithResult(
dae =>
{
//dae.position.y = -40;
//dae.position.z = 280;
scene.add(dae);
//oo.Add(dae);
// wont do it
//dae.castShadow = true;
dae.children[0].children[0].children.WithEach(x => x.castShadow = true);
// the rotors?
dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);
dae.scale.set(0.5, 0.5, 0.5);
dae.position.x = -900;
dae.position.z = +900;
// raise it up
dae.position.y = 400;
//var sw = 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;
// dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
//};
}
);
#endregion
#region tree
// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs
var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
var tloader = 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
tloader.load(
new WebGLGodRay.Models.tree().Content.src,
new Action<THREE.Geometry>(
xgeometry =>
{
var treeMesh = new THREE.Mesh(xgeometry, materialScene);
treeMesh.position.set(0, -150, -150);
treeMesh.position.x = -900;
treeMesh.position.z = -900;
treeMesh.position.y = 25;
var tsc = 400;
treeMesh.scale.set(tsc, tsc, tsc);
treeMesh.matrixAutoUpdate = false;
treeMesh.updateMatrix();
treeMesh.AttachTo(scene);
}
)
);
#endregion
#region create field
// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
// could we get some film grain?
var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
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.rotation.x = -Math.PI / 2;
parent.scale.set(10, 10, 10);
scene.add(parent);
}
var random = new Random();
var meshArray = new List<THREE.Mesh>();
var geometry = new THREE.CubeGeometry(1, 1, 1);
var sw = Stopwatch.StartNew();
for (var i = 3; i < 9; 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 % 7 * 200 - 2.5f;
// raise it up
ii.position.y = .5f * 100;
ii.position.z = -1 * i * 100;
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);
if (i % 2 == 0)
{
#if FWebGLHZBlendCharacter
#region SpeedBlendCharacter
var _i = i;
{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }
var blendMesh = new THREE.SpeedBlendCharacter();
blendMesh.load(
new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
new Action(
delegate
{
// buildScene
//blendMesh.rotation.y = Math.PI * -135 / 180;
blendMesh.castShadow = true;
// we cannot scale down we want our shadows
//blendMesh.scale.set(0.1, 0.1, 0.1);
blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;
// raise it up
//blendMesh.position.y = .5f * 100;
blendMesh.position.z = -1 * _i * 100;
var xtrue = true;
// run
blendMesh.setSpeed(1.0);
// will in turn call THREE.AnimationHandler.play( this );
//blendMesh.run.play();
// this wont help. bokah does not see the animation it seems.
//blendMesh.run.update(1);
blendMesh.showSkeleton(!xtrue);
scene.add(blendMesh);
Native.window.onframe +=
delegate
{
blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
};
}
)
);
#endregion
#endif
}
}
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
//cube.position.x = -100;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZCannon
new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
async cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
// jsc shat about out of band code patching?
cube.position.z = 600;
cube.position.x = -900;
//cube.position.y = -400;
//cube.position.x = -100;
//cube.position.y = -400;
////cube.position.y = (cube.scale.y * 50) / 2;
//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
// if i want to rotate, how do I do it?
//cube.rotation.z = random() + Math.PI;
//cube.rotation.x = random() + Math.PI;
var sw2 = Stopwatch.StartNew();
scene.add(cube);
//interactiveObjects.Add(cube);
// offset is wrong
//while (true)
//{
// await Native.window.async.onframe;
// cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;
//}
}
);
#endregion
#region HZBunker
new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
cube =>
{
// https://github.com/mrdoob/three.js/issues/1285
//cube.children.WithEach(c => c.castShadow = true);
cube.castShadow = true;
//cube.traverse(
// new Action<THREE.Object3D>(
// child =>
// {
// // does it work? do we need it?
// //if (child is THREE.Mesh)
// child.castShadow = true;
// //child.receiveShadow = true;
// }
// )
//);
// um can edit and continue insert code going back in time?
cube.scale.x = 10.0;
cube.scale.y = 10.0;
cube.scale.z = 10.0;
//cube.castShadow = true;
//dae.receiveShadow = true;
cube.position.x = -1000;
//cube.position.y = (cube.scale.y * 50) / 2;
cube.position.z = 0;
scene.add(cube);
}
);
#endregion
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
//var controls = new THREE.OrbitControls(camera);
var camera_rotation_z = 0.0;
Native.window.onframe +=
delegate
{
////var delta = clock.getDelta();
//controls.update();
var scale = 1.0;
var delta = clock.getDelta();
var stepSize = delta * scale;
if (stepSize > 0)
{
//characterController.update(stepSize, scale);
//gui.setSpeed(blendMesh.speed);
THREE.AnimationHandler.update(stepSize);
}
//camera.position = controls.center.clone();
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//var lat2 = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
//Native.document.title = new { lon0 }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = camera.position.x + (500 * Math.Sin(phi) * Math.Cos(theta));
target.y = camera.position.y + (500 * Math.Cos(phi));
target.z = camera.position.z + (500 * Math.Sin(phi) * Math.Sin(theta));
//controls.update();
//camera.position = controls.center.clone();
// camera beta tilt?
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
//composer.render(0.1);
//renderer.render(scene, camera);
effect.render(scene, camera);
};
new { }.With(
async delegate
{
retry:
//var s = (double)Native.window.Width / 1920.0;
//var s = (double)Native.window.Height / Native.screen.height;
//var s = (double)Native.window.Height / 1440;
var s = (double)Native.window.Height / 1080;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
// gamma -0 .. -90
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
Alternative calculation (replacing lines 99-107 above):
var compassHeading = Math.atan2(rA, rB);
if(rA < 0) {
compassHeading += 2 * Math.PI;
}
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection; ;
};
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo
//0001 02000178 ScriptCoreLib::ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProvider
//script: error JSC1000: Java : Opcode not implemented: stind.i1 at ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProviderByMahmood.CreatePaddedBuffer
//internal compiler error at method
// script: error JSC1000: Java :
//BCL needs another method, please define it.
//Cannot call type without script attribute :
//System.Threading.Monitor for Void Enter(System.Object, Boolean ByRef) used at
//WebGLVRCreativeLeadership.Activities.ApplicationWebServiceActivity+<>c__DisplayClass24.<CreateServer>b__29 at offset 0018.
//If the use of this method is intended, an implementation should be provided with the attribute[Script(Implements = typeof(...)] set.You may have mistyped it.
// I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
//I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
public Application(com.abstractatech.apps.vr.HTML.Pages.IApp page)
{
#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)
{
ChromeTCPServer.TheServerWithAppWindow.Invoke(com.abstractatech.apps.vr.HTML.Pages.AppSource.Text);
return;
}
#endregion
// https://play.google.com/store/apps/details?id=com.abstractatech.vr
// could we display LAN UDP notifications too. like
// which youtube video is playing?
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.backgroundColor = "black";
// https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652
// hResolution: 1920,
//vResolution: 1080,
// "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln"
// http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0
// https://github.com/troffmo5/OculusStreetView
// http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect
// http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/
// http://stemkoski.github.io/Three.js/Sprites.html
// http://stemkoski.github.io/Three.js/Texture-Animation.html
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html
var window = Native.window;
var fov = 70.0;
var camera = new THREE.PerspectiveCamera(fov,
window.aspect, 1, 1100);
var target = new THREE.Vector3(0, 0, 0);
//(camera as dynamic).target = target;
var scene = new THREE.Scene();
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xafafaf));
// http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/
// http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect
scene.add(new THREE.AmbientLight(0x2f2f2f));
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
#region light
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
new _2294472375_24a3b8ef46_o().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
scene.add(mesh);
#region sprite2
var crateTexture = THREE.ImageUtils.loadTexture(
new ChromeCreativeLeadership.HTML.Images.FromAssets.Mockup().src
);
var crateMaterial = new THREE.SpriteMaterial(
new
{
map = crateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite2 = new THREE.Sprite(crateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
//sprite2.position.set(200, 50, 0);
sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite2.scale.set(
_2294472375_24a3b8ef46_o.ImageDefaultWidth * 0.08,
_2294472375_24a3b8ef46_o.ImageDefaultHeight * 0.08,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite2);
#endregion
#region ColladaAudiA4
new ColladaAudiA4().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
//dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
//dae.position.z = 65;
// right
dae.position.z = -20;
dae.position.x = -100;
dae.position.y = -90;
// jsc, do we have ILObserver available yet?
dae.scale.x = 1.0;
dae.scale.y = 1.0;
dae.scale.z = 1.0;
//dae.position.y = -80;
scene.add(dae);
//oo.Add(dae);
}
);
#endregion
#region nexus7
new nexus7().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
//dae.position.z = 65;
// left
//dae.position.x = 200;
dae.position.z = -100;
dae.position.y = -50;
//dae.position.z = 100;
// jsc, do we have ILObserver available yet?
dae.scale.x = 13.5;
dae.scale.y = 13.5;
dae.scale.z = 13.5;
//dae.position.y = -80;
scene.add(dae);
//oo.Add(dae);
}
);
#endregion
// // DK2
// hResolution: 1920,
//vResolution: 1080,
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1920, 1080);
// broken?
var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 };
var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 };
var HMD = new OculusRiftEffectOptions
{
hResolution = window.Width,
vResolution = window.Height,
hScreenSize = 0.12576,
vScreenSize = 0.07074,
interpupillaryDistance = 0.0635,
lensSeparationDistance = 0.0635,
eyeToScreenDistance = 0.041,
// j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0];
//distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 },
distortionK = distortionK,
// j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0];
//chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }
chromaAbParameter = chromaAbParameter
};
var effect = new THREE.OculusRiftEffect(
renderer, new
{
worldScale = 100,
//HMD
}
);
effect.setSize(1920, 1080);
renderer.domElement.AttachToDocument();
//renderer.domElement.style.position = IStyle.PositionEnum.absolute;
renderer.domElement.style.SetLocation(0, 0);
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
// x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs
#region onresize
new { }.With(
async delegate
{
retry:
var s = (double)Native.window.Width / 1920.0;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
#endregion
//#region onresize
//Native.window.onresize +=
// delegate
// {
// camera.aspect = Native.window.aspect;
// camera.updateProjectionMatrix();
// renderer.setSize(window.Width, window.Height);
// effect.setSize(window.Width, window.Height);
// };
//#endregion
//Native.document.body.onmousewheel +=
// e =>
// {
// fov -= e.WheelDirection * 5.0;
// camera.projectionMatrix.makePerspective(fov,
// (double)window.Width / window.Height, 1, 1100);
// };
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
var camera_rotation_z = 0.0;
var labove = new NotificationLayout();
#region sprite2 above
{
labove.Message.innerText = "VR CREATIVE LEADERSHIP";
labove.layout.style.background = "";
new { }.With(
async delegate
{
retry:
// make it blink. gaze cursor is on it?
labove.box.style.background = "rgba(255,255,0,0.7)";
labove.box.setAttribute("invoke", "onmutation1");
await Task.Delay(1500);
// is mutation observer noticing it?
labove.box.style.background = "rgba(255,255,255,0.7)";
labove.box.setAttribute("invoke", "onmutation2");
await Task.Delay(1500);
goto retry;
}
);
var c = labove.AsCanvas();
var xcrateTexture = new THREE.Texture(c);
// like video texture
Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; };
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map = xcrateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var xsprite2 = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
xsprite2.position.set(200, 0, 0);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
xsprite2.scale.set(
c.width * 0.5,
c.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(xsprite2);
}
#endregion
//var lineTo = new List<THREE.Vector3>();
var others = new
{
ui = default(NotificationLayout),
canvas = default(IHTMLCanvas),
map = default(THREE.Texture),
sprite = default(THREE.Sprite)
}.ToEmptyList();
#region add
Action <NotificationLayout> add = ui =>
{
ui.layout.style.background = "";
var canvas = ui.AsCanvas();
var index = others.Count;
//ui.Message += new { index };
//ui.Message.innerText += new { index };
//lbelow0.Message = new { THREE.REVISION }.ToString();
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )
var map = new THREE.Texture(canvas);
map.minFilter = THREE.LinearFilter;
// like video texture
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left middle
//sprite2.position.set(200, 0, 0);
//sprite.position.set(250, -50, 50);
//lineTo.Add(sprite.position);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite.scale.set(
canvas.width * 0.5,
canvas.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite);
others.Add(
new
{
ui,
canvas,
map,
sprite
}
);
var sw = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// can we get some of the crazy c++ template bitmapbuffer code from the past?
map.needsUpdate = true;
var offset = Math.PI * 2 * ((double)(index + 1) / others.Count);
sprite.position.x = 300;
sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
};
};
#endregion
#region NotificationLayout
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Advanced Mechanics by Portugal Design Lab"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Face Value by mshariful"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Mind Wall. by Sumit Goski"
}
);
#endregion
#region lines
{
var geometry = new THREE.Geometry
{
// how can we keep streaming verticies data points to gpu?
vertices =
others.SelectMany(
lineTo =>
new[]
{
new THREE.Vector3(200, 0, 0),
lineTo.sprite.position
}
).ToArray()
// https://github.com/mrdoob/three.js/wiki/Updates
// http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render
//verticesNeedUpdate = true
};
Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; };
var o = new THREE.Line(geometry, new THREE.LineDashedMaterial(
new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 }
), THREE.LineStrip);
//objects.Add(o);
scene.add(o);
}
#endregion
Native.window.onframe +=
ee =>
{
// look we are having html in 3D in VR!
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//lat = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
target.y = 500 * Math.Cos(phi);
target.z = 500 * Math.Sin(phi) * Math.Sin(theta);
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
//renderer.render(scene, camera);
effect.render(scene, camera);
};
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
* Alternative calculation (replacing lines 99-107 above):
*
* var compassHeading = Math.atan2(rA, rB);
*
* if(rA < 0) {
* compassHeading += 2 * Math.PI;
* }
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection;;
};
// https://developer.android.com/training/system-ui/immersive.html
}
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo
//0001 02000178 ScriptCoreLib::ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProvider
//script: error JSC1000: Java : Opcode not implemented: stind.i1 at ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProviderByMahmood.CreatePaddedBuffer
//internal compiler error at method
// script: error JSC1000: Java :
//BCL needs another method, please define it.
//Cannot call type without script attribute :
//System.Threading.Monitor for Void Enter(System.Object, Boolean ByRef) used at
//WebGLVRCreativeLeadership.Activities.ApplicationWebServiceActivity+<>c__DisplayClass24.<CreateServer>b__29 at offset 0018.
//If the use of this method is intended, an implementation should be provided with the attribute[Script(Implements = typeof(...)] set.You may have mistyped it.
// I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
//I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
public Application(com.abstractatech.apps.vr.HTML.Pages.IApp page)
{
#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)
{
ChromeTCPServer.TheServerWithAppWindow.Invoke(com.abstractatech.apps.vr.HTML.Pages.AppSource.Text);
return;
}
#endregion
// https://play.google.com/store/apps/details?id=com.abstractatech.vr
// could we display LAN UDP notifications too. like
// which youtube video is playing?
Native.body.Clear();
Native.body.style.margin = "0px";
Native.body.style.backgroundColor = "black";
// https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652
// hResolution: 1920,
//vResolution: 1080,
// "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln"
// http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0
// https://github.com/troffmo5/OculusStreetView
// http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect
// http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/
// http://stemkoski.github.io/Three.js/Sprites.html
// http://stemkoski.github.io/Three.js/Texture-Animation.html
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html
var window = Native.window;
var fov = 70.0;
var camera = new THREE.PerspectiveCamera(fov,
window.aspect, 1, 1100);
var target = new THREE.Vector3(0, 0, 0);
//(camera as dynamic).target = target;
var scene = new THREE.Scene();
//scene.add(new THREE.AmbientLight(0xffffff));
//scene.add(new THREE.AmbientLight(0xafafaf));
// http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/
// http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect
scene.add(new THREE.AmbientLight(0x2f2f2f));
//var light = new THREE.DirectionalLight(0xffffff, 1.0);
#region light
var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 2.5);
//var light = new THREE.DirectionalLight(0xffffff, 1.5);
//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
var lightOffset = new THREE.Vector3(
2000,
700,
// lower makes longer shadows
700.0
);
light.position.copy(lightOffset);
light.castShadow = true;
var xlight = light as dynamic;
xlight.shadowMapWidth = 4096;
xlight.shadowMapHeight = 2048;
xlight.shadowDarkness = 0.3;
//xlight.shadowDarkness = 0.5;
xlight.shadowCameraNear = 10;
xlight.shadowCameraFar = 10000;
xlight.shadowBias = 0.00001;
xlight.shadowCameraRight = 4000;
xlight.shadowCameraLeft = -4000;
xlight.shadowCameraTop = 4000;
xlight.shadowCameraBottom = -4000;
xlight.shadowCameraVisible = true;
scene.add(light);
#endregion
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40),
new THREE.MeshBasicMaterial(new
{
map = THREE.ImageUtils.loadTexture(
new _2294472375_24a3b8ef46_o().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
//new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src
)
}));
mesh.scale.x = -1;
scene.add(mesh);
#region sprite2
var crateTexture = THREE.ImageUtils.loadTexture(
new ChromeCreativeLeadership.HTML.Images.FromAssets.Mockup().src
);
var crateMaterial = new THREE.SpriteMaterial(
new
{
map = crateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite2 = new THREE.Sprite(crateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
//sprite2.position.set(200, 50, 0);
sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite2.scale.set(
_2294472375_24a3b8ef46_o.ImageDefaultWidth * 0.08,
_2294472375_24a3b8ef46_o.ImageDefaultHeight * 0.08,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite2);
#endregion
#region ColladaAudiA4
new ColladaAudiA4().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
//dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
//dae.position.z = 65;
// right
dae.position.z = -20;
dae.position.x = -100;
dae.position.y = -90;
// jsc, do we have ILObserver available yet?
dae.scale.x = 1.0;
dae.scale.y = 1.0;
dae.scale.z = 1.0;
//dae.position.y = -80;
scene.add(dae);
//oo.Add(dae);
}
);
#endregion
#region nexus7
new nexus7().Source.Task.ContinueWithResult(
dae =>
{
// 90deg
dae.rotation.x = -Math.Cos(Math.PI);
//dae.scale.x = 30;
//dae.scale.y = 30;
//dae.scale.z = 30;
//dae.position.z = 65;
// left
//dae.position.x = 200;
dae.position.z = -100;
dae.position.y = -50;
//dae.position.z = 100;
// jsc, do we have ILObserver available yet?
dae.scale.x = 13.5;
dae.scale.y = 13.5;
dae.scale.z = 13.5;
//dae.position.y = -80;
scene.add(dae);
//oo.Add(dae);
}
);
#endregion
// // DK2
// hResolution: 1920,
//vResolution: 1080,
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1920, 1080);
// broken?
var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 };
var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 };
var HMD = new OculusRiftEffectOptions
{
hResolution = window.Width,
vResolution = window.Height,
hScreenSize = 0.12576,
vScreenSize = 0.07074,
interpupillaryDistance = 0.0635,
lensSeparationDistance = 0.0635,
eyeToScreenDistance = 0.041,
// j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0];
//distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 },
distortionK = distortionK,
// j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0];
//chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }
chromaAbParameter = chromaAbParameter
};
var effect = new THREE.OculusRiftEffect(
renderer, new
{
worldScale = 100,
//HMD
}
);
effect.setSize(1920, 1080);
renderer.domElement.AttachToDocument();
//renderer.domElement.style.position = IStyle.PositionEnum.absolute;
renderer.domElement.style.SetLocation(0, 0);
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
// x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs
#region onresize
new { }.With(
async delegate
{
retry:
var s = (double)Native.window.Width / 1920.0;
Native.document.body.style.transform = "scale(" + s + ")";
Native.document.body.style.transformOrigin = "0% 0%";
await Native.window.async.onresize;
goto retry;
}
);
#endregion
//#region onresize
//Native.window.onresize +=
// delegate
// {
// camera.aspect = Native.window.aspect;
// camera.updateProjectionMatrix();
// renderer.setSize(window.Width, window.Height);
// effect.setSize(window.Width, window.Height);
// };
//#endregion
//Native.document.body.onmousewheel +=
// e =>
// {
// fov -= e.WheelDirection * 5.0;
// camera.projectionMatrix.makePerspective(fov,
// (double)window.Width / window.Height, 1, 1100);
// };
var lon0 = -45.0;
var lon1 = 0.0;
var lon = new sum(
() => lon0,
() => lon1
);
var lat0 = 0.0;
var lat1 = 0.0;
// or could we do it with byref or pointers?
var lat = new sum(
() => lat0,
() => lat1
);
var phi = 0.0;
var theta = 0.0;
var camera_rotation_z = 0.0;
var labove = new NotificationLayout();
#region sprite2 above
{
labove.Message.innerText = "VR CREATIVE LEADERSHIP";
labove.layout.style.background = "";
new { }.With(
async delegate
{
retry:
// make it blink. gaze cursor is on it?
labove.box.style.background = "rgba(255,255,0,0.7)";
labove.box.setAttribute("invoke", "onmutation1");
await Task.Delay(1500);
// is mutation observer noticing it?
labove.box.style.background = "rgba(255,255,255,0.7)";
labove.box.setAttribute("invoke", "onmutation2");
await Task.Delay(1500);
goto retry;
}
);
var c = labove.AsCanvas();
var xcrateTexture = new THREE.Texture(c);
// like video texture
Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; };
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map = xcrateTexture,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var xsprite2 = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left
xsprite2.position.set(200, 0, 0);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
xsprite2.scale.set(
c.width * 0.5,
c.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(xsprite2);
}
#endregion
//var lineTo = new List<THREE.Vector3>();
var others = new
{
ui = default(NotificationLayout),
canvas = default(IHTMLCanvas),
map = default(THREE.Texture),
sprite = default(THREE.Sprite)
}.ToEmptyList();
#region add
Action<NotificationLayout> add = ui =>
{
ui.layout.style.background = "";
var canvas = ui.AsCanvas();
var index = others.Count;
//ui.Message += new { index };
//ui.Message.innerText += new { index };
//lbelow0.Message = new { THREE.REVISION }.ToString();
// THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )
var map = new THREE.Texture(canvas);
map.minFilter = THREE.LinearFilter;
// like video texture
var xcrateMaterial = new THREE.SpriteMaterial(
new
{
map,
useScreenCoordinates = false,
//color = 0xff0000
color = 0xffffff
}
);
var sprite = new THREE.Sprite(xcrateMaterial);
//floor
//sprite2.position.set(0, -200, 0);
// left middle
//sprite2.position.set(200, 0, 0);
//sprite.position.set(250, -50, 50);
//lineTo.Add(sprite.position);
//sprite2.position.set(0, 0, 200);
//sprite2.position.set(-100, 0, 0);
sprite.scale.set(
canvas.width * 0.5,
canvas.height * 0.5,
//64, 64,
1.0); // imageWidth, imageHeight
scene.add(sprite);
others.Add(
new
{
ui,
canvas,
map,
sprite
}
);
var sw = Stopwatch.StartNew();
Native.window.onframe += delegate
{
// can we get some of the crazy c++ template bitmapbuffer code from the past?
map.needsUpdate = true;
var offset = Math.PI * 2 * ((double)(index + 1) / others.Count);
sprite.position.x = 300;
sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
};
};
#endregion
#region NotificationLayout
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Advanced Mechanics by Portugal Design Lab"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Face Value by mshariful"
}
);
add(
new NotificationLayout
{
// keep attributes around?
// like we do with XElement sync?
Icon = new _371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With(
x =>
{
x.style.width = "96px";
x.style.height = "96px";
}
),
Message = "Mind Wall. by Sumit Goski"
}
);
#endregion
#region lines
{
var geometry = new THREE.Geometry
{
// how can we keep streaming verticies data points to gpu?
vertices =
others.SelectMany(
lineTo =>
new[]
{
new THREE.Vector3(200, 0, 0),
lineTo.sprite.position
}
).ToArray()
// https://github.com/mrdoob/three.js/wiki/Updates
// http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render
//verticesNeedUpdate = true
};
Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; };
var o = new THREE.Line(geometry, new THREE.LineDashedMaterial(
new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 }
), THREE.LineStrip);
//objects.Add(o);
scene.add(o);
}
#endregion
Native.window.onframe +=
ee =>
{
// look we are having html in 3D in VR!
//if (Native.document.pointerLockElement == Native.document.body)
// lon += 0.00;
//else
// lon += 0.01;
//lat = Math.Max(-85, Math.Min(85, lat));
//Native.document.title = new { lon, lat }.ToString();
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
target.y = 500 * Math.Cos(phi);
target.z = 500 * Math.Sin(phi) * Math.Sin(theta);
camera.lookAt(target);
camera.rotation.z += camera_rotation_z;
//renderer.render(scene, camera);
effect.render(scene, camera);
};
// http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html
// http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove
var compassHeadingOffset = 0.0;
var compassHeadingInitialized = 0;
#region compassHeading
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
Native.window.ondeviceorientation +=
dataValues =>
{
// Convert degrees to radians
var alphaRad = dataValues.alpha * (Math.PI / 180);
var betaRad = dataValues.beta * (Math.PI / 180);
var gammaRad = dataValues.gamma * (Math.PI / 180);
// Calculate equation components
var cA = Math.Cos(alphaRad);
var sA = Math.Sin(alphaRad);
var cB = Math.Cos(betaRad);
var sB = Math.Sin(betaRad);
var cG = Math.Cos(gammaRad);
var sG = Math.Sin(gammaRad);
// Calculate A, B, C rotation components
var rA = -cA * sG - sA * sB * cG;
var rB = -sA * sG + cA * sB * cG;
var rC = -cB * cG;
// Calculate compass heading
var compassHeading = Math.Atan(rA / rB);
// Convert from half unit circle to whole unit circle
if (rB < 0)
{
compassHeading += Math.PI;
}
else if (rA < 0)
{
compassHeading += 2 * Math.PI;
}
/*
Alternative calculation (replacing lines 99-107 above):
var compassHeading = Math.atan2(rA, rB);
if(rA < 0) {
compassHeading += 2 * Math.PI;
}
*/
// Convert radians to degrees
compassHeading *= 180 / Math.PI;
// Compass heading can only be derived if returned values are 'absolute'
// X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs
//Native.document.body.innerText = new { compassHeading }.ToString();
if (compassHeadingInitialized > 0)
{
lon1 = compassHeading - compassHeadingOffset;
}
else
{
compassHeadingOffset = compassHeading;
compassHeadingInitialized++;
}
};
#endregion
#region gamma
Native.window.ondeviceorientation +=
//e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
//e => lon = e.gamma;
e =>
{
lat1 = e.gamma;
// after servicing a running instance would be nice
// either by patching or just re running the whole iteration in the backgrou
camera_rotation_z = e.beta * 0.02;
};
#endregion
#region camera rotation
var old = new { clientX = 0, clientY = 0 };
Native.document.body.ontouchstart +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
old = n;
};
Native.document.body.ontouchmove +=
e =>
{
var n = new { e.touches[0].clientX, e.touches[0].clientY };
e.preventDefault();
lon0 += (n.clientX - old.clientX) * 0.2;
lat0 -= (n.clientY - old.clientY) * 0.2;
old = n;
};
Native.document.body.onmousemove +=
e =>
{
e.preventDefault();
if (Native.document.pointerLockElement == Native.document.body)
{
lon0 += e.movementX * 0.1;
lat0 -= e.movementY * 0.1;
//Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
}
};
Native.document.body.onmouseup +=
e =>
{
//drag = false;
e.preventDefault();
};
Native.document.body.onmousedown +=
e =>
{
//e.CaptureMouse();
//drag = true;
e.preventDefault();
Native.document.body.requestPointerLock();
};
Native.document.body.ondblclick +=
e =>
{
e.preventDefault();
Console.WriteLine("requestPointerLock");
};
#endregion
Native.body.onmousewheel +=
e =>
{
camera_rotation_z += 0.1 * e.WheelDirection; ;
};
// https://developer.android.com/training/system-ui/immersive.html
}
