// 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 }