private THREE.Mesh MakeMesh(THREE.BoxGeometry geometry) { THREE.Material mat = null; mat = new THREE.MeshLambertMaterial(); mat.color = new THREE.Color(); mat.color.setHex(Math.Random() * 0xffffff); THREE.Mesh mesh = new THREE.Mesh(geometry, mat); mesh.position.x = Math.Random() * 1000 - 500; mesh.position.y = Math.Random() * 600 - 300; mesh.position.z = Math.Random() * 800 - 400; mesh.rotation.x = Math.Random() * 2 * Math.PI; mesh.rotation.y = Math.Random() * 2 * Math.PI; mesh.rotation.z = Math.Random() * 2 * Math.PI; mesh.scale.x = Math.Random() * 2 + 1; mesh.scale.y = Math.Random() * 2 + 1; mesh.scale.z = Math.Random() * 2 + 1; mesh.castShadow = true; mesh.receiveShadow = true; return(mesh); }
private void ShowGeometry() { if (currentMesh != null) { scene.remove(currentMesh); } if (geometryIndex < 0) { geometryIndex = 0; } GeometryFunction f = functions[geometryIndex]; THREE.Geometry geometry = f.function(); THREE.Material mat = new THREE.MeshLambertMaterial(); mat.color = new THREE.Color().setHex(Math.Random() * 0xffffff); currentMesh = new THREE.Mesh(geometry, mat); scene.add(currentMesh); dropDownButton.Text(f.name); Render(); }
public override void Init() { DivElement div = new DivElement( ) { InnerHTML = @" W = translate | E = rotate | + = increase size | - = decrise seize <br /> Press Q to toggle world/local space" }; Container.AppendChild(div); renderer = new THREE.WebGLRenderer(); renderer.setSize(Width, Height); renderer.sortObjects = false; Container.AppendChild(renderer.domElement); // camera = new THREE.PerspectiveCamera(70, Width /Height, 1, 3000); camera.position.set(1000, 500, 1000); camera.lookAt(new THREE.Vector3(0, 200, 0)); scene = new THREE.Scene(); scene.add(new THREE.GridHelper(500, 100)); var light = new THREE.DirectionalLight(0xffffff, 2); light.position.set(1, 1, 1); scene.add(light); THREE.Texture texture = THREE.ImageUtils.loadTexture("textures/crate.gif", THREE.MappingMode.UVMapping, base.Render); //render texture.mapping = THREE.MappingMode.UVMapping; texture.anisotropy = renderer.getMaxAnisotropy(); var geometry = new THREE.BoxGeometry(200, 200, 200); THREE.Material material = new THREE.MeshLambertMaterial(); material.map = texture; controls = new THREE.TransformControls(camera, renderer.domElement); controls.addEventListener("change", base.Render); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); controls.attach(mesh); scene.add(controls); CreateTrackball(); Window.AddEventListener("keydown", this.SwitchCase, false); }
public override void Init() { var width = Width; var height = Height; var info = Document.CreateElement("div"); info.InnerHTML = "Drag to change the view"; Container.AppendChild(info); camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000); camera.position.y = 150; camera.position.z = 500; controls = new THREE.TrackballControls(camera); scene = new THREE.Scene(); THREE.PointLight light = new THREE.PointLight(0xffffff); light.position.set(500, 500, 500); scene.add(light); THREE.MeshLambertMaterial mat = new THREE.MeshLambertMaterial(); mat.shading = THREE.ShadingType.FlatShading; sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 20, 10), mat); scene.add(sphere); THREE.MeshBasicMaterial mat2 = new THREE.MeshBasicMaterial(); mat2.color = 0xe0e0e0; THREE.Mesh plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(400, 400), mat2); plane.position.y = -200; plane.rotation.x = -Math.PI / 2; scene.add(plane); renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); renderer.setSize(width, height); effect = new THREE.AsciiEffect(renderer, " +-Hgxyz"); effect.setSize(width, height); Container.AppendChild(effect.domElement); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine // http://youtu.be/Lo1IU8UAutE // 60hz 2160 4K! // The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre. // C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/" //1533 KB/s(3865902 bytes in 2.461s) //C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png" //1556 KB/s(2714294 bytes in 1.703s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png" // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809 // the eye nor the display will be able to do any stereo // until tech is near matrix capability. 2019? // cubemap can be used for all long range scenes // http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera // subst /D b: // subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web // subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web // what if we want to do subst in another winstat or session? // ColladaLoader: Empty or non-existing file (assets/ChromeStereoLightAnimation/S6Edge.dae) /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://stemkoski.github.io/Three.js/Shadow.html #if AsWEBSERVER #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // if we run as a server. we can open up on android. //chrome.Notification.DefaultTitle = "Nexus7"; //chrome.Notification.DefaultIconUrl = new x128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text //, AtFormCreated: FormStyler.AtFormCreated //AtFormConstructor: // f => // { // //arg[0] is typeof System.Int32 // //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)] // // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs // f.BackColor = System.Drawing.Color.FromArgb(0xA26D41); // } ); return; } #endregion #else #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? //chrome.runtime.UpdateAvailable += delegate //{ // new chrome.Notification(title: "UpdateAvailable"); //}; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "ChromeStereoLightAnimation"); // https://developer.chrome.com/apps/app_window#type-CreateWindowOptions var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: new { alwaysOnTop = true, visibleOnAllWorkspaces = true } ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion #endif Native.body.Clear(); Native.body.style.margin = "0px"; Native.body.style.padding = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // Severity Code Description Project File Line //Error CS0201 Only assignment, call, increment, decrement, and new object expressions can be used as a statement ChromeStereoLightAnimation Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\Application.cs 187 //new Action<int>( var camera0 = default(THREE.PerspectiveCamera); foreach (var y in from eyeid in new[] { 0, 1 } select (Action) delegate { var scene = new THREE.Scene(); var floorTexture = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets.checkerboard().src //"images/checkerboard.jpg" ); #region function init() // SCENE // CAMERA float SCREEN_WIDTH = Native.window.Width / 2; //float SCREEN_WIDTH = Native.screen.width / 2; float SCREEN_HEIGHT = Native.window.Height; var VIEW_ANGLE = 45; float ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT; var NEAR = 0.1; var FAR = 20000; // RENDERER // WebGLDeferredRenderer var renderer = new THREE.WebGLRenderer(new { antialias = true }); //renderer.setSize((int)SCREEN_WIDTH, (int)SCREEN_HEIGHT); renderer.domElement.AttachToDocument(); //renderer.domElement.style.SetLocation(Native.window.Width / 2 * (1 - eyeid), 0); // EVENTS // CONTROLS // STATS // LIGHT //var light = new THREE.PointLight(0xffffff); //light.position.set(0,250,0); //scene.add(light); //////////// // CUSTOM // //////////// // must enable shadows on the renderer renderer.shadowMapEnabled = true; // SKYBOX/FOG var skyBoxGeometry = new THREE.CubeGeometry(10000, 10000, 10000); var skyBoxMaterial = new THREE.MeshBasicMaterial(new { color = 0x9999ff, side = THREE.BackSide }); var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial); // scene.add(skyBox); scene.fog = new THREE.FogExp2(0x9999ff, 0.00025); // "shadow cameras" show the light source and direction // spotlight #1 -- yellow, dark shadow var spotlight = new THREE.SpotLight(0xffff00); spotlight.position.set(-60, 150, -30); spotlight.shadowCameraVisible = true; spotlight.shadowDarkness = 0.95; spotlight.intensity = 2; // must enable shadow casting ability for the light spotlight.castShadow = true; scene.add(spotlight); // spotlight #2 -- red, light shadow var spotlight2 = new THREE.SpotLight(0xff0000); //var spotlight2 = new THREE.SpotLight(0xffff00); spotlight2.position.set(60, 150, -60); scene.add(spotlight2); spotlight2.shadowCameraVisible = true; spotlight2.shadowDarkness = 0.70; spotlight2.intensity = 2; spotlight2.castShadow = true; // THREE.WebGLProgram: gl.getProgramInfoLog() Pixel shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16). for (int i = 0; i < 8; i++) { // spotlight #3 blue var spotlight3 = new THREE.SpotLight(0x0000ff); //var spotlight3 = new THREE.SpotLight(0x00ffff); spotlight3.position.set(150 * i, 80, -100); //spotlight3.shadowCameraVisible = true; spotlight3.shadowDarkness = 0.95; spotlight3.intensity = 2; spotlight3.castShadow = true; scene.add(spotlight3); // change the direction this spotlight is facing var lightTarget = new THREE.Object3D(); lightTarget.position.set(150 * i, 10, -100); scene.add(lightTarget); spotlight3.target = lightTarget; } // cube: mesh to cast shadows #region castShadow var cubeGeometry = new THREE.CubeGeometry(50, 50, 50); var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0x888888 }); var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial); //cube.position.set(0, 50, 0); cube0.position.set(0, 100, 0); // Note that the mesh is flagged to cast shadows cube0.castShadow = true; scene.add(cube0); // floor: mesh to receive shadows // public static ImageUtilsType ImageUtils; //var floorTexture = new THREE.ImageUtils.loadTexture("images/checkerboard.jpg"); floorTexture.wrapS = THREE.RepeatWrapping; floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set(10, 10); #endregion // Note the change to Lambert material. #region receiveShadow var floorMaterial = new THREE.MeshLambertMaterial(new { map = floorTexture, side = THREE.DoubleSide }); //var floorGeometry = new THREE.PlaneGeometry(1000 * 8, 1000 * 8, 100, 100); var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100); for (int i = 0; i < 8; i++) { var floor0 = new THREE.Mesh(floorGeometry, floorMaterial); floor0.position.y = -0.5; floor0.position.x = 1000 * i; floor0.rotation.x = Math.PI / 2; // Note the mesh is flagged to receive shadows floor0.receiveShadow = true; scene.add(floor0); } #endregion // create "light-ball" meshes var sphereGeometry = new THREE.SphereGeometry(10, 16, 8); var darkMaterial = new THREE.MeshBasicMaterial(new { color = 0x000000 }); { var wireframeMaterial = new THREE.MeshBasicMaterial( new { color = 0xffff00, wireframe = true, transparent = true }); var shape = THREE.SceneUtils.createMultiMaterialObject( sphereGeometry, new[] { darkMaterial, wireframeMaterial }); shape.position = spotlight.position; scene.add(shape); } { var wireframeMaterial = new THREE.MeshBasicMaterial( new { color = 0xff0000, wireframe = true, transparent = true }); var shape = THREE.SceneUtils.createMultiMaterialObject( sphereGeometry, new[] { darkMaterial, wireframeMaterial }); shape.position = spotlight2.position; scene.add(shape); } //{ // var wireframeMaterial = new THREE.MeshBasicMaterial( // new { color = 0x0000ff, wireframe = true, transparent = true }); // var shape = THREE.SceneUtils.createMultiMaterialObject( // sphereGeometry, new[] { darkMaterial, wireframeMaterial }); // shape.position = spotlight3.position; // scene.add(shape); //} #endregion var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); scene.add(camera); camera.position.set(0, 150, 400); camera.lookAt(scene.position); if (eyeid == 0) { camera0 = camera; var controls = new THREE.OrbitControls(camera0, renderer.domElement); //var controls = new THREE.OrbitControls(camera0, Native.document.body); Native.window.onframe += delegate { renderer.render(scene, camera0); controls.update(); //stats.update(); }; } else { Native.window.onframe += delegate { camera.rotation.set(camera0.rotation.x, camera0.rotation.y, camera0.rotation.z); camera.position.set(camera0.position.x, camera0.position.y, camera0.position.z); // lets not add any stereo effect. as we may need to run in 360 mono mode anyway to gain speed? //camera.translateX() // scene is unique to renderer!!!!! // we are doing everything twice for now. renderer.render(scene, camera); //controls.update(); //stats.update(); }; } #region onresize new { }.With( async delegate { do { // allow webview to behave in S6 multiview mode //SCREEN_WIDTH = Native.screen.width / 2; SCREEN_WIDTH = Native.window.Width / 2; //camera.aspect = Native.window.aspect; camera.aspect = SCREEN_WIDTH / Native.window.Height; camera.updateProjectionMatrix(); //renderer0.setSize(Native.window.Width / 2, Native.window.Height); renderer.setSize((int)SCREEN_WIDTH, Native.window.Height); //renderer0.domElement.style.SetLocation(Native.window.Width / 2 * eyeid, 0); renderer.domElement.style.SetLocation((int)SCREEN_WIDTH * (1 - eyeid), 0); } while (await Native.window.async.onresize); }); #endregion } ) y(); Console.WriteLine("do you see it?"); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // "X:\opensource\github\three.js\examples\canvas_camera_orthographic.html" // if i type THREE, would jsc be able to add THREE package on rebuild? // Error 136 The type or namespace name 'THREE' could not be found (are you missing a using directive or an assembly reference?) X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs 35 26 WebGLOrthographicCamera // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs var camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -500, 1000); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; var scene = new THREE.Scene(); // Grid var size = 500; var step = 50; Func<double> random = new Random().NextDouble; { var geometry = new THREE.Geometry(); for (var i = -size; i <= size; i += step) { ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size)); } var material = new THREE.LineBasicMaterial(new { color = 0x000000, opacity = 0.2 }); var line = new THREE.Line(geometry, material); line.type = THREE.LinePieces; scene.add(line); } #region Cubes { var geometry = new THREE.BoxGeometry(50, 50, 50); var material = new THREE.MeshLambertMaterial(new { color = 0xffffff, shading = THREE.FlatShading, overdraw = 0.5 }); for (var i = 0; i < 100; i++) { var cube = new THREE.Mesh(geometry, material); cube.scale.y = Math.Floor(random() * 2 + 1); cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); } } #endregion #region Lights var ambientLight = new THREE.AmbientLight((int)(random() * 0x10)); scene.add(ambientLight); { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff)); directionalLight.position.x = random() - 0.5; directionalLight.position.y = random() - 0.5; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff)); directionalLight.position.x = random() - 0.5; directionalLight.position.y = random() - 0.5; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } #endregion //var renderer = new THREE.CanvasRenderer(); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xf0f0f0); //renderer.setSize(Native.window.Width, Native.window.Height); renderer.setSize(); renderer.domElement.AttachToDocument(); //window.addEventListener( 'resize', onWindowResize, false ); var s = Stopwatch.StartNew(); Native.window.onframe += e => { // jsc, when can we have the edit and continue already? //var timer = s.ElapsedMilliseconds * 0.1; var timer = s.ElapsedMilliseconds * 0.0001; camera.position.x = Math.Cos(timer) * 200; camera.position.z = Math.Sin(timer) * 200; camera.lookAt(scene.position); renderer.render(scene, camera); }; }
public override void Init() { // create a scene, that will hold all our elements such as objects, cameras and lights. scene = new THREE.Scene(); // create a camera, which defines where we're looking at. camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000); // create a render and set the size renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(Width, Height); renderer.shadowMapEnabled = true; // add the output of the renderer to the html element Container.AppendChild(renderer.domElement); // create the ground plane var planeGeometry = new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshLambertMaterial(); planeMaterial.color = new THREE.Color(0.9, 0.9, 0.9); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true; // rotate and position the plane plane.rotation.x = -0.5 * Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; // add the plane to the scene scene.add(plane); // create a cube var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial(); // { color = 0xff0000 }; cubeMaterial.color = new THREE.Color(1, 0, 0); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; // position the cube cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; // add the cube to the scene scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshLambertMaterial(); // { color = 0x7777ff }; sphereMaterial.color = new THREE.Color(0, 0, 1); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // position the sphere sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; sphere.castShadow = true; // add the sphere to the scene scene.add(sphere); // position and point the camera to the center of the scene camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // add spotlight for the shadows var spotLight = new THREE.SpotLight(); //0xffffff); spotLight.color = new THREE.Color(1, 1, 1); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); controls = new THREE.TrackballControls(camera); controls.rotateSpeed = 10.0; controls.zoomSpeed = 1.2; controls.panSpeed = 0.8; controls.noZoom = false; controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.keys = new int[] { 65, 83, 68 }; }
private void ShowGeometry() { if (currentMesh != null) scene.remove(currentMesh); if (geometryIndex < 0) geometryIndex = 0; GeometryFunction f = functions[geometryIndex]; THREE.Geometry geometry = f.function(); THREE.Material mat = new THREE.MeshLambertMaterial(); mat.color =new THREE.Color().setHex( Math.Random() * 0xffffff); currentMesh = new THREE.Mesh(geometry, mat); scene.add(currentMesh); dropDownButton.Text(f.name); Render(); }
/// <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) { // https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed #region ChromeTCPServer dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { #region AtFormCreated FormStyler.AtFormCreated = ss => { ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // this is working? var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget()); }; #endregion chrome.Notification.DefaultTitle = "Heat Zeeker"; chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text, AtFormCreated: FormStyler.AtFormCreated ); return; } #endregion Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // jsc, add THREE // ... ok. // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs // this is not isometric. // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 var camera = new THREE.OrthographicCamera( Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2 , // if we change these values what will change? -1000, 1000 ); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; var scene = new THREE.Scene(); // Grid var size = 600; var step = 50; Func <double> random = new Random().NextDouble; // how do I add a new ground box? { var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2); var material = new THREE.MeshLambertMaterial(new { color = 0xB27D51 // , shading = THREE.FlatShading, overdraw = 0.5 }); { var cube = new THREE.Mesh(geometry, material); // why cant we get the shadows?? cube.receiveShadow = true; cube.scale.y = Math.Floor(random() * 2 + 1); cube.position.x = 0; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.y = -2; cube.position.z = 0; scene.add(cube); } } { var geometry = new THREE.Geometry(); for (var i = -size; i <= size; i += step) { ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size)); } var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 }); var line = new THREE.Line(geometry, material, mode: THREE.LinePieces); scene.add(line); } var interactiveObjects = new List <THREE.Object3D>(); #region Cubes { for (var i = 0; i < 8; i++) { new HZBunker().Source.Task.ContinueWithResult( 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 = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZWaterTower().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); // http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows // http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js //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 = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZCannon().Source.Task.ContinueWithResult( 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 = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //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; cube.rotation.y = random() * Math.PI * 2; scene.add(cube); interactiveObjects.Add(cube); } ); } } #endregion // we need expression evaluator with intellisense for live debugging sessions #region Lights var ambientLight = new THREE.AmbientLight((int)(random() * 0x10)); scene.add(ambientLight); // can we get our shadows? { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } #endregion //var renderer = new THREE.CanvasRenderer(); var renderer = new THREE.WebGLRenderer(); renderer.shadowMapEnabled = true; // background-color: #B27D51; renderer.setClearColor(0xB27D51); //renderer.setSize( // Native.window.Width , // Native.window.Height * 10 // ); renderer.setSize(); renderer.domElement.AttachToDocument(); Native.window.onresize += delegate { camera.left = Native.window.Width / -2; camera.right = Native.window.Width / 2; camera.top = Native.window.Height / 2; camera.bottom = Native.window.Height / -2; camera.updateProjectionMatrix(); renderer.setSize(); }; //window.addEventListener( 'resize', onWindowResize, false ); //#region Comanche //new Comanche().Source.Task.ContinueWithResult( // Comanche => // { // Comanche.position.y = 200; // //dae.position.z = 280; // Comanche.AttachTo(scene); // //scene.add(dae); // //oo.Add(Comanche); // // wont do it // //dae.castShadow = true; // // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d // //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); // //helper.update(); // //// If you want a visible bounding box // //scene.add(helper); // Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // // the rotors? // Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); // Comanche.scale.set(0.5, 0.5, 0.5); // //helper.scale.set(0.5, 0.5, 0.5); // var 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; // //rotation.y = sw.ElapsedMilliseconds * 0.01; // Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001; // //dae.children[0].children[0].children.Last().app // }; // } //); //#endregion //#region ee //// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs //// can we restile the window as the pin window in IDE? //var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual }; //var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee); ////ee.AutoSize = AutoSizeMode. ////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height); //ee.ClientSize = new System.Drawing.Size(200, 24); //ee.Show(); ////ee_camera_y. //ee_camera_y.TextChanged += delegate //{ // camera.position.y = double.Parse(ee_camera_y.Text); //}; //#endregion var s = Stopwatch.StartNew(); var controls = new THREE.OrbitControls(camera, renderer.domElement); // http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js // var effect = new THREE.OculusRiftEffect( //renderer, new //{ // worldScale = 100, // //HMD // } //); // effect.setSize(1920, 1080); Native.window.onframe += e => { // jsc, when can we have the edit and continue already? //var timer = s.ElapsedMilliseconds * 0.1; //var timer = s.ElapsedMilliseconds * 0.0001; //camera.position.x = Math.Cos(timer) * 200; //camera.position.z = Math.Sin(timer) * 200; // camera.position.z = 200; //camera.position.y = 100; //camera.position.y = Math.Sin(timer * 0.1) * 200; controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); //effect.render(scene, camera); }; //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; // view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html //var mouse2D = new THREE.Vector3(0, 10000, 0.5); //renderer.domElement.onclick += // e => // { // e.preventDefault(); // mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1; // mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1; // var vector = new THREE.Vector3( // (e.CursorX / (double)Native.window.Width) * 2 - 1, // -(e.CursorY / (double)Native.window.Height) * 2 + 1, // 0.5); // // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs // var projector = new THREE.Projector(); // projector.unprojectVector(vector, camera); // // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast // // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray // // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html // // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera // // use picking ray since it's an orthographic camera // // doesnt fkin work ??? // //var raycaster = projector.pickingRay(vector, camera); // var raycaster = projector.pickingRay(mouse2D.clone(), camera); // //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); // var intersects = raycaster.intersectObjects(interactiveObjects.ToArray()); // // https://github.com/mrdoob/three.js/issues/599 // Native.document.title = new { intersects.Length }.ToString(); // }; }
void InitializeContent() { #region make sure we atleast have our invisible DOM var page_song = new nyanlooped { loop = true }; var page_song2 = new nyanslow { loop = true }; #endregion #region container Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.backgroundColor = "#003366"; container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); #endregion var renderer = new THREE.WebGLRenderer(); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachTo(container); var numStars = 10; var numRainChunks = 30; var mouseX = 0; var mouseY = 0; var clock = new Stopwatch(); clock.Start(); var deltaSum = 0f; //tick=0, var frame = 0; var running = true; #region onmousemove Native.document.onmousemove += e => { if (IsDisposed) { return; } var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; mouseX = (e.CursorX - windowHalfX); mouseY = (e.CursorY - windowHalfY); }; #endregion Action PlaySomething = delegate { if (running) { page_song.play(); page_song2.pause(); } else { page_song.pause(); page_song2.play(); } }; #region onmousedown Native.document.onmousedown += e => { if (IsDisposed) { return; } running = !running; PlaySomething(); }; #endregion #region HasFocus var HasFocus = false; Native.window.onblur += delegate { HasFocus = false; page_song.pause(); page_song2.pause(); }; Native.window.onfocus += delegate { HasFocus = true; PlaySomething(); }; Native.Document.onmousemove += delegate { if (HasFocus) { return; } PlaySomething(); }; Native.Document.onmouseout += delegate { if (HasFocus) { return; } page_song.pause(); page_song2.pause(); }; #endregion #region helper Action <THREE.Object3D, f, f, f, f, f, f, int> helper = (o, x, y, z, w, h, d, c) => { // function helper(o, x, y, z, w, h, d, c){ var material = new THREE.MeshLambertMaterial(new { color = c }); var geometry = new THREE.CubeGeometry(w, h, d, 1, 1, 1); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = x + (w / 2); mesh.position.y = y - (h / 2); mesh.position.z = z + (d / 2); o.add(mesh); }; #endregion #region buildStar Action <THREE.Object3D, int> buildStar = (star, state) => { #region dear JSC, please start supporting switch! if (state == 0) { helper(star, 0, 0, 0, 1, 1, 1, 0xffffff); } else if (state == 1) { helper(star, 1, 0, 0, 1, 1, 1, 0xffffff); helper(star, -1, 0, 0, 1, 1, 1, 0xffffff); helper(star, 0, 1, 0, 1, 1, 1, 0xffffff); helper(star, 0, -1, 0, 1, 1, 1, 0xffffff); } else if (state == 2) { helper(star, 1, 0, 0, 2, 1, 1, 0xffffff); helper(star, -2, 0, 0, 2, 1, 1, 0xffffff); helper(star, 0, 2, 0, 1, 2, 1, 0xffffff); helper(star, 0, -1, 0, 1, 2, 1, 0xffffff); } else if (state == 3) { helper(star, 0, 0, 0, 1, 1, 1, 0xffffff); helper(star, 2, 0, 0, 2, 1, 1, 0xffffff); helper(star, -3, 0, 0, 2, 1, 1, 0xffffff); helper(star, 0, 3, 0, 1, 2, 1, 0xffffff); helper(star, 0, -2, 0, 1, 2, 1, 0xffffff); } else if (state == 4) { helper(star, 0, 3, 0, 1, 1, 1, 0xffffff); helper(star, 2, 2, 0, 1, 1, 1, 0xffffff); helper(star, 3, 0, 0, 1, 1, 1, 0xffffff); helper(star, 2, -2, 0, 1, 1, 1, 0xffffff); helper(star, 0, -3, 0, 1, 1, 1, 0xffffff); helper(star, -2, -2, 0, 1, 1, 1, 0xffffff); helper(star, -3, 0, 0, 1, 1, 1, 0xffffff); helper(star, -2, 2, 0, 1, 1, 1, 0xffffff); } else if (state == 4) { helper(star, 2, 0, 0, 1, 1, 1, 0xffffff); helper(star, -2, 0, 0, 1, 1, 1, 0xffffff); helper(star, 0, 2, 0, 1, 1, 1, 0xffffff); helper(star, 0, -2, 0, 1, 1, 1, 0xffffff); } #endregion }; #endregion var r = new Random(); Func <f> Math_random = () => r.NextFloat(); var stars = new List <List <THREE.Object3D> >(); #region init var camera = new THREE.PerspectiveCamera(45, Native.window.Width / Native.window.Height, .1f, 10000); camera.position.z = 30; camera.position.x = 0; camera.position.y = 0; var scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x003366, 0.0095f); #region POPTART var poptart = new THREE.Object3D(); // object x y z w h d color helper(poptart, 0, -2, -1, 21, 14, 3, 0x222222); helper(poptart, 1, -1, -1, 19, 16, 3, 0x222222); helper(poptart, 2, 0, -1, 17, 18, 3, 0x222222); helper(poptart, 1, -2, -1.5f, 19, 14, 4, 0xffcc99); helper(poptart, 2, -1, -1.5f, 17, 16, 4, 0xffcc99); helper(poptart, 2, -4, 2, 17, 10, .6f, 0xff99ff); helper(poptart, 3, -3, 2, 15, 12, .6f, 0xff99ff); helper(poptart, 4, -2, 2, 13, 14, .6f, 0xff99ff); helper(poptart, 4, -4, 2, 1, 1, .7f, 0xff3399); helper(poptart, 9, -3, 2, 1, 1, .7f, 0xff3399); helper(poptart, 12, -3, 2, 1, 1, .7f, 0xff3399); helper(poptart, 16, -5, 2, 1, 1, .7f, 0xff3399); helper(poptart, 8, -7, 2, 1, 1, .7f, 0xff3399); helper(poptart, 5, -9, 2, 1, 1, .7f, 0xff3399); helper(poptart, 9, -10, 2, 1, 1, .7f, 0xff3399); helper(poptart, 3, -11, 2, 1, 1, .7f, 0xff3399); helper(poptart, 7, -13, 2, 1, 1, .7f, 0xff3399); helper(poptart, 4, -14, 2, 1, 1, .7f, 0xff3399); poptart.position.x = -10.5f; poptart.position.y = 9; scene.add(poptart); #endregion #region FEET var feet = new THREE.Object3D(); helper(feet, 0, -2, .49f, 3, 3, 1, 0x222222); helper(feet, 1, -1, .49f, 3, 3, 1, 0x222222); helper(feet, 1, -2, -.01f, 2, 2, 2, 0x999999); helper(feet, 2, -1, -.01f, 2, 2, 2, 0x999999); helper(feet, 6, -2, -.5f, 3, 3, 1, 0x222222); helper(feet, 6, -2, -.5f, 4, 2, 1, 0x222222); helper(feet, 7, -2, -.99f, 2, 2, 2, 0x999999); helper(feet, 16, -3, .49f, 3, 2, 1, 0x222222); helper(feet, 15, -2, .49f, 3, 2, 1, 0x222222); helper(feet, 15, -2, -.01f, 2, 1, 2, 0x999999); helper(feet, 16, -3, -.01f, 2, 1, 2, 0x999999); helper(feet, 21, -3, -.5f, 3, 2, 1, 0x222222); helper(feet, 20, -2, -.5f, 3, 2, 1, 0x222222); helper(feet, 20, -2, -.99f, 2, 1, 2, 0x999999); helper(feet, 21, -3, -.99f, 2, 1, 2, 0x999999); feet.position.x = -12.5f; feet.position.y = -6; scene.add(feet); #endregion #region TAIL var tail = new THREE.Object3D(); helper(tail, 0, 0, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 1, -1, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 2, -2, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 3, -3, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 1, -1, -.5f, 2, 1, 2, 0x999999); helper(tail, 2, -2, -.5f, 2, 1, 2, 0x999999); helper(tail, 3, -3, -.5f, 2, 1, 2, 0x999999); helper(tail, 4, -4, -.5f, 2, 1, 2, 0x999999); tail.position.x = -16.5f; tail.position.y = 2; scene.add(tail); #endregion #region FACE var face = new THREE.Object3D(); helper(face, 2, -3, -3, 12, 9, 4, 0x222222); helper(face, 0, -5, 0, 16, 5, 1, 0x222222); helper(face, 1, -1, 0, 4, 10, 1, 0x222222); helper(face, 11, -1, 0, 4, 10, 1, 0x222222); helper(face, 3, -11, 0, 10, 2, 1, 0x222222); helper(face, 2, 0, 0, 2, 2, 1, 0x222222); helper(face, 4, -2, 0, 2, 2, 1, 0x222222); helper(face, 12, 0, 0, 2, 2, 1, 0x222222); helper(face, 10, -2, 0, 2, 2, 1, 0x222222); helper(face, 1, -5, .5f, 14, 5, 1, 0x999999); helper(face, 3, -4, .5f, 10, 8, 1, 0x999999); helper(face, 2, -1, .5f, 2, 10, 1, 0x999999); helper(face, 12, -1, .5f, 2, 10, 1, 0x999999); helper(face, 4, -2, .5f, 1, 2, 1, 0x999999); helper(face, 5, -3, .5f, 1, 1, 1, 0x999999); helper(face, 11, -2, .5f, 1, 2, 1, 0x999999); helper(face, 10, -3, .5f, 1, 1, 1, 0x999999); //Eyes helper(face, 4, -6, .6f, 2, 2, 1, 0x222222); helper(face, 11, -6, .6f, 2, 2, 1, 0x222222); helper(face, 3.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff); helper(face, 10.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff); //MOUTH helper(face, 5, -10, .6f, 7, 1, 1, 0x222222); helper(face, 5, -9, .6f, 1, 2, 1, 0x222222); helper(face, 8, -9, .6f, 1, 2, 1, 0x222222); helper(face, 11, -9, .6f, 1, 2, 1, 0x222222); //CHEEKS helper(face, 2, -8, .6f, 2, 2, .91f, 0xff9999); helper(face, 13, -8, .6f, 2, 2, .91f, 0xff9999); face.position.x = -.5f; face.position.y = 4; face.position.z = 4; scene.add(face); #endregion #region RAINBOW var rainbow = new THREE.Object3D(); for (var c = 0; c < numRainChunks - 1; c++) { var yOffset = 8; if (c % 2 == 1) { yOffset = 7; } var xOffset = (-c * 8) - 16.5f; helper(rainbow, xOffset, yOffset, 0, 8, 3, 1, 0xff0000); helper(rainbow, xOffset, yOffset - 3, 0, 8, 3, 1, 0xff9900); helper(rainbow, xOffset, yOffset - 6, 0, 8, 3, 1, 0xffff00); helper(rainbow, xOffset, yOffset - 9, 0, 8, 3, 1, 0x33ff00); helper(rainbow, xOffset, yOffset - 12, 0, 8, 3, 1, 0x0099ff); helper(rainbow, xOffset, yOffset - 15, 0, 8, 3, 1, 0x6633ff); } scene.add(rainbow); #endregion #region rainChunk var rainChunk = new THREE.Object3D(); helper(rainChunk, -16.5f, 7, 0, 8, 3, 1, 0xff0000); helper(rainChunk, -16.5f, 4, 0, 8, 3, 1, 0xff9900); helper(rainChunk, -16.5f, 1, 0, 8, 3, 1, 0xffff00); helper(rainChunk, -16.5f, -2, 0, 8, 3, 1, 0x33ff00); helper(rainChunk, -16.5f, -5, 0, 8, 3, 1, 0x0099ff); helper(rainChunk, -16.5f, -8, 0, 8, 3, 1, 0x6633ff); rainChunk.position.x -= (8 * (numRainChunks - 1)); scene.add(rainChunk); #endregion #region stars for (var state = 0; state < 6; state++) { stars.Add(new List <THREE.Object3D>()); for (var c = 0; c < numStars; c++) { var star = new THREE.Object3D(); star.position.x = Math_random() * 200 - 100; star.position.y = Math_random() * 200 - 100; star.position.z = Math_random() * 200 - 100; buildStar(star, state); scene.add(star); stars[state].Add(star); } } #endregion var pointLight = new THREE.PointLight(0xFFFFFF); pointLight.position.z = 1000; scene.add(pointLight); #endregion #region IsDisposed Dispose = delegate { if (IsDisposed) { return; } IsDisposed = true; page_song.pause(); page_song2.pause(); container.Orphanize(); }; #endregion Native.window.onframe += delegate { f delta = clock.ElapsedMilliseconds * 0.001f; clock.Restart(); if (running) { deltaSum += delta; } if (deltaSum > .07) { deltaSum = deltaSum % .07f; frame = (frame + 1) % 12; for (var c = 0; c < numStars; c++) { var tempX = stars[5][c].position.x; var tempY = stars[5][c].position.y; var tempZ = stars[5][c].position.z; for (var state = 5; state > 0; state--) { var star = stars[state][c]; var star2 = stars[state - 1][c]; star.position.x = star2.position.x - 8; star.position.y = star2.position.y; star.position.z = star2.position.z; if (star.position.x < -100) { star.position.x += 200; star.position.y = Math_random() * 200 - 100; star.position.z = Math_random() * 200 - 100; } } stars[0][c].position.x = tempX; stars[0][c].position.y = tempY; stars[0][c].position.z = tempZ; } #region dear JSC, please start supporting switch! if (frame == 0) { face.position.x++; feet.position.x++; } else if (frame == 1) { face.position.y--; feet.position.x++; feet.position.y--; poptart.position.y--; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 2) { feet.position.x--; } else if (frame == 3) { face.position.x--; feet.position.x--; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } else if (frame == 4) { face.position.y++; } else if (frame == 5) { poptart.position.y++; feet.position.y++; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 6) { face.position.x++; feet.position.x++; } else if (frame == 7) { poptart.position.y--; face.position.y--; feet.position.x++; feet.position.y--; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } else if (frame == 8) { feet.position.x--; } else if (frame == 9) { face.position.x--; feet.position.x--; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 10) { face.position.y++; } else if (frame == 11) { poptart.position.y++; feet.position.y++; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } #endregion } camera.position.x += (mouseX - camera.position.x) * .005f; camera.position.y += (-mouseY - camera.position.y) * .005f; camera.lookAt(scene.position); renderer.render(scene, camera); }; #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) { return; } // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); }; #endregion }
// http://youtu.be/Lo1IU8UAutE // 60hz 2160 4K! // The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre. // C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/" //1533 KB/s(3865902 bytes in 2.461s) //C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hznosky.png" "/sdcard/oculus/360photos/" //1556 KB/s(2714294 bytes in 1.703s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/" // "X:\vr\tape360hzlights\0000.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "r:\vr\tape360hzlights\0000.png" "/sdcard/oculus/360photos/hzlights.png" // 1421 KB/s (2516443 bytes in 1.729s) // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809 // the eye nor the display will be able to do any stereo // until tech is near matrix capability. 2019? // cubemap can be used for all long range scenes // http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera // subst /D a: // subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360LightAnimation\Chrome360LightAnimation\bin\Debug\staging\Chrome360LightAnimation.Application\web // subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360LightAnimation\Chrome360LightAnimation\bin\Debug\staging\Chrome360LightAnimation.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360LightAnimation\Chrome360LightAnimation\bin\Debug\staging\Chrome360LightAnimation.Application\web // what if we want to do subst in another winstat or session? // ColladaLoader: Empty or non-existing file (assets/Chrome360LightAnimation/S6Edge.dae) /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { //FormStyler.AtFormCreated = //s => //{ // s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget()); // var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget()); // s.Context.GetHTMLTarget().style.backgroundColor = "#efefef"; // //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41"; //}; #if AsWEBSERVER #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // if we run as a server. we can open up on android. //chrome.Notification.DefaultTitle = "Nexus7"; //chrome.Notification.DefaultIconUrl = new x128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text //, AtFormCreated: FormStyler.AtFormCreated //AtFormConstructor: // f => // { // //arg[0] is typeof System.Int32 // //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)] // // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs // f.BackColor = System.Drawing.Color.FromArgb(0xA26D41); // } ); return; } #endregion #else #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? //chrome.runtime.UpdateAvailable += delegate //{ // new chrome.Notification(title: "UpdateAvailable"); //}; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "Chrome360LightAnimation"); // https://developer.chrome.com/apps/app_window#type-CreateWindowOptions var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: new { alwaysOnTop = true, visibleOnAllWorkspaces = true } ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion #endif //const int size = 128; //const int size = 256; // 6 faces, 12KB //const int size = 512; // 6 faces, ? // WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. //const int size = 720; // 6 faces, ? //const int size = 1024; // 6 faces, ? //const int cubefacesize = 1024; // 6 faces, ? // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/Chrome360LightAnimation/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg ) int cubefacesize = 2048; // 6 faces, ? // "X:\vr\tape1\0000x2048.png" // for 60hz render we may want to use float camera percision, not available for ui. // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/" //if (Environment.ProcessorCount < 8) // //cubefacesize = 64; // 6 faces, ? // cubefacesize = 128; // 6 faces, ? new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument(); // can we keep fast fps yet highp? // can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm? //const int cubefacesize = 128; // 6 faces, ? //var cubecameraoffsetx = 256; var cubecameraoffsetx = 400; //var uizoom = 0.1; //var uizoom = cubefacesize / 128f; var uizoom = 128f / cubefacesize; var far = 0xffffff; Native.css.style.backgroundColor = "blue"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); (Native.body.style as dynamic).webkitUserSelect = "text"; //new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument(); var sw = Stopwatch.StartNew(); var oo = new List<THREE.Object3D>(); var window = Native.window; // what about physics and that portal rendering? // if we are running as a chrome web server, we may also be opened as android ndk webview app //var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000); // once we update source // save the source // manually recompile //cameraPX.position.z = 400; //// the camera should be close enough for the object to float off the FOV of PX //cameraPX.position.z = 200; // scene // can we make the 3D object orbit around us ? // and // stream it to vr? var scene = new THREE.Scene(); // since our cube camera is somewhat a fixed thing // would it be easier to move mountains to come to us? // once we change code would chrome app be able to let VR know that a new view is available? var sceneg = new THREE.Group(); sceneg.AttachTo(scene); // fly up? //sceneg.translateZ(-1024); // rotate the world, as the skybox then matches what we have on filesystem scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); // yet for headtracking we shall rotate camera //sceneg.position.set(0, 0, -1024); //sceneg.position.set(0, -1024, 0); var ambient = new THREE.AmbientLight(0x303030).AttachTo(sceneg); //scene.add(ambient); // should we fix jsc to do a more correct IDL? //var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7); //directionalLight.position.set(0, 0, 1); //scene.add(directionalLight); #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; // wont show if we add skybox? xlight.shadowCameraVisible = true; //scene.add(light); //light.AttachTo(sceneg); #endregion // whats WebGLRenderTargetCube do? // WebGLRenderer preserveDrawingBuffer var renderer0 = new THREE.WebGLRenderer( new { antialias = true, alpha = true, preserveDrawingBuffer = true } ); // must enable shadows on the renderer renderer0.shadowMapEnabled = true; // https://github.com/mrdoob/three.js/issues/3836 // the construct. white bg //renderer0.setClearColor(0xfffff, 1); //renderer.setSize(window.Width, window.Height); renderer0.setSize(cubefacesize, cubefacesize); //renderer0.domElement.AttachToDocument(); //rendererPX.domElement.style.SetLocation(0, 0); //renderer0.domElement.style.SetLocation(4, 4); // top // http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene // need a place to show the cubemap face to GUI // how does the stereo OTOY do it? // https://www.opengl.org/wiki/Sampler_(GLSL) // http://www.richardssoftware.net/Home/Post/25 // [+X, –X, +Y, –Y, +Z, –Z] fa // move up //camera.position.set(-1200, 800, 1200); //var cameraoffset = new THREE.Vector3(0, 15, 0); // can we aniamte it? //var cameraoffset = new THREE.Vector3(0, 800, 1200); // can we have linear animation fromcenter of the map to the edge and back? // then do the flat earth sun orbit? var cameraoffset = new THREE.Vector3( // left? -512, // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1024, //1200 0 // can we hover top of the map? ); // original vieworigin //var cameraoffset = new THREE.Vector3(-1200, 800, 1200); var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048, max = 0 + 2048, valueAsNumber = -512, title = "camerax" }.AttachToDocument(); // up. whats the most high a rocket can go 120km? new IHTMLHorizontalRule { }.AttachToDocument(); // how high is the bunker? var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 64, max = 2048, valueAsNumber = 1024, title = "cameray" }.AttachToDocument(); new IHTMLBreak { }.AttachToDocument(); var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument(); new IHTMLHorizontalRule { }.AttachToDocument(); var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048, max = 0 + 2048, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); // for render server var fcamerax = 0.0; var fcameray = 0.0; var fcameraz = 0.0; //while (await camerax.async.onchange) //cameray.onchange += delegate //{ // if (cameray.valueAsNumber < cameray.max) // camerayHigh.valueAsNumber = camerayHigh.min; //}; camerayHigh.onmousedown += delegate { //if (camerayHigh.valueAsNumber > camerayHigh.min) cameray.valueAsNumber = cameray.max; }; Action applycameraoffset = delegate { // make sure UI and gpu sync up var cy = cameray; if (cameray.valueAsNumber < cameray.max) camerayHigh.valueAsNumber = camerayHigh.min; if (camerayHigh.valueAsNumber > camerayHigh.min) cameray.valueAsNumber = cameray.max; if (cameray.valueAsNumber == cameray.max) cy = camerayHigh; cameraoffset = new THREE.Vector3( // left? camerax + fcamerax, // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, cy + fcameray, //1200 cameraz + fcameraz // can we hover top of the map? ); }; #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraNY.position.copy(new THREE.Vector3(0, 0, 0)); cameraNY.lookAt(new THREE.Vector3(0, -1, 0)); cameraNY.position.add(cameraoffset); }; //cameraNY.lookAt(new THREE.Vector3(0, 1, 0)); var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2); canvasNY.canvas.title = "NY"; canvasNY.canvas.AttachToDocument(); canvasNY.canvas.style.transformOrigin = "0 0"; canvasNY.canvas.style.transform = $"scale({uizoom})"; var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraPY.position.copy(new THREE.Vector3(0, 0, 0)); cameraPY.lookAt(new THREE.Vector3(0, 1, 0)); cameraPY.position.add(cameraoffset); }; //cameraPY.lookAt(new THREE.Vector3(0, -1, 0)); var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0); canvasPY.canvas.title = "PY"; canvasPY.canvas.AttachToDocument(); canvasPY.canvas.style.transformOrigin = "0 0"; canvasPY.canvas.style.transform = $"scale({uizoom})"; #endregion // transpose xz? #region x var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraNX.position.copy(new THREE.Vector3(0, 0, 0)); cameraNX.lookAt(new THREE.Vector3(0, 0, 1)); cameraNX.position.add(cameraoffset); }; //cameraNX.lookAt(new THREE.Vector3(0, 0, -1)); //cameraNX.lookAt(new THREE.Vector3(-1, 0, 0)); //cameraNX.lookAt(new THREE.Vector3(1, 0, 0)); var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasNX.canvas.title = "NX"; canvasNX.canvas.AttachToDocument(); canvasNX.canvas.style.transformOrigin = "0 0"; canvasNX.canvas.style.transform = $"scale({uizoom})"; var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraPX.position.copy(new THREE.Vector3(0, 0, 0)); cameraPX.lookAt(new THREE.Vector3(0, 0, -1)); cameraPX.position.add(cameraoffset); }; //cameraPX.lookAt(new THREE.Vector3(0, 0, 1)); //cameraPX.lookAt(new THREE.Vector3(1, 0, 0)); //cameraPX.lookAt(new THREE.Vector3(-1, 0, 0)); var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasPX.canvas.title = "PX"; canvasPX.canvas.AttachToDocument(); canvasPX.canvas.style.transformOrigin = "0 0"; canvasPX.canvas.style.transform = $"scale({uizoom})"; #endregion #region z var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); //cameraNZ.lookAt(new THREE.Vector3(0, 0, -1)); applycameraoffset += delegate { cameraNZ.position.copy(new THREE.Vector3(0, 0, 0)); cameraNZ.lookAt(new THREE.Vector3(1, 0, 0)); cameraNZ.position.add(cameraoffset); }; //cameraNX.lookAt(new THREE.Vector3(-1, 0, 0)); //cameraNZ.lookAt(new THREE.Vector3(0, 0, 1)); var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasNZ.canvas.title = "NZ"; canvasNZ.canvas.AttachToDocument(); canvasNZ.canvas.style.transformOrigin = "0 0"; canvasNZ.canvas.style.transform = $"scale({uizoom})"; var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); //cameraPZ.lookAt(new THREE.Vector3(1, 0, 0)); applycameraoffset += delegate { cameraPZ.position.copy(new THREE.Vector3(0, 0, 0)); cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0)); cameraPZ.position.add(cameraoffset); }; //cameraPZ.lookAt(new THREE.Vector3(0, 0, 1)); //cameraPZ.lookAt(new THREE.Vector3(0, 0, -1)); var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasPZ.canvas.title = "PZ"; canvasPZ.canvas.AttachToDocument(); canvasPZ.canvas.style.transformOrigin = "0 0"; canvasPZ.canvas.style.transform = $"scale({uizoom})"; #endregion // c++ alias locals would be nice.. var canvas0 = (IHTMLCanvas)renderer0.domElement; var old = new { CursorX = 0, CursorY = 0 }; var st = new Stopwatch(); st.Start(); //canvas0.css.active.style.cursor = IStyle.CursorEnum.move; #region onmousedown Native.body.onmousedown += async e => { if (e.Element.nodeName.ToLower() != "canvas") return; // movementX no longer works old = new { e.CursorX, e.CursorY }; //e.CaptureMouse(); var release = e.Element.CaptureMouse(); await e.Element.async.onmouseup; release(); }; #endregion // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs #region onmousemove Native.body.onmousemove += e => { if (e.Element.nodeName.ToLower() != "canvas") { Native.body.style.cursor = IStyle.CursorEnum.@default; return; } e.preventDefault(); e.stopPropagation(); Native.body.style.cursor = IStyle.CursorEnum.move; var pointerLock = canvas0 == Native.document.pointerLockElement; //Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX }); if (e.MouseButton == IEvent.MouseButtonEnum.Left) { oo.WithEach( x => { x.rotation.y += 0.006 * (e.CursorX - old.CursorX); x.rotation.x += 0.006 * (e.CursorY - old.CursorY); } ); old = new { e.CursorX, e.CursorY }; } }; #endregion // THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll // THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll // http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/ // https://www.youtube.com/watch?v=D-Wl9jAB45Q #region spherical var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true); var c = gl.canvas.AttachToDocument(); // 3840x2160 //c.style.SetSize(3840, 2160); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube c.width = 3840; c.height = 2160; //c.width = 3840 * 2; //c.height = 2160 * 2; //c.width = 3840; //c.height = 2160; // 1,777777777777778 // https://www.youtube.com/watch?v=fTfJwzRsE-w //c.width = 7580; //c.height = 3840; //1,973958333333333 //7580 // 3840 // wont work //c.width = 8192; //c.height = 4096; // this has the wrong aspect? //c.width = 6466; //c.height = 3232; new IHTMLPre { new { c.width, c.height } }.AttachToDocument(); //6466x3232 //var suizoom = 720f / c.height; //var suizoom = 360f / c.height; var suizoom = 480f / c.width; c.style.transformOrigin = "0 0"; c.style.transform = $"scale({suizoom})"; //c.style.backgroundColor = "yellow"; c.style.position = IStyle.PositionEnum.absolute; c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3); var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass( null, gl, precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); // how shall we upload our textures? // can we reference GLSL.samplerCube yet? //pass.mInputs[0] = new samplerCube { }; pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { }; pass.MakeHeader_Image(); var vs = new Shaders.ProgramFragmentShader(); pass.NewShader_Image(vs); #endregion var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs().AttachToDocument(); //var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument(); //var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument(); // 270px //xor.style.height = ""; frame0.style.height = "270px"; frame0.style.width = "480px"; frame0.style.SetLocation( 8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3); #region skybox // what shall the skybox do if we reach upper altitude? // fade into space skybox ? var skybox = new THREE.Mesh(new THREE.SphereGeometry(far * 0.9, 50, 50), new THREE.MeshBasicMaterial(new { map = THREE.ImageUtils.loadTexture( //new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src //new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src frame0.src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src ) })); skybox.scale.x = -1; skybox.AttachTo(sceneg); #endregion //mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2); //mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2); // dont need the fixup. unless we want to animate the sky rotate? //mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); // hide the sky to see camera lines? // can we show this as HUD on VR in webview? //skybox.visible = false; //scene.add(skybox); //new IHTMLButton { } #region DirectoryEntry var dir = default(DirectoryEntry); new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); }; frame0.onclick += delegate { // http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf // A method of creating synthetic stereoscopic panoramic images that can be implemented //in most rendering packages has been presented. If single panoramic pairs can be created //then stereoscopic panoramic movies are equally possible giving rise to the prospect of //movies where the viewer can interact with, at least with regard to what they choose to look //at.These images can be projected so as to engage the two features of the human visual //system that assist is giving us a sense of immersion, the feeling of “being there”. That is, //imagery that contains parallax information as captured from two horizontally separated eye //positions (stereopsis)and imagery that fills our peripheral vision.The details that define //how the two panoramic images should be created in rendering packages are provided, in //particular, how to precisely configure the virtual cameras and control the distance to zero //parallax. // grab a frame if (dir == null) { // not exporting to file system? var f0 = new IHTMLImage { src = gl.canvas.toDataURL() }; //var f0 = (IHTMLImage)gl.canvas; //var f0 = (IHTMLImage)gl.canvas; //var base64 = gl.canvas.toDataURL(); //frame0.src = base64; frame0.src = f0.src; // 7MB! return; } // // --------------------------- //IrfanView //--------------------------- //Warning ! //The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension ! //Rename ? //--------------------------- //Yes No //--------------------------- // haha this will render the thumbnail. //dir.WriteAllBytes("0000.png", frame0); //dir.WriteAllBytes("0000.png", gl.canvas); var glsw = Stopwatch.StartNew(); dir.WriteAllBytes("0000.png", gl); new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument(); // {{ ElapsedMilliseconds = 1548 }} // 3.7MB // 3840x2160 }; #endregion var vsync = default(TaskCompletionSource<object>); new IHTMLButton { "render 60hz 30sec" }.AttachToDocument().onclick += async e => { e.Element.disabled = true; var total = Stopwatch.StartNew(); var status = "rendering... " + new { dir }; new IHTMLPre { () => status }.AttachToDocument(); if (dir == null) { //dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); } total.Restart(); vsync = new TaskCompletionSource<object>(); await vsync.Task; status = "rendering... vsync"; var frameid = -1; goto beforeframe; //fcamerax = -15.0; // parallax offset? await_nextframe: var filename = frameid.ToString().PadLeft(4, '0') + ".png"; status = "rendering... " + new { frameid, filename }; vsync = new TaskCompletionSource<object>(); await vsync.Task; // frame0 has been rendered var swcapture = Stopwatch.StartNew(); status = "WriteAllBytes... " + new { filename }; //await Native.window.async.onframe; if (dir != null) // https://code.google.com/p/chromium/issues/detail?id=404301 await dir.WriteAllBytes(filename, gl); //await dir.WriteAllBytes(filename, gl.canvas); status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds }; status = "rdy " + new { filename, fcamerax }; //await Native.window.async.onframe; beforeframe: // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); fcamerax = 128 * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); fcameraz = 256 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); // up fcameray = 16 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcamerax += (1.0 / 60.0); //fcamerax += (1.0 / 60.0) * 120; if (Environment.ProcessorCount < 8) frameid += 30; else frameid++; // 60hz 30sec if (frameid < 60 * 30) { // Blob GC? either this helms or the that we made a Blob static. await Task.Delay(11); goto await_nextframe; } total.Stop(); status = "all done " + new { frameid, total.ElapsedMilliseconds }; vsync = default(TaskCompletionSource<object>); // http://stackoverflow.com/questions/22899333/delete-javascript-blobs e.Element.disabled = false; }; // "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj" #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.AttachTo(sceneg); //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 // "Z:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\WebGLGodRay.csproj" 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); treeMesh.AttachTo(sceneg); } ) ); #endregion // http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/ #region create floor // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. // can we have our checkerboard? var floorColors = new[] { 0xA26D41, 0xA06040, 0xAF6F4F, // marker to detect horizon 0xAF0000, 0xA26D41, 0xA06040, 0xAF6F4F, // marker to detect horizon 0x006D00, 0xA26D41, 0xA06040, 0xAF6F4F, // marker to detect horizon 0x0000FF }; // human eye can see up to 10miles, then horizion flattens out. var planeGeometry = new THREE.CubeGeometry(2048, 1, 2048); var planeGeometryMarkerH = new THREE.CubeGeometry(2048, 1, 2048 * 5); var planeGeometryMarkerV = new THREE.CubeGeometry(2048 * 5 * 4, 1, 2048 * 4); var planeGeometryV = new THREE.CubeGeometry(2048 * 4, 1, 2048 * 4); ////var floor0 = new THREE.Mesh(planeGeometry, //// new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //// ); //////plane.castShadow = false; ////floor0.receiveShadow = true; ////floor0.AttachTo(sceneg); ////var floor1 = new THREE.Mesh(planeGeometry, //// //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //// new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //// ); //////plane.castShadow = false; ////floor1.receiveShadow = true; ////floor1.position.set(2048, 0, 1024); ////floor1.AttachTo(sceneg); // can we see horizon? for (int i = 0; i < 3 * 256; i++) { var planeGeometry0 = planeGeometry; if (i % 4 == 3) { planeGeometry0 = planeGeometryMarkerH; // for high altitude zoom level var i4 = (i / 4); var planeGeometryV0 = planeGeometryV; if (i4 % 4 == 3) planeGeometryV0 = planeGeometryMarkerV; { var floor2 = new THREE.Mesh(planeGeometryV0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[i4 % floorColors.Length], specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; floor2.receiveShadow = true; floor2.position.set(1024 * -i, 0, 2048 * i); floor2.AttachTo(scene); } { var floor2 = new THREE.Mesh(planeGeometryV0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[(i / 4) % floorColors.Length], specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; floor2.receiveShadow = true; floor2.position.set(-1024 * -i, 0, -2048 * i); floor2.AttachTo(scene); } } { var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[i % floorColors.Length], specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; floor2.receiveShadow = true; floor2.position.set(2048 * i, 0, 1024 * i); floor2.AttachTo(scene); } // flipz { var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = floorColors[i % floorColors.Length], specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; floor2.receiveShadow = true; floor2.position.set(2048 * -i, 0, 1024 * -i); floor2.AttachTo(scene); } } #endregion // "shadow cameras" show the light source and direction // spotlight #1 -- yellow, dark shadow var spotlight = new THREE.SpotLight(0xffff00); spotlight.position.set(-60, 150, -30); //spotlight.shadowCameraVisible = true; spotlight.shadowDarkness = 0.95; spotlight.intensity = 2; // must enable shadow casting ability for the light spotlight.castShadow = true; scene.add(spotlight); // spotlight #2 -- red, light shadow var spotlight2 = new THREE.SpotLight(0xff0000); //var spotlight2 = new THREE.SpotLight(0xffff00); spotlight2.position.set(60, 150, -60); scene.add(spotlight2); //spotlight2.shadowCameraVisible = true; spotlight2.shadowDarkness = 0.70; spotlight2.intensity = 2; spotlight2.castShadow = true; // THREE.WebGLProgram: gl.getProgramInfoLog() Pixel shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16). for (int i = 0; i < 8; i++) { // spotlight #3 blue var spotlight3 = new THREE.SpotLight(0x0000ff); //var spotlight3 = new THREE.SpotLight(0x00ffff); spotlight3.position.set(150 * i, 80, -100); //spotlight3.shadowCameraVisible = true; spotlight3.shadowDarkness = 0.95; spotlight3.intensity = 2; spotlight3.castShadow = true; scene.add(spotlight3); // change the direction this spotlight is facing var lightTarget = new THREE.Object3D(); lightTarget.position.set(150 * i, 10, -100); scene.add(lightTarget); spotlight3.target = lightTarget; } // cube: mesh to cast shadows #region castShadow var cubeGeometry = new THREE.CubeGeometry(50, 50, 50); var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0x888888 }); var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial); //cube.position.set(0, 50, 0); cube0.position.set(0, 100, 0); // Note that the mesh is flagged to cast shadows cube0.castShadow = true; scene.add(cube0); // floor: mesh to receive shadows #endregion #region create walls 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 * i; 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); ii.AttachTo(sceneg); if (i % 2 == 0) { // Z:\jsc.svn\examples\javascript\WebGL\WebGLHZBlendCharacter\WebGLHZBlendCharacter\Application.cs #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); blendMesh.AttachTo(sceneg); //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 //// "Z:\jsc.svn\examples\javascript\WebGL\HeatZeekerRTSOrto\HeatZeekerRTSOrto\HeatZeekerRTSOrto.csproj" //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(); // cube.AttachTo(sceneg); // //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); cube.AttachTo(sceneg); //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; cube.AttachTo(sceneg); //scene.add(cube); } ); #endregion new Models.ColladaS6Edge().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 - 200); var scale = 0.9; // jsc, do we have ILObserver available yet? dae.scale.x = scale; dae.scale.y = scale; dae.scale.z = scale; //#region onmousewheel //Native.body.onmousewheel += // e => // { // e.preventDefault(); // //camera.position.z = 1.5; // // min max. shall adjust speed also! // // max 4.0 // // min 0.6 // dae.position.z -= 10.0 * e.WheelDirection; // //camera.position.z = 400; // //dae.position.z = dae.position.z.Max(-200).Min(200); // //Native.document.title = new { z }.ToString(); // }; //#endregion ////dae.position.y = -80; //dae.AttachTo(sceneg); ////scene.add(dae); //oo.Add(dae); // view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html // https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html Native.window.onframe += e => { // let render man know.. if (vsync != null) if (vsync.Task.IsCompleted) return; //if (pause) return; //if (pause.@checked) // return; // can we float out of frame? // haha. a bit too flickery. //dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0; //dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0; dae.position.x = Math.Sin(fcamerax * 0.001) * 190.0; dae.position.y = Math.Cos(fcamerax * 0.001) * 90.0; // manual rebuild? // red compiler notifies laptop chrome of pending update // app reloads applycameraoffset(); renderer0.clear(); //rendererPY.clear(); //cameraPX.aspect = canvasPX.aspect; //cameraPX.updateProjectionMatrix(); // um what does this do? //cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0; // mousewheel allos the camera to move closer // once we see the frame in vr, can we udp sync vr tracking back to laptop? //this.targetPX.x += 1; //this.targetNX.x -= 1; //this.targetPY.y += 1; //this.targetNY.y -= 1; //this.targetPZ.z += 1; //this.targetNZ.z -= 1; // how does the 360 or shadertoy want our cubemaps? // and then rotate right? // how can we render cubemap? #region x // upside down? renderer0.render(scene, cameraPX); canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNX); canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region z renderer0.render(scene, cameraPZ); canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNZ); canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region y renderer0.render(scene, cameraPY); //canvasPY.save(); //canvasPY.translate(0, size); //canvasPY.rotate((float)(-Math.PI / 2)); canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); //canvasPY.restore(); renderer0.render(scene, cameraNY); //canvasNY.save(); //canvasNY.translate(size, 0); //canvasNY.rotate((float)(Math.PI / 2)); canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); //canvasNY.restore(); // ? #endregion //renderer0.render(scene, cameraPX); //rendererPY.render(scene, cameraPY); // at this point we should be able to render the sphere texture //public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070; //public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072; //public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074; //var cube0 = new IHTMLImage[] { // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz() //}; new[] { canvasPX, canvasNX, canvasPY, canvasNY, canvasPZ, canvasNZ }.WithEachIndex( (img, index) => { gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex); //gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true // https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0); //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas); } ); // could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360 pass.Paint_Image( 0, 0, 0, 0, 0 //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); //paintsw.Stop(); // what does it do? gl.flush(); // let render man know.. if (vsync != null) if (!vsync.Task.IsCompleted) vsync.SetResult(null); }; } ); Console.WriteLine("do you see it?"); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine // inspired by http://granular.cs.umu.se/cannon.js/examples/threejs_fps.html /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page = null) { //Uncaught Error: ERROR: Quaternion's .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code. // WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported // IE11 does not work yet //DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); // DEPRECATED: Quaternion's .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead. Three.js:913 //Uncaught TypeError: Object [object Object] has no method 'subSelf' // { REVISION: '57' }; var boxes = new List <CANNON.RigidBody>(); var boxMeshes = new List <THREE.Mesh>(); var balls = new List <CANNON.RigidBody>(); var ballMeshes = new List <THREE.Mesh>(); Func <long> Date_now = () => (long)new IFunction("return Date.now();").apply(null); var time = Date_now(); #region initCannon // // Setup our world var world = new CANNON.World(); world.quatNormalizeSkip = 0; world.quatNormalizeFast = false; //world.solver.setSpookParams(300, 10); world.solver.iterations = 5; world.gravity.set(0, -20, 0); world.broadphase = new CANNON.NaiveBroadphase(); // // Create a slippery material (friction coefficient = 0.0) var physicsMaterial = new CANNON.Material("slipperyMaterial"); var physicsContactMaterial = new CANNON.ContactMaterial( physicsMaterial, physicsMaterial, 0.0, // friction coefficient 0.3 // restitution ); // // We must add the contact materials to the world world.addContactMaterial(physicsContactMaterial); var controls_sphereShape = default(CANNON.Sphere); var controls_sphereBody = default(CANNON.RigidBody); { // Create a sphere var mass = 5; var radius = 1.3; var sphereShape = new CANNON.Sphere(radius); var sphereBody = new CANNON.RigidBody(mass, sphereShape, physicsMaterial); controls_sphereShape = sphereShape; controls_sphereBody = sphereBody; sphereBody.position.set(0, 5, 0); sphereBody.linearDamping = 0.05; world.add(sphereBody); // // Create a plane var groundShape = new CANNON.Plane(); var groundBody = new CANNON.RigidBody(0, groundShape, physicsMaterial); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.add(groundBody); } #endregion #region init var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 0.1, 1000); var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 0, 500); var ambient = new THREE.AmbientLight(0x111111); scene.add(ambient); var light = new THREE.SpotLight(0xffffff, 1.0); light.position.set(10, 30, 20); light.target.position.set(0, 0, 0); // if(true){ light.castShadow = true; light.shadowCameraNear = 20; light.shadowCameraFar = 50;//camera.far; light.shadowCameraFov = 40; light.shadowMapBias = 0.1; light.shadowMapDarkness = 0.7; light.shadowMapWidth = 2 * 512; light.shadowMapHeight = 2 * 512; // //light.shadowCameraVisible = true; // } scene.add(light); var controls = new PointerLockControls(camera, controls_sphereBody); scene.add(controls.getObject()); // // floor var geometry = new THREE.PlaneGeometry(300, 300, 50, 50); geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); var material = new THREE.MeshLambertMaterial(new { color = 0xdddddd }); //Native.Window. // THREE.Design.THREE.ColorUtils.adjustHSV(material.color, 0, 0, 0.9); // Replaced ColorUtils.adjustHSV() with Color's .offsetHSL(). //new IFunction("material", "THREE.ColorUtils.offsetHSL( material.color, 0, 0, 0.9 );").apply(null, material); // var mesh = new THREE.Mesh(geometry, material) { castShadow = true, receiveShadow = true }; scene.add(mesh); var renderer = new THREE.WebGLRenderer(new object()); renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; //renderer.setSize(Native.Window.Width, Native.Window.Height); //renderer.setClearColor(scene.fog.color, 1); renderer.domElement.style.backgroundColor = JSColor.Black; renderer.domElement.AttachToDocument(); #region onresize Action AtResize = delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion var r = new Random(); Func <f> Math_random = () => r.NextFloat(); #region Add boxes { // for (var i = 0; i < 32; i++) { var boxsize = Math_random() * 0.5; var halfExtents = new CANNON.Vec3(boxsize, boxsize, boxsize); var boxShape = new CANNON.Box(halfExtents); var boxGeometry = new THREE.CubeGeometry(halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2); var x = (Math_random() - 0.5) * 20; var y = 1 + (Math_random() - 0.5) * 1; var z = (Math_random() - 0.5) * 20; var boxBody = new CANNON.RigidBody(5, boxShape); var boxMesh = new THREE.Mesh(boxGeometry, material); world.add(boxBody); scene.add(boxMesh); boxBody.position.set(x, y, z); boxMesh.position.set(x, y, z); boxMesh.castShadow = true; boxMesh.receiveShadow = true; //boxMesh.useQuaternion = true; boxes.Add(boxBody); boxMeshes.Add(boxMesh); } } #endregion #region Add linked boxes { // var size = 0.5; var he = new CANNON.Vec3(size, size, size * 0.1); var boxShape = new CANNON.Box(he); var mass = 0.0; var space = 0.1 * size; var N = 5; var last = default(CANNON.RigidBody); var boxGeometry = new THREE.CubeGeometry(he.x * 2, he.y * 2, he.z * 2); for (var i = 0; i < N; i++) { var boxbody = new CANNON.RigidBody(mass, boxShape); var boxMesh = new THREE.Mesh(boxGeometry, material); boxbody.position.set(5, (N - i) * (size * 2 + 2 * space) + size * 2 + space, 0); boxbody.linearDamping = 0.01; boxbody.angularDamping = 0.01; //boxMesh.useQuaternion = true; boxMesh.castShadow = true; boxMesh.receiveShadow = true; world.add(boxbody); scene.add(boxMesh); boxes.Add(boxbody); boxMeshes.Add(boxMesh); if (i != 0) { // Connect this body to the last one var c1 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(-size, size + space, 0), last, new CANNON.Vec3(-size, -size - space, 0)); var c2 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(size, size + space, 0), last, new CANNON.Vec3(size, -size - space, 0)); world.addConstraint(c1); world.addConstraint(c2); } else { mass = 0.3; } last = boxbody; } } #endregion #endregion var dt = 1.0 / 60; controls.enabled = true; // vr and tilt shift? Native.window.onframe += delegate { if (controls.enabled) { // how big of a world can we hold? // async ? world.step(dt); // Update ball positions for (var i = 0; i < balls.Count; i++) { balls[i].position.copy(ballMeshes[i].position); balls[i].quaternion.copy(ballMeshes[i].quaternion); } // Update box positions for (var i = 0; i < boxes.Count; i++) { boxes[i].position.copy(boxMeshes[i].position); boxes[i].quaternion.copy(boxMeshes[i].quaternion); } } controls.update(Date_now() - time); renderer.render(scene, camera); time = Date_now(); }; #region havePointerLock renderer.domElement.onclick += delegate { renderer.domElement.requestPointerLock(); }; #endregion #region onmousedown renderer.domElement.onmousedown += e => { if (e.MouseButton == IEvent.MouseButtonEnum.Middle) { if (Native.document.pointerLockElement == Native.document.body) { // cant requestFullscreen while pointerLockElement Console.WriteLine("exitPointerLock"); Native.document.exitPointerLock(); Native.document.exitFullscreen(); return; } Console.WriteLine("requestFullscreen"); renderer.domElement.requestFullscreen(); renderer.domElement.requestPointerLock(); return; } var ballradius = 0.1 + Math_random() * 0.9; var ballShape = new CANNON.Sphere(ballradius); var ballGeometry = new THREE.SphereGeometry(ballShape.radius, 32, 32); var shootDirection = new THREE.Vector3(); var shootVelo = 15; var projector = new THREE.Projector(); Action <THREE.Vector3> getShootDir = (targetVec) => { var vector = targetVec; targetVec.set(0, 0, 1); projector.unprojectVector(vector, camera); var ray = new THREE.Ray((THREE.Vector3)(object) controls_sphereBody.position, vector //.subSelf(controls_sphereBody.position) .normalize() ); targetVec.x = ray.direction.x; targetVec.y = ray.direction.y; targetVec.z = ray.direction.z; }; var x = controls_sphereBody.position.x; var y = controls_sphereBody.position.y; var z = controls_sphereBody.position.z; // could we attach physics via binding list? var ballBody = new CANNON.RigidBody(1, ballShape); var ballMesh = new THREE.Mesh(ballGeometry, material); world.add(ballBody); scene.add(ballMesh); ballMesh.castShadow = true; ballMesh.receiveShadow = true; balls.Add(ballBody); ballMeshes.Add(ballMesh); getShootDir(shootDirection); ballBody.velocity.set(shootDirection.x * shootVelo, shootDirection.y * shootVelo, shootDirection.z * shootVelo); // // Move the ball outside the player sphere x += shootDirection.x * (controls_sphereShape.radius + ballShape.radius); y += shootDirection.y * (controls_sphereShape.radius + ballShape.radius); z += shootDirection.z * (controls_sphereShape.radius + ballShape.radius); ballBody.position.set(x, y, z); ballMesh.position.set(x, y, z); //ballMesh.useQuaternion = true; }; #endregion //var ze = new ZeProperties(); //ze.Show(); //ze.Left = 0; //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); }
/// <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) { // SCENE scene = new THREE.Scene(); // CAMERA var SCREEN_WIDTH = Native.window.Width; var SCREEN_HEIGHT = Native.window.Height; var VIEW_ANGLE = 45; var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT; var NEAR = 0.1; var FAR = 20000; // perspective cameras perspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); perspectiveCamera.position.set(0,200,550); perspectiveCamera.lookAt(scene.position); scene.add(perspectiveCamera); // orthographic cameras mapCamera = new THREE.OrthographicCamera( Native.window.Width / -2, // Left Native.window.Width / 2, // Right Native.window.Height / 2, // Top Native.window.Height / -2, // Bottom -5000, // Near 10000 ); // Far mapCamera.up = new THREE.Vector3(0,0,-1); mapCamera.lookAt( new THREE.Vector3(0,-1,0) ); scene.add(mapCamera); renderer = new THREE.WebGLRenderer( new { antialias = true } ); // RENDERER renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); this.container = (IHTMLCanvas)renderer.domElement; this.container.AttachToDocument(); this.container.style.SetLocation(0, 0); // EVENTS //THREEx.WindowResize(renderer, mapCamera); //THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) }); // STATS //stats = new Stats(); //stats.domElement.style.position = 'absolute'; //stats.domElement.style.bottom = '0px'; //stats.domElement.style.zIndex = 100; //container.appendChild( stats.domElement ); // LIGHT var light = new THREE.PointLight(0xffffff); light.position.set(0,250,0); scene.add(light); // FLOOR var img = new uvgrid01(); var floorTexture = new THREE.Texture().With( async s => { s.image = await img; s.needsUpdate = true; }); floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set( 10, 10 ); var floorMaterial = new THREE.MeshBasicMaterial( new { map = floorTexture, side = THREE.DoubleSide } ); var floorGeometry = new THREE.PlaneGeometry(2000, 2000, 10, 10); var floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.y = -0.5; floor.rotation.x = Math.PI / 2; scene.add(floor); //////////// // CUSTOM // //////////// // materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ) })); // create an array with six textures for cube var materialArray = new THREE.MeshBasicMaterial[6]; materialArray[0] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new xpos(); s.needsUpdate = true; }) })); materialArray[1] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new xneg(); s.needsUpdate = true; }) })); materialArray[2] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new ypos(); s.needsUpdate = true; }) })); materialArray[3] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new yneg(); s.needsUpdate = true; }) })); materialArray[4] = (new THREE.MeshBasicMaterial( new {map = new THREE.Texture().With( async s => { s.image = await new zpos(); s.needsUpdate = true; }) })); materialArray[5] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new zneg(); s.needsUpdate = true; }) })); //var MovingCubeMat = new THREE.MeshFaceMaterial(new { material = materialArray }); var MovingCubeGeom = new THREE.CubeGeometry(50, 50, 50, 1, 1, 1); var MovingCube = new THREE.Mesh(MovingCubeGeom, new THREE.MeshBasicMaterial(new { color = new THREE.Color(0xFFFFFF) })); MovingCube.position.set(0, 25.1, 0); scene.add(MovingCube); // a little bit of scenery... var ambientlight = new THREE.AmbientLight(0x111111); scene.add( ambientlight ); // torus knot var colorMaterial = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0xff3333) }); var shape = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 2, 5, 4), colorMaterial); shape.position.set(-200, 50, -200); scene.add(shape); // torus knot var colorMaterial2 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0x33ff33) }); var shape2 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 2, 4), colorMaterial2); shape2.position.set(200, 50, -200); scene.add(shape2); // torus knot var colorMaterial3 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0xffff33) }); var shape3 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 4, 3, 4), colorMaterial3); shape3.position.set(200, 50, 200); scene.add(shape3); // torus knot var colorMaterial4 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0x3333ff) }); var shape4 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 4, 4), colorMaterial4); shape4.position.set(-200, 50, 200); scene.add(shape4); renderer.setSize(Native.window.Width, Native.window.Height); renderer.setClearColor( 0x000000, 1 ); renderer.autoClear = false; Native.window.onframe += e => { perspectiveCamera.updateProjectionMatrix(); render(); }; var isPushed = false; this.container.onkeydown += m => { isPushed = true; if (isPushed) { //var delta = clock.getDelta(); // seconds. var moveDistance = 200 * 2; // 200 pixels per second var rotateAngle = Math.PI / 2 * 2; // pi/2 radians (90 degrees) per second // local transformations // move forwards/backwards/left/right if (m.KeyCode == 87) MovingCube.translateZ(-moveDistance); if (m.KeyCode == 83) MovingCube.translateZ(moveDistance); if (m.KeyCode == 81) MovingCube.translateX(-moveDistance); if (m.KeyCode == 69) MovingCube.translateX(moveDistance); //// rotate left/right/up/down //var rotation_matrix = new THREE.Matrix4().identity(); //if (m.KeyCode == 65) // MovingCube.rotateOnAxis(new THREE.Vector3(0, 1, 0), rotateAngle); //if (m.KeyCode == 68) // MovingCube.rotateOnAxis(new THREE.Vector3(0, 1, 0), -rotateAngle); //if (m.KeyCode == 90) //{ // MovingCube.position.set(0, 25.1, 0); // MovingCube.rotation.set(0, 0, 0); //} } }; this.container.onkeyup += e => { isPushed = false; }; Native.window.onresize += delegate { //if (canvas.parentNode == Native.document.body) // are we embedded? if (page != null) renderer.setSize(); }; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page = null) { { THREE.SkinnedMesh ref0; } { THREE.SpeedBlendCharacter ref0; } // will skip DefineVersionInfoResource //102c: 02:01:1e RewriteToAssembly error: System.NotSupportedException: Type 'xchrome.BCLImplementation.System.Net.Sockets.__TcpListener' was not completed. #region AtFormCreated FormStyler.AtFormCreated = s => { s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // this is working? var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget()); }; #endregion #if false #region ChromeTCPServer dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src; chrome.Notification.DefaultTitle = "WebGLYomotsuTPS"; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text, AtFormCreated: FormStyler.AtFormCreated ); return; } #endregion #endif var fov = 40; #region container Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.backgroundColor = "#000000"; container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); #endregion var player_model_objects = new THREE.Object3D(); var player_position_x = 0.0f; var player_position_y = 0.0f; var player_position_z = 0.0f; var player_position_direction = 0; var player_camera_speed = 300; var player_camera_distance = 5; var player_camera_x = 0.0f; var player_camera_y = 0.0f; var player_camera_z = 0.0f; var player_motion = default(motion); //var width = Native.window.Width; //var height = Native.window.Height; var clock = new Stopwatch(); clock.Start(); //var clock = new THREE.Clock(); var scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000000, 0.05f); scene.add(player_model_objects); var camera = new THREE.PerspectiveCamera(fov, Native.window.aspect, //width / height, 1, 1000); scene.add(camera); #region light var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(1, 1, 1).normalize(); light.castShadow = true; scene.add(light); #endregion var md2frames = new md2frames(); var moveState_moving = false; var moveState_front = false; var moveState_Backwards = false; var moveState_left = false; var moveState_right = false; var moveState_speed = .1; var moveState_angle = 0; #region move Action move = delegate { // if(player.model.motion !== 'run' && player.model.state === 'stand'){ // changeMotion('run'); //} //if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){ // changeMotion('crwalk'); //} var speed = moveState_speed; //if(player.model.state === 'crstand'){speed *= .5;} //if(player.model.state === 'freeze') {speed *= 0;} var direction = moveState_angle; if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right) { direction += 0; } if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 45; } if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 90; } if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right) { direction += 135; } if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right) { direction += 180; } if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right) { direction += 225; } if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 270; } if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 315; } player_model_objects.rotation.y = (float)(direction * Math.PI / 180); player_position_x -= (float)(Math.Sin(direction * Math.PI / 180) * speed); player_position_z -= (float)(Math.Cos(direction * Math.PI / 180) * speed); }; #endregion #region camera rotation Action rotate = delegate { }; var pointer_x = 0f; var pointer_y = 0f; var oldPointerX = 0f; var oldPointerY = 0f; container.onmousemove += e => { if (Native.document.pointerLockElement == container) { oldPointerX = 0; oldPointerY = 0; pointer_x = e.movementX * 0.01f; pointer_y = -e.movementY * 0.01f; rotate(); return; } pointer_x = (e.CursorX / Native.window.Width) * 2 - 1; pointer_y = -(e.CursorY / Native.window.Height) * 2 + 1; rotate(); }; container.onmouseup += e => { rotate = delegate { }; Native.document.exitPointerLock(); }; container.onmousedown += e => { oldPointerX = pointer_x; oldPointerY = pointer_y; rotate = delegate { player_camera_x += (oldPointerX - pointer_x) * player_camera_speed; player_camera_y += (oldPointerY - pointer_y) * player_camera_speed; if (player_camera_y > 150) { player_camera_y = 150; } if (player_camera_y < -150) { player_camera_y = -150; } moveState_angle = Convert.ToInt32(player_camera_x / 2) % 360; oldPointerX = pointer_x; oldPointerY = pointer_y; }; Console.WriteLine("requestPointerLock"); container.requestPointerLock(); }; #endregion var renderer = new THREE.WebGLRenderer(); //renderer.setSize(width, height); renderer.setSize(); renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; renderer.domElement.AttachTo(container); #region create field var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var planeMaterial = new THREE.MeshLambertMaterial( new { map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.bg().src), color = 0xffffff } ); planeMaterial.map.repeat.x = 300; planeMaterial.map.repeat.y = 300; planeMaterial.map.wrapS = THREE.RepeatWrapping; planeMaterial.map.wrapT = THREE.RepeatWrapping; var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 0; i < 100; i++) { var ii = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial( new { color = (Convert.ToInt32(0xffffff * random.NextDouble())) })); ii.position.x = i % 2 * 5 - 2.5f; ii.position.y = .5f; ii.position.z = -1 * i * 4; ii.castShadow = true; ii.receiveShadow = true; meshArray.Add(ii); scene.add(ii); } #endregion //load converted md2 data var material = new THREE.MeshPhongMaterial( new { map = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets._1().src ), ambient = 0x999999, color = 0xffffff, specular = 0xffffff, shininess = 25, morphTargets = true } ); var loader = new THREE.JSONLoader(); loader.load( new global::WebGLYomotsuTPS.Design.droid().Content.src, xgeometry => { var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material); md2meshBody.rotation.y = (float)(-Math.PI / 2); md2meshBody.scale.set(.02, .02, .02); md2meshBody.position.y = .5f; md2meshBody.castShadow = true; md2meshBody.receiveShadow = false; #region player_motion Action<motion> player_changeMotion = motion => { Console.WriteLine( new { motion, md2frames.run, md2frames.stand }); player_motion = motion; // player.state = md2frames[motion][3].state; var animMin = motion.min; var animMax = motion.max; var animFps = motion.fps; md2meshBody.time = 0; md2meshBody.duration = (int)( 1000 * ((animMax - animMin) / (double)animFps) ); Native.document.title = new { animMin, animMax }.ToString(); md2meshBody.setFrameRange(animMin, animMax); }; player_changeMotion(md2frames.stand); #endregion player_model_objects.add(md2meshBody); #region onkeydown Native.document.onkeydown += e => { if (e.KeyCode == 67) { if (player_motion == md2frames.stand) player_changeMotion(md2frames.crstand); else if (player_motion == md2frames.crstand) player_changeMotion(md2frames.stand); } else if (e.KeyCode == 87) { moveState_front = true; moveState_Backwards = false; } else if (e.KeyCode == 83) { moveState_front = false; moveState_Backwards = true; } else if (e.KeyCode == 65) { moveState_left = true; moveState_right = false; } else if (e.KeyCode == 68) { moveState_left = false; moveState_right = true; } var isStand = player_motion == md2frames.stand; Console.WriteLine( new { e.KeyCode, moveState_front, moveState_Backwards, isStand } ); if (moveState_front || moveState_Backwards || moveState_left || moveState_right) if (player_motion == md2frames.stand) player_changeMotion(md2frames.run); else if (player_motion == md2frames.crstand) player_changeMotion(md2frames.crwalk); }; #endregion #region onkeyup Native.document.onkeyup += e => { if (e.KeyCode == 87) { moveState_front = false; } else if (e.KeyCode == 83) { moveState_Backwards = false; } else if (e.KeyCode == 65) { moveState_left = false; } else if (e.KeyCode == 68) { moveState_right = false; } }; #endregion #region loop Native.window.onframe += delegate { if (moveState_front || moveState_Backwards || moveState_left || moveState_right) move(); else if (player_motion == md2frames.run) player_changeMotion(md2frames.stand); else if (player_motion == md2frames.crwalk) player_changeMotion(md2frames.crstand); player_model_objects.position.x = player_position_x; player_model_objects.position.y = player_position_y; player_model_objects.position.z = player_position_z; // camera rotate x camera.position.x = (float)(player_position_x + player_camera_distance * Math.Sin((player_camera_x) * Math.PI / 360.0)); camera.position.z = (float)(player_position_z + player_camera_distance * Math.Cos((player_camera_x) * Math.PI / 360.0)); //camera rotate y //camera.position.x = player.position.x + player.camera.distance * Math.cos( (player.camera.y) * Math.PI / 360 ); camera.position.y = (float)(player_position_y + player_camera_distance * Math.Sin((player_camera_y) * Math.PI / 360.0)); //camera.position.z = player.position.z + player.camera.distance * Math.cos( (player.camera.y) * Math.PI / 360 ); camera.position.y += 1; //console.log(camera.position.z) var vec3 = new THREE.Vector3(player_position_x, player_position_y, player_position_z); camera.lookAt(vec3); #region model animation var delta = clock.ElapsedMilliseconds * 0.001; clock.Restart(); var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe); var isAction = player_motion.action; var x = (isAction && !isEndFleame); if (!isAction || x) { md2meshBody.updateAnimation(1000 * delta); } else if (player_motion.state == "freeze") { //dead... } else { player_changeMotion(player_motion); } #endregion renderer.render(scene, camera); }; #endregion #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); renderer.setSize(Native.window.Width, Native.window.Height); camera.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100); //camera.aspect = Native.Window.Width / Native.Window.Height; //camera.updateProjectionMatrix(); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); //AtResize(); }; #endregion } ); }
void InitializeContent() { #region make sure we atleast have our invisible DOM var page_song = new nyanlooped { loop = true }; var page_song2 = new nyanslow { loop = true }; #endregion #region container Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.backgroundColor = "#003366"; container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); #endregion var renderer = new THREE.WebGLRenderer(); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachTo(container); var numStars = 10; var numRainChunks = 30; var mouseX = 0; var mouseY = 0; var clock = new Stopwatch(); clock.Start(); var deltaSum = 0f; //tick=0, var frame = 0; var running = true; #region onmousemove Native.document.onmousemove += e => { if (IsDisposed) return; var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; mouseX = (e.CursorX - windowHalfX); mouseY = (e.CursorY - windowHalfY); }; #endregion Action PlaySomething = delegate { if (running) { page_song.play(); page_song2.pause(); } else { page_song.pause(); page_song2.play(); } }; #region onmousedown Native.document.onmousedown += e => { if (IsDisposed) return; running = !running; PlaySomething(); }; #endregion #region HasFocus var HasFocus = false; Native.window.onblur += delegate { HasFocus = false; page_song.pause(); page_song2.pause(); }; Native.window.onfocus += delegate { HasFocus = true; PlaySomething(); }; Native.Document.onmousemove += delegate { if (HasFocus) return; PlaySomething(); }; Native.Document.onmouseout += delegate { if (HasFocus) return; page_song.pause(); page_song2.pause(); }; #endregion #region helper Action<THREE.Object3D, f, f, f, f, f, f, int> helper = (o, x, y, z, w, h, d, c) => { // function helper(o, x, y, z, w, h, d, c){ var material = new THREE.MeshLambertMaterial(new { color = c }); var geometry = new THREE.CubeGeometry(w, h, d, 1, 1, 1); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = x + (w / 2); mesh.position.y = y - (h / 2); mesh.position.z = z + (d / 2); o.add(mesh); }; #endregion #region buildStar Action<THREE.Object3D, int> buildStar = (star, state) => { #region dear JSC, please start supporting switch! if (state == 0) { helper(star, 0, 0, 0, 1, 1, 1, 0xffffff); } else if (state == 1) { helper(star, 1, 0, 0, 1, 1, 1, 0xffffff); helper(star, -1, 0, 0, 1, 1, 1, 0xffffff); helper(star, 0, 1, 0, 1, 1, 1, 0xffffff); helper(star, 0, -1, 0, 1, 1, 1, 0xffffff); } else if (state == 2) { helper(star, 1, 0, 0, 2, 1, 1, 0xffffff); helper(star, -2, 0, 0, 2, 1, 1, 0xffffff); helper(star, 0, 2, 0, 1, 2, 1, 0xffffff); helper(star, 0, -1, 0, 1, 2, 1, 0xffffff); } else if (state == 3) { helper(star, 0, 0, 0, 1, 1, 1, 0xffffff); helper(star, 2, 0, 0, 2, 1, 1, 0xffffff); helper(star, -3, 0, 0, 2, 1, 1, 0xffffff); helper(star, 0, 3, 0, 1, 2, 1, 0xffffff); helper(star, 0, -2, 0, 1, 2, 1, 0xffffff); } else if (state == 4) { helper(star, 0, 3, 0, 1, 1, 1, 0xffffff); helper(star, 2, 2, 0, 1, 1, 1, 0xffffff); helper(star, 3, 0, 0, 1, 1, 1, 0xffffff); helper(star, 2, -2, 0, 1, 1, 1, 0xffffff); helper(star, 0, -3, 0, 1, 1, 1, 0xffffff); helper(star, -2, -2, 0, 1, 1, 1, 0xffffff); helper(star, -3, 0, 0, 1, 1, 1, 0xffffff); helper(star, -2, 2, 0, 1, 1, 1, 0xffffff); } else if (state == 4) { helper(star, 2, 0, 0, 1, 1, 1, 0xffffff); helper(star, -2, 0, 0, 1, 1, 1, 0xffffff); helper(star, 0, 2, 0, 1, 1, 1, 0xffffff); helper(star, 0, -2, 0, 1, 1, 1, 0xffffff); } #endregion }; #endregion var r = new Random(); Func<f> Math_random = () => r.NextFloat(); var stars = new List<List<THREE.Object3D>>(); #region init var camera = new THREE.PerspectiveCamera(45, Native.window.Width / Native.window.Height, .1f, 10000); camera.position.z = 30; camera.position.x = 0; camera.position.y = 0; var scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x003366, 0.0095f); #region POPTART var poptart = new THREE.Object3D(); // object x y z w h d color helper(poptart, 0, -2, -1, 21, 14, 3, 0x222222); helper(poptart, 1, -1, -1, 19, 16, 3, 0x222222); helper(poptart, 2, 0, -1, 17, 18, 3, 0x222222); helper(poptart, 1, -2, -1.5f, 19, 14, 4, 0xffcc99); helper(poptart, 2, -1, -1.5f, 17, 16, 4, 0xffcc99); helper(poptart, 2, -4, 2, 17, 10, .6f, 0xff99ff); helper(poptart, 3, -3, 2, 15, 12, .6f, 0xff99ff); helper(poptart, 4, -2, 2, 13, 14, .6f, 0xff99ff); helper(poptart, 4, -4, 2, 1, 1, .7f, 0xff3399); helper(poptart, 9, -3, 2, 1, 1, .7f, 0xff3399); helper(poptart, 12, -3, 2, 1, 1, .7f, 0xff3399); helper(poptart, 16, -5, 2, 1, 1, .7f, 0xff3399); helper(poptart, 8, -7, 2, 1, 1, .7f, 0xff3399); helper(poptart, 5, -9, 2, 1, 1, .7f, 0xff3399); helper(poptart, 9, -10, 2, 1, 1, .7f, 0xff3399); helper(poptart, 3, -11, 2, 1, 1, .7f, 0xff3399); helper(poptart, 7, -13, 2, 1, 1, .7f, 0xff3399); helper(poptart, 4, -14, 2, 1, 1, .7f, 0xff3399); poptart.position.x = -10.5f; poptart.position.y = 9; scene.add(poptart); #endregion #region FEET var feet = new THREE.Object3D(); helper(feet, 0, -2, .49f, 3, 3, 1, 0x222222); helper(feet, 1, -1, .49f, 3, 3, 1, 0x222222); helper(feet, 1, -2, -.01f, 2, 2, 2, 0x999999); helper(feet, 2, -1, -.01f, 2, 2, 2, 0x999999); helper(feet, 6, -2, -.5f, 3, 3, 1, 0x222222); helper(feet, 6, -2, -.5f, 4, 2, 1, 0x222222); helper(feet, 7, -2, -.99f, 2, 2, 2, 0x999999); helper(feet, 16, -3, .49f, 3, 2, 1, 0x222222); helper(feet, 15, -2, .49f, 3, 2, 1, 0x222222); helper(feet, 15, -2, -.01f, 2, 1, 2, 0x999999); helper(feet, 16, -3, -.01f, 2, 1, 2, 0x999999); helper(feet, 21, -3, -.5f, 3, 2, 1, 0x222222); helper(feet, 20, -2, -.5f, 3, 2, 1, 0x222222); helper(feet, 20, -2, -.99f, 2, 1, 2, 0x999999); helper(feet, 21, -3, -.99f, 2, 1, 2, 0x999999); feet.position.x = -12.5f; feet.position.y = -6; scene.add(feet); #endregion #region TAIL var tail = new THREE.Object3D(); helper(tail, 0, 0, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 1, -1, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 2, -2, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 3, -3, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 1, -1, -.5f, 2, 1, 2, 0x999999); helper(tail, 2, -2, -.5f, 2, 1, 2, 0x999999); helper(tail, 3, -3, -.5f, 2, 1, 2, 0x999999); helper(tail, 4, -4, -.5f, 2, 1, 2, 0x999999); tail.position.x = -16.5f; tail.position.y = 2; scene.add(tail); #endregion #region FACE var face = new THREE.Object3D(); helper(face, 2, -3, -3, 12, 9, 4, 0x222222); helper(face, 0, -5, 0, 16, 5, 1, 0x222222); helper(face, 1, -1, 0, 4, 10, 1, 0x222222); helper(face, 11, -1, 0, 4, 10, 1, 0x222222); helper(face, 3, -11, 0, 10, 2, 1, 0x222222); helper(face, 2, 0, 0, 2, 2, 1, 0x222222); helper(face, 4, -2, 0, 2, 2, 1, 0x222222); helper(face, 12, 0, 0, 2, 2, 1, 0x222222); helper(face, 10, -2, 0, 2, 2, 1, 0x222222); helper(face, 1, -5, .5f, 14, 5, 1, 0x999999); helper(face, 3, -4, .5f, 10, 8, 1, 0x999999); helper(face, 2, -1, .5f, 2, 10, 1, 0x999999); helper(face, 12, -1, .5f, 2, 10, 1, 0x999999); helper(face, 4, -2, .5f, 1, 2, 1, 0x999999); helper(face, 5, -3, .5f, 1, 1, 1, 0x999999); helper(face, 11, -2, .5f, 1, 2, 1, 0x999999); helper(face, 10, -3, .5f, 1, 1, 1, 0x999999); //Eyes helper(face, 4, -6, .6f, 2, 2, 1, 0x222222); helper(face, 11, -6, .6f, 2, 2, 1, 0x222222); helper(face, 3.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff); helper(face, 10.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff); //MOUTH helper(face, 5, -10, .6f, 7, 1, 1, 0x222222); helper(face, 5, -9, .6f, 1, 2, 1, 0x222222); helper(face, 8, -9, .6f, 1, 2, 1, 0x222222); helper(face, 11, -9, .6f, 1, 2, 1, 0x222222); //CHEEKS helper(face, 2, -8, .6f, 2, 2, .91f, 0xff9999); helper(face, 13, -8, .6f, 2, 2, .91f, 0xff9999); face.position.x = -.5f; face.position.y = 4; face.position.z = 4; scene.add(face); #endregion #region RAINBOW var rainbow = new THREE.Object3D(); for (var c = 0; c < numRainChunks - 1; c++) { var yOffset = 8; if (c % 2 == 1) yOffset = 7; var xOffset = (-c * 8) - 16.5f; helper(rainbow, xOffset, yOffset, 0, 8, 3, 1, 0xff0000); helper(rainbow, xOffset, yOffset - 3, 0, 8, 3, 1, 0xff9900); helper(rainbow, xOffset, yOffset - 6, 0, 8, 3, 1, 0xffff00); helper(rainbow, xOffset, yOffset - 9, 0, 8, 3, 1, 0x33ff00); helper(rainbow, xOffset, yOffset - 12, 0, 8, 3, 1, 0x0099ff); helper(rainbow, xOffset, yOffset - 15, 0, 8, 3, 1, 0x6633ff); } scene.add(rainbow); #endregion #region rainChunk var rainChunk = new THREE.Object3D(); helper(rainChunk, -16.5f, 7, 0, 8, 3, 1, 0xff0000); helper(rainChunk, -16.5f, 4, 0, 8, 3, 1, 0xff9900); helper(rainChunk, -16.5f, 1, 0, 8, 3, 1, 0xffff00); helper(rainChunk, -16.5f, -2, 0, 8, 3, 1, 0x33ff00); helper(rainChunk, -16.5f, -5, 0, 8, 3, 1, 0x0099ff); helper(rainChunk, -16.5f, -8, 0, 8, 3, 1, 0x6633ff); rainChunk.position.x -= (8 * (numRainChunks - 1)); scene.add(rainChunk); #endregion #region stars for (var state = 0; state < 6; state++) { stars.Add(new List<THREE.Object3D>()); for (var c = 0; c < numStars; c++) { var star = new THREE.Object3D(); star.position.x = Math_random() * 200 - 100; star.position.y = Math_random() * 200 - 100; star.position.z = Math_random() * 200 - 100; buildStar(star, state); scene.add(star); stars[state].Add(star); } } #endregion var pointLight = new THREE.PointLight(0xFFFFFF); pointLight.position.z = 1000; scene.add(pointLight); #endregion #region IsDisposed Dispose = delegate { if (IsDisposed) return; IsDisposed = true; page_song.pause(); page_song2.pause(); container.Orphanize(); }; #endregion Native.window.onframe += delegate { f delta = clock.ElapsedMilliseconds * 0.001f; clock.Restart(); if (running) deltaSum += delta; if (deltaSum > .07) { deltaSum = deltaSum % .07f; frame = (frame + 1) % 12; for (var c = 0; c < numStars; c++) { var tempX = stars[5][c].position.x; var tempY = stars[5][c].position.y; var tempZ = stars[5][c].position.z; for (var state = 5; state > 0; state--) { var star = stars[state][c]; var star2 = stars[state - 1][c]; star.position.x = star2.position.x - 8; star.position.y = star2.position.y; star.position.z = star2.position.z; if (star.position.x < -100) { star.position.x += 200; star.position.y = Math_random() * 200 - 100; star.position.z = Math_random() * 200 - 100; } } stars[0][c].position.x = tempX; stars[0][c].position.y = tempY; stars[0][c].position.z = tempZ; } #region dear JSC, please start supporting switch! if (frame == 0) { face.position.x++; feet.position.x++; } else if (frame == 1) { face.position.y--; feet.position.x++; feet.position.y--; poptart.position.y--; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 2) { feet.position.x--; } else if (frame == 3) { face.position.x--; feet.position.x--; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } else if (frame == 4) { face.position.y++; } else if (frame == 5) { poptart.position.y++; feet.position.y++; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 6) { face.position.x++; feet.position.x++; } else if (frame == 7) { poptart.position.y--; face.position.y--; feet.position.x++; feet.position.y--; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } else if (frame == 8) { feet.position.x--; } else if (frame == 9) { face.position.x--; feet.position.x--; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 10) { face.position.y++; } else if (frame == 11) { poptart.position.y++; feet.position.y++; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } #endregion } camera.position.x += (mouseX - camera.position.x) * .005f; camera.position.y += (-mouseY - camera.position.y) * .005f; camera.lookAt(scene.position); renderer.render(scene, camera); }; #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); }; #endregion }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { Native.body.Clear(); Native.body.style.margin = "0px"; // http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/ //this sets the canvas size. var WIDTH = Native.window.Width; var HEIGHT = Native.window.Height; // camera attributes var VIEW_ANGLE = 45; var ASPECT = WIDTH / HEIGHT; var NEAR = 0.1; var FAR = 10000; var renderer = new THREE.WebGLRenderer(); //I am choosing the WebGL renderer here, but you have others to choose from var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); //these variables have been set at the top of our script var scene = new THREE.Scene(); //create a new scene // the camera starts at 0,0,0 so we need to pull back camera.position.z = 200; // start the renderer renderer.setSize(WIDTH, HEIGHT); // http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/ //create materials var material = new THREE.MeshLambertMaterial(new { color = 0xCC0000 }); //var material = new THREE.MeshBasicMaterial({color: 0xCC0000}); //gives you just a flat colour – ugly // create a new mesh with sphere geometry var radius = 50; var segments = 16; var rings = 16; var mesh = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material).AttachTo(scene); //scene.addChild(mesh); scene.add(mesh); renderer.domElement.AttachToDocument(); var pointLight = new THREE.PointLight(0xFFFFFF); // set its position pointLight.position.x = 50; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.add(pointLight); //scene.addLight(pointLight); // render our scene Native.window.onframe += delegate { renderer.render(scene, camera); }; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // "X:\opensource\github\three.js\examples\canvas_camera_orthographic.html" // if i type THREE, would jsc be able to add THREE package on rebuild? // Error 136 The type or namespace name 'THREE' could not be found (are you missing a using directive or an assembly reference?) X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs 35 26 WebGLOrthographicCamera // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs var camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -500, 1000); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; var scene = new THREE.Scene(); // Grid var size = 500; var step = 50; Func <double> random = new Random().NextDouble; { var geometry = new THREE.Geometry(); for (var i = -size; i <= size; i += step) { ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size)); } var material = new THREE.LineBasicMaterial(new { color = 0x000000, opacity = 0.2 }); var line = new THREE.Line(geometry, material); line.type = THREE.LinePieces; scene.add(line); } #region Cubes { var geometry = new THREE.BoxGeometry(50, 50, 50); var material = new THREE.MeshLambertMaterial(new { color = 0xffffff, shading = THREE.FlatShading, overdraw = 0.5 }); for (var i = 0; i < 100; i++) { var cube = new THREE.Mesh(geometry, material); cube.scale.y = Math.Floor(random() * 2 + 1); cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); } } #endregion #region Lights var ambientLight = new THREE.AmbientLight((int)(random() * 0x10)); scene.add(ambientLight); { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff)); directionalLight.position.x = random() - 0.5; directionalLight.position.y = random() - 0.5; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff)); directionalLight.position.x = random() - 0.5; directionalLight.position.y = random() - 0.5; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } #endregion //var renderer = new THREE.CanvasRenderer(); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xf0f0f0); //renderer.setSize(Native.window.Width, Native.window.Height); renderer.setSize(); renderer.domElement.AttachToDocument(); //window.addEventListener( 'resize', onWindowResize, false ); var s = Stopwatch.StartNew(); Native.window.onframe += e => { // jsc, when can we have the edit and continue already? //var timer = s.ElapsedMilliseconds * 0.1; var timer = s.ElapsedMilliseconds * 0.0001; camera.position.x = Math.Cos(timer) * 200; camera.position.z = Math.Sin(timer) * 200; camera.lookAt(scene.position); renderer.render(scene, camera); }; }
/// <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) { // https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed #region ChromeTCPServer dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { #region AtFormCreated FormStyler.AtFormCreated = ss => { ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // this is working? var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget()); }; #endregion chrome.Notification.DefaultTitle = "Heat Zeeker"; chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text, AtFormCreated: FormStyler.AtFormCreated ); return; } #endregion Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // jsc, add THREE // ... ok. // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs // this is not isometric. // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 var camera = new THREE.OrthographicCamera( Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2 , // if we change these values what will change? -1000, 1000 ); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; var scene = new THREE.Scene(); // Grid var size = 600; var step = 50; Func<double> random = new Random().NextDouble; // how do I add a new ground box? { var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2); var material = new THREE.MeshLambertMaterial(new { color = 0xB27D51 // , shading = THREE.FlatShading, overdraw = 0.5 }); { var cube = new THREE.Mesh(geometry, material); // why cant we get the shadows?? cube.receiveShadow = true; cube.scale.y = Math.Floor(random() * 2 + 1); cube.position.x = 0; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.y = -2; cube.position.z = 0; scene.add(cube); } } { var geometry = new THREE.Geometry(); for (var i = -size; i <= size; i += step) { ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size)); } var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 }); var line = new THREE.Line(geometry, material, mode: THREE.LinePieces); scene.add(line); } var interactiveObjects = new List<THREE.Object3D>(); #region Cubes { for (var i = 0; i < 8; i++) { new HZBunker().Source.Task.ContinueWithResult( 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 = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZWaterTower().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); // http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows // http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js //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 = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZCannon().Source.Task.ContinueWithResult( 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 = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //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; cube.rotation.y = random() * Math.PI * 2; scene.add(cube); interactiveObjects.Add(cube); } ); } } #endregion // we need expression evaluator with intellisense for live debugging sessions #region Lights var ambientLight = new THREE.AmbientLight((int)(random() * 0x10)); scene.add(ambientLight); // can we get our shadows? { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } #endregion //var renderer = new THREE.CanvasRenderer(); var renderer = new THREE.WebGLRenderer(); renderer.shadowMapEnabled = true; // background-color: #B27D51; renderer.setClearColor(0xB27D51); //renderer.setSize( // Native.window.Width , // Native.window.Height * 10 // ); renderer.setSize(); renderer.domElement.AttachToDocument(); Native.window.onresize += delegate { camera.left = Native.window.Width / -2; camera.right = Native.window.Width / 2; camera.top = Native.window.Height / 2; camera.bottom = Native.window.Height / -2; camera.updateProjectionMatrix(); renderer.setSize(); }; //window.addEventListener( 'resize', onWindowResize, false ); //#region Comanche //new Comanche().Source.Task.ContinueWithResult( // Comanche => // { // Comanche.position.y = 200; // //dae.position.z = 280; // Comanche.AttachTo(scene); // //scene.add(dae); // //oo.Add(Comanche); // // wont do it // //dae.castShadow = true; // // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d // //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); // //helper.update(); // //// If you want a visible bounding box // //scene.add(helper); // Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // // the rotors? // Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); // Comanche.scale.set(0.5, 0.5, 0.5); // //helper.scale.set(0.5, 0.5, 0.5); // var 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; // //rotation.y = sw.ElapsedMilliseconds * 0.01; // Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001; // //dae.children[0].children[0].children.Last().app // }; // } //); //#endregion //#region ee //// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs //// can we restile the window as the pin window in IDE? //var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual }; //var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee); ////ee.AutoSize = AutoSizeMode. ////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height); //ee.ClientSize = new System.Drawing.Size(200, 24); //ee.Show(); ////ee_camera_y. //ee_camera_y.TextChanged += delegate //{ // camera.position.y = double.Parse(ee_camera_y.Text); //}; //#endregion var s = Stopwatch.StartNew(); var controls = new THREE.OrbitControls(camera, renderer.domElement); // http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js // var effect = new THREE.OculusRiftEffect( //renderer, new //{ // worldScale = 100, // //HMD // } //); // effect.setSize(1920, 1080); Native.window.onframe += e => { // jsc, when can we have the edit and continue already? //var timer = s.ElapsedMilliseconds * 0.1; //var timer = s.ElapsedMilliseconds * 0.0001; //camera.position.x = Math.Cos(timer) * 200; //camera.position.z = Math.Sin(timer) * 200; // camera.position.z = 200; //camera.position.y = 100; //camera.position.y = Math.Sin(timer * 0.1) * 200; controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); //effect.render(scene, camera); }; //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; // view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html //var mouse2D = new THREE.Vector3(0, 10000, 0.5); //renderer.domElement.onclick += // e => // { // e.preventDefault(); // mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1; // mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1; // var vector = new THREE.Vector3( // (e.CursorX / (double)Native.window.Width) * 2 - 1, // -(e.CursorY / (double)Native.window.Height) * 2 + 1, // 0.5); // // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs // var projector = new THREE.Projector(); // projector.unprojectVector(vector, camera); // // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast // // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray // // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html // // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera // // use picking ray since it's an orthographic camera // // doesnt fkin work ??? // //var raycaster = projector.pickingRay(vector, camera); // var raycaster = projector.pickingRay(mouse2D.clone(), camera); // //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); // var intersects = raycaster.intersectObjects(interactiveObjects.ToArray()); // // https://github.com/mrdoob/three.js/issues/599 // Native.document.title = new { intersects.Length }.ToString(); // }; }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine // inspired by http://granular.cs.umu.se/cannon.js/examples/threejs_fps.html /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page = null) { //Uncaught Error: ERROR: Quaternion's .setFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code. // WEBGL11095: INVALID_OPERATION: clearStencil: Method not currently supported // IE11 does not work yet //DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); // DEPRECATED: Quaternion's .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead. Three.js:913 //Uncaught TypeError: Object [object Object] has no method 'subSelf' // { REVISION: '57' }; var boxes = new List<CANNON.RigidBody>(); var boxMeshes = new List<THREE.Mesh>(); var balls = new List<CANNON.RigidBody>(); var ballMeshes = new List<THREE.Mesh>(); Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null); var time = Date_now(); #region initCannon // // Setup our world var world = new CANNON.World(); world.quatNormalizeSkip = 0; world.quatNormalizeFast = false; //world.solver.setSpookParams(300, 10); world.solver.iterations = 5; world.gravity.set(0, -20, 0); world.broadphase = new CANNON.NaiveBroadphase(); // // Create a slippery material (friction coefficient = 0.0) var physicsMaterial = new CANNON.Material("slipperyMaterial"); var physicsContactMaterial = new CANNON.ContactMaterial( physicsMaterial, physicsMaterial, 0.0, // friction coefficient 0.3 // restitution ); // // We must add the contact materials to the world world.addContactMaterial(physicsContactMaterial); var controls_sphereShape = default(CANNON.Sphere); var controls_sphereBody = default(CANNON.RigidBody); { // Create a sphere var mass = 5; var radius = 1.3; var sphereShape = new CANNON.Sphere(radius); var sphereBody = new CANNON.RigidBody(mass, sphereShape, physicsMaterial); controls_sphereShape = sphereShape; controls_sphereBody = sphereBody; sphereBody.position.set(0, 5, 0); sphereBody.linearDamping = 0.05; world.add(sphereBody); // // Create a plane var groundShape = new CANNON.Plane(); var groundBody = new CANNON.RigidBody(0, groundShape, physicsMaterial); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.add(groundBody); } #endregion #region init var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 0.1, 1000); var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 0, 500); var ambient = new THREE.AmbientLight(0x111111); scene.add(ambient); var light = new THREE.SpotLight(0xffffff, 1.0); light.position.set(10, 30, 20); light.target.position.set(0, 0, 0); // if(true){ light.castShadow = true; light.shadowCameraNear = 20; light.shadowCameraFar = 50;//camera.far; light.shadowCameraFov = 40; light.shadowMapBias = 0.1; light.shadowMapDarkness = 0.7; light.shadowMapWidth = 2 * 512; light.shadowMapHeight = 2 * 512; // //light.shadowCameraVisible = true; // } scene.add(light); var controls = new PointerLockControls(camera, controls_sphereBody); scene.add(controls.getObject()); // // floor var geometry = new THREE.PlaneGeometry(300, 300, 50, 50); geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); var material = new THREE.MeshLambertMaterial(new { color = 0xdddddd }); //Native.Window. // THREE.Design.THREE.ColorUtils.adjustHSV(material.color, 0, 0, 0.9); // Replaced ColorUtils.adjustHSV() with Color's .offsetHSL(). //new IFunction("material", "THREE.ColorUtils.offsetHSL( material.color, 0, 0, 0.9 );").apply(null, material); // var mesh = new THREE.Mesh(geometry, material) { castShadow = true, receiveShadow = true }; scene.add(mesh); var renderer = new THREE.WebGLRenderer(new object()); renderer.shadowMapEnabled = true; renderer.shadowMapSoft = true; //renderer.setSize(Native.Window.Width, Native.Window.Height); //renderer.setClearColor(scene.fog.color, 1); renderer.domElement.style.backgroundColor = JSColor.Black; renderer.domElement.AttachToDocument(); #region onresize Action AtResize = delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion var r = new Random(); Func<f> Math_random = () => r.NextFloat(); #region Add boxes { // for (var i = 0; i < 32; i++) { var boxsize = Math_random() * 0.5; var halfExtents = new CANNON.Vec3(boxsize, boxsize, boxsize); var boxShape = new CANNON.Box(halfExtents); var boxGeometry = new THREE.CubeGeometry(halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2); var x = (Math_random() - 0.5) * 20; var y = 1 + (Math_random() - 0.5) * 1; var z = (Math_random() - 0.5) * 20; var boxBody = new CANNON.RigidBody(5, boxShape); var boxMesh = new THREE.Mesh(boxGeometry, material); world.add(boxBody); scene.add(boxMesh); boxBody.position.set(x, y, z); boxMesh.position.set(x, y, z); boxMesh.castShadow = true; boxMesh.receiveShadow = true; //boxMesh.useQuaternion = true; boxes.Add(boxBody); boxMeshes.Add(boxMesh); } } #endregion #region Add linked boxes { // var size = 0.5; var he = new CANNON.Vec3(size, size, size * 0.1); var boxShape = new CANNON.Box(he); var mass = 0.0; var space = 0.1 * size; var N = 5; var last = default(CANNON.RigidBody); var boxGeometry = new THREE.CubeGeometry(he.x * 2, he.y * 2, he.z * 2); for (var i = 0; i < N; i++) { var boxbody = new CANNON.RigidBody(mass, boxShape); var boxMesh = new THREE.Mesh(boxGeometry, material); boxbody.position.set(5, (N - i) * (size * 2 + 2 * space) + size * 2 + space, 0); boxbody.linearDamping = 0.01; boxbody.angularDamping = 0.01; //boxMesh.useQuaternion = true; boxMesh.castShadow = true; boxMesh.receiveShadow = true; world.add(boxbody); scene.add(boxMesh); boxes.Add(boxbody); boxMeshes.Add(boxMesh); if (i != 0) { // Connect this body to the last one var c1 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(-size, size + space, 0), last, new CANNON.Vec3(-size, -size - space, 0)); var c2 = new CANNON.PointToPointConstraint(boxbody, new CANNON.Vec3(size, size + space, 0), last, new CANNON.Vec3(size, -size - space, 0)); world.addConstraint(c1); world.addConstraint(c2); } else { mass = 0.3; } last = boxbody; } } #endregion #endregion var dt = 1.0 / 60; controls.enabled = true; // vr and tilt shift? Native.window.onframe += delegate { if (controls.enabled) { // how big of a world can we hold? // async ? world.step(dt); // Update ball positions for (var i = 0; i < balls.Count; i++) { balls[i].position.copy(ballMeshes[i].position); balls[i].quaternion.copy(ballMeshes[i].quaternion); } // Update box positions for (var i = 0; i < boxes.Count; i++) { boxes[i].position.copy(boxMeshes[i].position); boxes[i].quaternion.copy(boxMeshes[i].quaternion); } } controls.update(Date_now() - time); renderer.render(scene, camera); time = Date_now(); }; #region havePointerLock renderer.domElement.onclick += delegate { renderer.domElement.requestPointerLock(); }; #endregion #region onmousedown renderer.domElement.onmousedown += e => { if (e.MouseButton == IEvent.MouseButtonEnum.Middle) { if (Native.document.pointerLockElement == Native.document.body) { // cant requestFullscreen while pointerLockElement Console.WriteLine("exitPointerLock"); Native.document.exitPointerLock(); Native.document.exitFullscreen(); return; } Console.WriteLine("requestFullscreen"); renderer.domElement.requestFullscreen(); renderer.domElement.requestPointerLock(); return; } var ballradius = 0.1 + Math_random() * 0.9; var ballShape = new CANNON.Sphere(ballradius); var ballGeometry = new THREE.SphereGeometry(ballShape.radius, 32, 32); var shootDirection = new THREE.Vector3(); var shootVelo = 15; var projector = new THREE.Projector(); Action<THREE.Vector3> getShootDir = (targetVec) => { var vector = targetVec; targetVec.set(0, 0, 1); projector.unprojectVector(vector, camera); var ray = new THREE.Ray( (THREE.Vector3)(object)controls_sphereBody.position, vector //.subSelf(controls_sphereBody.position) .normalize() ); targetVec.x = ray.direction.x; targetVec.y = ray.direction.y; targetVec.z = ray.direction.z; }; var x = controls_sphereBody.position.x; var y = controls_sphereBody.position.y; var z = controls_sphereBody.position.z; // could we attach physics via binding list? var ballBody = new CANNON.RigidBody(1, ballShape); var ballMesh = new THREE.Mesh(ballGeometry, material); world.add(ballBody); scene.add(ballMesh); ballMesh.castShadow = true; ballMesh.receiveShadow = true; balls.Add(ballBody); ballMeshes.Add(ballMesh); getShootDir(shootDirection); ballBody.velocity.set(shootDirection.x * shootVelo, shootDirection.y * shootVelo, shootDirection.z * shootVelo); // // Move the ball outside the player sphere x += shootDirection.x * (controls_sphereShape.radius + ballShape.radius); y += shootDirection.y * (controls_sphereShape.radius + ballShape.radius); z += shootDirection.z * (controls_sphereShape.radius + ballShape.radius); ballBody.position.set(x, y, z); ballMesh.position.set(x, y, z); //ballMesh.useQuaternion = true; }; #endregion //var ze = new ZeProperties(); //ze.Show(); //ze.Left = 0; //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); }
private THREE.Mesh MakeMesh(THREE.BoxGeometry geometry) { THREE.Material mat = null; mat = new THREE.MeshLambertMaterial(); mat.color = new THREE.Color(); mat.color.setHex( Math.Random() * 0xffffff); THREE.Mesh mesh = new THREE.Mesh(geometry, mat); mesh.position.x = Math.Random() * 1000 - 500; mesh.position.y = Math.Random() * 600 - 300; mesh.position.z = Math.Random() * 800 - 400; mesh.rotation.x = Math.Random() * 2 * Math.PI; mesh.rotation.y = Math.Random() * 2 * Math.PI; mesh.rotation.z = Math.Random() * 2 * Math.PI; mesh.scale.x = Math.Random() * 2 + 1; mesh.scale.y = Math.Random() * 2 + 1; mesh.scale.z = Math.Random() * 2 + 1; mesh.castShadow = true; mesh.receiveShadow = true; return mesh; }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150816/iss // http://youtu.be/Lo1IU8UAutE // 60hz 2160 4K! // The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre. // C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/" //1533 KB/s(3865902 bytes in 2.461s) //C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png" //1556 KB/s(2714294 bytes in 1.703s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0000.png" "/sdcard/oculus/360photos/tape360iss.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0230.png" "/sdcard/oculus/360photos/tape360iss0230.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "r:\vr\tape360iss\0415.png" "/sdcard/oculus/360photos/tape360iss0230x4086.png" // // "R:\vr\tape360iss\0230.png" // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809 // the eye nor the display will be able to do any stereo // until tech is near matrix capability. 2019? // cubemap can be used for all long range scenes // http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera // subst /D b: // subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360iss\x360iss\bin\Debug\staging\x360iss.Application\web // subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360iss\x360iss\bin\Debug\staging\x360iss.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360iss\x360iss\bin\Debug\staging\x360iss.Application\web // what if we want to do subst in another winstat or session? // ColladaLoader: Empty or non-existing file (assets/x360iss/S6Edge.dae) /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { //FormStyler.AtFormCreated = //s => //{ // s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget()); // var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget()); // s.Context.GetHTMLTarget().style.backgroundColor = "#efefef"; // //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41"; //}; #if AsWEBSERVER #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // if we run as a server. we can open up on android. //chrome.Notification.DefaultTitle = "Nexus7"; //chrome.Notification.DefaultIconUrl = new x128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text //, AtFormCreated: FormStyler.AtFormCreated //AtFormConstructor: // f => // { // //arg[0] is typeof System.Int32 // //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)] // // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs // f.BackColor = System.Drawing.Color.FromArgb(0xA26D41); // } ); return; } #endregion #else #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? //chrome.runtime.UpdateAvailable += delegate //{ // new chrome.Notification(title: "UpdateAvailable"); //}; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "x360iss"); // https://developer.chrome.com/apps/app_window#type-CreateWindowOptions var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: new { alwaysOnTop = true, visibleOnAllWorkspaces = true } ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion #endif // Earth params //var radius = 0.5; //var radius = 1024; //var radius = 2048; //var radius = 512; //var radius = 256; //var radius = 400; // can we have not fly beyond moon too much? //var radius = 500; var radius = 480; //var segments = 32; var segments = 128 * 2; //var rotation = 6; //const int size = 128; //const int size = 256; // 6 faces, 12KB //const int size = 512; // 6 faces, ? // WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. //const int size = 720; // 6 faces, ? //const int size = 1024; // 6 faces, ? //const int cubefacesize = 1024; // 6 faces, ? // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/x360iss/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg ) // crash //int cubefacesizeMAX = 2048 * 2; // 6 faces, ? int cubefacesizeMAX = 2048 * 2; // 6 faces, ? int cubefacesize = cubefacesizeMAX; // 6 faces, ? //int cubefacesize = 1024; // 6 faces, ? // "X:\vr\tape1\0000x2048.png" // for 60hz render we may want to use float camera percision, not available for ui. // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/" //if (Environment.ProcessorCount < 8) // //cubefacesize = 64; // 6 faces, ? //cubefacesize = 1024; // 6 faces, ? // can we keep fast fps yet highp? // can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm? //const int cubefacesize = 128; // 6 faces, ? //var cubecameraoffsetx = 256; var cubecameraoffsetx = 400; //var uizoom = 0.1; //var uizoom = cubefacesize / 128f; var uizoom = 128f / cubefacesize; var far = 0xffffff; Native.css.style.backgroundColor = "blue"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); (Native.body.style as dynamic).webkitUserSelect = "text"; new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument(); //new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument(); var sw = Stopwatch.StartNew(); var oo = new List<THREE.Object3D>(); var window = Native.window; // what about physics and that portal rendering? // if we are running as a chrome web server, we may also be opened as android ndk webview app //var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000); // once we update source // save the source // manually recompile //cameraPX.position.z = 400; //// the camera should be close enough for the object to float off the FOV of PX //cameraPX.position.z = 200; // scene // can we make the 3D object orbit around us ? // and // stream it to vr? var scene = new THREE.Scene(); // since our cube camera is somewhat a fixed thing // would it be easier to move mountains to come to us? // once we change code would chrome app be able to let VR know that a new view is available? var sceneg = new THREE.Group(); sceneg.AttachTo(scene); // fly up? //sceneg.translateZ(-1024); // rotate the world, as the skybox then matches what we have on filesystem scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); // yet for headtracking we shall rotate camera //sceneg.position.set(0, 0, -1024); //sceneg.position.set(0, -1024, 0); scene.add(new THREE.AmbientLight(0x333333)); //384,400 km var distanceKM = 384400f; var earthdiameterKM = 12742f; // 12,742 km var moondiameterKM = 3475f; var virtualDistance = radius / earthdiameterKM * distanceKM; // 2,159.2 miles (3,475 km). var light = new THREE.DirectionalLight(0xffffff, 1); // sun should be beyond moon //light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance); //light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); // where shall the light source be to see half planet? light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); scene.add(light); var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = -8, title = "lightX" }.AttachToDocument(); var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = -1, title = "lightY" }.AttachToDocument(); var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = -4, title = "lightZ" }.AttachToDocument(); new IHTMLHorizontalRule { }.AttachToDocument(); // whats WebGLRenderTargetCube do? // WebGLRenderer preserveDrawingBuffer var renderer0 = new THREE.WebGLRenderer( new { //antialias = true, //alpha = true, preserveDrawingBuffer = true } ); // https://github.com/mrdoob/three.js/issues/3836 // the construct. white bg //renderer0.setClearColor(0xfffff, 1); renderer0.setClearColor(0x0, 1); //renderer.setSize(window.Width, window.Height); renderer0.setSize(cubefacesize, cubefacesize); //renderer0.domElement.AttachToDocument(); //rendererPX.domElement.style.SetLocation(0, 0); //renderer0.domElement.style.SetLocation(4, 4); // top // http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene // need a place to show the cubemap face to GUI // how does the stereo OTOY do it? // https://www.opengl.org/wiki/Sampler_(GLSL) // http://www.richardssoftware.net/Home/Post/25 // [+X, –X, +Y, –Y, +Z, –Z] fa // move up //camera.position.set(-1200, 800, 1200); //var cameraoffset = new THREE.Vector3(0, 15, 0); // can we aniamte it? //var cameraoffset = new THREE.Vector3(0, 800, 1200); // can we have linear animation fromcenter of the map to the edge and back? // then do the flat earth sun orbit? var cameraoffset = new THREE.Vector3( // left? -512, // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1024, //1200 0 // can we hover top of the map? ); // original vieworigin //var cameraoffset = new THREE.Vector3(-1200, 800, 1200); var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 1800, valueAsNumber = 1800 / 2, title = "frameIDslider" }.AttachToDocument(); new IHTMLHorizontalRule { }.AttachToDocument(); var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "camerax" }.AttachToDocument(); // up. whats the most high a rocket can go 120km? new IHTMLHorizontalRule { }.AttachToDocument(); // how high is the bunker? var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 2048 * 4, valueAsNumber = 0, title = "cameray" }.AttachToDocument(); new IHTMLBreak { }.AttachToDocument(); var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument(); new IHTMLHorizontalRule { }.AttachToDocument(); var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); // for render server var fcamerax = 0.0; var fcameray = 0.0; var fcameraz = 0.0; //while (await camerax.async.onchange) //cameray.onchange += delegate //{ // if (cameray.valueAsNumber < cameray.max) // camerayHigh.valueAsNumber = camerayHigh.min; //}; camerayHigh.onmousedown += delegate { //if (camerayHigh.valueAsNumber > camerayHigh.min) cameray.valueAsNumber = cameray.max; }; Action applycameraoffset = delegate { // make sure UI and gpu sync up var cy = cameray; if (cameray.valueAsNumber < cameray.max) camerayHigh.valueAsNumber = camerayHigh.min; if (camerayHigh.valueAsNumber > camerayHigh.min) cameray.valueAsNumber = cameray.max; if (cameray.valueAsNumber == cameray.max) cy = camerayHigh; cameraoffset = new THREE.Vector3( // left? camerax + fcamerax, // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, cy + fcameray, //1200 cameraz + fcameraz // can we hover top of the map? ); }; #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraNY.position.copy(new THREE.Vector3(0, 0, 0)); cameraNY.lookAt(new THREE.Vector3(0, -1, 0)); cameraNY.position.add(cameraoffset); }; //cameraNY.lookAt(new THREE.Vector3(0, 1, 0)); var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2); canvasNY.canvas.title = "NY"; canvasNY.canvas.AttachToDocument(); canvasNY.canvas.style.transformOrigin = "0 0"; // roslyn! canvasNY.canvas.style.transform = $"scale({uizoom})"; var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraPY.position.copy(new THREE.Vector3(0, 0, 0)); cameraPY.lookAt(new THREE.Vector3(0, 1, 0)); cameraPY.position.add(cameraoffset); }; //cameraPY.lookAt(new THREE.Vector3(0, -1, 0)); var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0); canvasPY.canvas.title = "PY"; canvasPY.canvas.AttachToDocument(); canvasPY.canvas.style.transformOrigin = "0 0"; canvasPY.canvas.style.transform = $"scale({uizoom})"; #endregion // transpose xz? #region x var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraNX.position.copy(new THREE.Vector3(0, 0, 0)); cameraNX.lookAt(new THREE.Vector3(0, 0, 1)); cameraNX.position.add(cameraoffset); }; //cameraNX.lookAt(new THREE.Vector3(0, 0, -1)); //cameraNX.lookAt(new THREE.Vector3(-1, 0, 0)); //cameraNX.lookAt(new THREE.Vector3(1, 0, 0)); var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasNX.canvas.title = "NX"; canvasNX.canvas.AttachToDocument(); canvasNX.canvas.style.transformOrigin = "0 0"; canvasNX.canvas.style.transform = $"scale({uizoom})"; var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraPX.position.copy(new THREE.Vector3(0, 0, 0)); cameraPX.lookAt(new THREE.Vector3(0, 0, -1)); cameraPX.position.add(cameraoffset); }; //cameraPX.lookAt(new THREE.Vector3(0, 0, 1)); //cameraPX.lookAt(new THREE.Vector3(1, 0, 0)); //cameraPX.lookAt(new THREE.Vector3(-1, 0, 0)); var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasPX.canvas.title = "PX"; canvasPX.canvas.AttachToDocument(); canvasPX.canvas.style.transformOrigin = "0 0"; canvasPX.canvas.style.transform = $"scale({uizoom})"; #endregion #region z var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); //cameraNZ.lookAt(new THREE.Vector3(0, 0, -1)); applycameraoffset += delegate { cameraNZ.position.copy(new THREE.Vector3(0, 0, 0)); cameraNZ.lookAt(new THREE.Vector3(1, 0, 0)); cameraNZ.position.add(cameraoffset); }; //cameraNX.lookAt(new THREE.Vector3(-1, 0, 0)); //cameraNZ.lookAt(new THREE.Vector3(0, 0, 1)); var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasNZ.canvas.title = "NZ"; canvasNZ.canvas.AttachToDocument(); canvasNZ.canvas.style.transformOrigin = "0 0"; canvasNZ.canvas.style.transform = $"scale({uizoom})"; var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); //cameraPZ.lookAt(new THREE.Vector3(1, 0, 0)); applycameraoffset += delegate { cameraPZ.position.copy(new THREE.Vector3(0, 0, 0)); cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0)); cameraPZ.position.add(cameraoffset); }; //cameraPZ.lookAt(new THREE.Vector3(0, 0, 1)); //cameraPZ.lookAt(new THREE.Vector3(0, 0, -1)); var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasPZ.canvas.title = "PZ"; canvasPZ.canvas.AttachToDocument(); canvasPZ.canvas.style.transformOrigin = "0 0"; canvasPZ.canvas.style.transform = $"scale({uizoom})"; #endregion // c++ alias locals would be nice.. var canvas0 = (IHTMLCanvas)renderer0.domElement; var old = new { CursorX = 0, CursorY = 0 }; var st = new Stopwatch(); st.Start(); //canvas0.css.active.style.cursor = IStyle.CursorEnum.move; // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs // THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll // THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll // http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/ // https://www.youtube.com/watch?v=D-Wl9jAB45Q #region spherical var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true); var c = gl.canvas.AttachToDocument(); // 3840x2160 //c.style.SetSize(3840, 2160); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube c.width = 3840; c.height = 2160; //c.width = 3840 * 2; //c.height = 2160 * 2; //c.width = 3840; //c.height = 2160; // 1,777777777777778 // https://www.youtube.com/watch?v=fTfJwzRsE-w //c.width = 7580; //c.height = 3840; //1,973958333333333 //7580 // 3840 // wont work //c.width = 8192; //c.height = 4096; // this has the wrong aspect? //c.width = 6466; //c.height = 3232; new IHTMLPre { new { c.width, c.height } }.AttachToDocument(); //6466x3232 //var suizoom = 720f / c.height; //var suizoom = 360f / c.height; var suizoom = 480f / c.width; c.style.transformOrigin = "0 0"; c.style.transform = $"scale({suizoom})"; //c.style.backgroundColor = "yellow"; c.style.position = IStyle.PositionEnum.absolute; c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3); var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass( null, gl, precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); // how shall we upload our textures? // can we reference GLSL.samplerCube yet? //pass.mInputs[0] = new samplerCube { }; pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { }; pass.MakeHeader_Image(); var vs = new Shaders.ProgramFragmentShader(); pass.NewShader_Image(vs); #endregion //var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument(); var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().AttachToDocument(); //var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument(); //var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument(); // 270px //xor.style.height = ""; frame0.style.height = "270px"; frame0.style.width = "480px"; frame0.style.SetLocation( 8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3); #region fixup rotation //mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2); //mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2); // dont need the fixup. unless we want to animate the sky rotate? //mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); #endregion // hide the sky to see camera lines? // can we show this as HUD on VR in webview? //skybox.visible = false; //scene.add(skybox); //new IHTMLButton { } #region DirectoryEntry var dir = default(DirectoryEntry); new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); }; frame0.onclick += delegate { // http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf // A method of creating synthetic stereoscopic panoramic images that can be implemented //in most rendering packages has been presented. If single panoramic pairs can be created //then stereoscopic panoramic movies are equally possible giving rise to the prospect of //movies where the viewer can interact with, at least with regard to what they choose to look //at.These images can be projected so as to engage the two features of the human visual //system that assist is giving us a sense of immersion, the feeling of “being there”. That is, //imagery that contains parallax information as captured from two horizontally separated eye //positions (stereopsis)and imagery that fills our peripheral vision.The details that define //how the two panoramic images should be created in rendering packages are provided, in //particular, how to precisely configure the virtual cameras and control the distance to zero //parallax. // grab a frame if (dir == null) { // not exporting to file system? var f0 = new IHTMLImage { src = gl.canvas.toDataURL() }; //var f0 = (IHTMLImage)gl.canvas; //var f0 = (IHTMLImage)gl.canvas; //var base64 = gl.canvas.toDataURL(); //frame0.src = base64; frame0.src = f0.src; // 7MB! return; } // // --------------------------- //IrfanView //--------------------------- //Warning ! //The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension ! //Rename ? //--------------------------- //Yes No //--------------------------- // haha this will render the thumbnail. //dir.WriteAllBytes("0000.png", frame0); //dir.WriteAllBytes("0000.png", gl.canvas); var glsw = Stopwatch.StartNew(); dir.WriteAllBytes("0000.png", gl); new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument(); // {{ ElapsedMilliseconds = 1548 }} // 3.7MB // 3840x2160 }; #endregion var vsync = default(TaskCompletionSource<object>); #region render new IHTMLButton { "render 60hz 30sec" }.AttachToDocument().onclick += async e => { e.Element.disabled = true; var total = Stopwatch.StartNew(); var status = "rendering... " + new { dir }; new IHTMLPre { () => status }.AttachToDocument(); if (dir == null) { //dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); } total.Restart(); vsync = new TaskCompletionSource<object>(); await vsync.Task; status = "rendering... vsync"; //var frameid = 0; frameIDslider.valueAsNumber = -1; goto beforeframe; // parallax offset? await_nextframe: var filename = frameIDslider.valueAsNumber.ToString().PadLeft(4, '0') + ".png"; status = "rendering... " + new { filename }; vsync = new TaskCompletionSource<object>(); await vsync.Task; // frame0 has been rendered var swcapture = Stopwatch.StartNew(); status = "WriteAllBytes... " + new { filename }; //await Native.window.async.onframe; // https://code.google.com/p/chromium/issues/detail?id=404301 if (dir != null) await dir.WriteAllBytes(filename, gl); //await dir.WriteAllBytes(filename, gl.canvas); status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds }; status = "rdy " + new { filename, fcamerax }; //await Native.window.async.onframe; // design mode v render mode if (cubefacesize < cubefacesizeMAX) frameIDslider.valueAsNumber += 15; else frameIDslider.valueAsNumber++; beforeframe: // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); // fcamerax = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); // up fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); // cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f))); // up //fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcamerax += (1.0 / 60.0); //fcamerax += (1.0 / 60.0) * 120; // 60hz 30sec if (frameIDslider.valueAsNumber < 60 * 30) { // Blob GC? either this helms or the that we made a Blob static. await Task.Delay(11); goto await_nextframe; } total.Stop(); status = "all done " + new { frameid = frameIDslider.valueAsNumber, total.ElapsedMilliseconds }; vsync = default(TaskCompletionSource<object>); // http://stackoverflow.com/questions/22899333/delete-javascript-blobs e.Element.disabled = false; }; #endregion // "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj" #region moonsphere var moonsphere = new THREE.Mesh( new THREE.SphereGeometry(radius / earthdiameterKM * moondiameterKM, segments, segments), new THREE.MeshPhongMaterial( new { map = new THREE.Texture().With( async s => { //0:75ms event: _2_no_clouds_4k_low view-source:36543 //Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1 //Application Cache Progress event (2 of 2) 192.168.1.72/:1 //Application Cache Cached event 192.168.1.72/:1 //1:1018ms event: _2_no_clouds_4k_low done view-source:36543 //1:1019ms event: _2_no_clouds_4k view-source:36543 //event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995 //1:16445ms event: _2_no_clouds_4k done // ~ tilde to open css editor? //await 20000; //Console.WriteLine("event: _2_no_clouds_4k"); s.image = await new moon(); s.needsUpdate = true; //Console.WriteLine("event: _2_no_clouds_4k done"); } ), //bumpMap = THREE.ImageUtils.loadTexture( // new elev_bump_4k().src ////new elev_bump_4k_low().src //), //// applies onyl to shaders to create the shadow //bumpScale = 0.005, //specularMap = new THREE.Texture().With( // async s => // { // Console.WriteLine("event: water_4k"); // s.image = await new water_4k().async.oncomplete; // s.needsUpdate = true; // Console.WriteLine("event: water_4k done"); // } //), ////specular = new THREE.Color("grey") //specular = new THREE.Color(0xa0a0a0) }) ); #endregion //moonsphere.position.set(radius * 4, 0, 0); //moonsphere.position.set(0, 0, -radius * 4); scene.add(moonsphere); #region globesphere var globesphere = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial( new { map = new THREE.Texture().With( async s => { //0:75ms event: _2_no_clouds_4k_low view-source:36543 //Application Cache Progress event (1 of 2) http://192.168.1.72:22248/view-source 192.168.1.72/:1 //Application Cache Progress event (2 of 2) 192.168.1.72/:1 //Application Cache Cached event 192.168.1.72/:1 //1:1018ms event: _2_no_clouds_4k_low done view-source:36543 //1:1019ms event: _2_no_clouds_4k view-source:36543 //event.returnValue is deprecated. Please use the standard event.preventDefault() instead. view-source:2995 //1:16445ms event: _2_no_clouds_4k done // ~ tilde to open css editor? //await 20000; //Console.WriteLine("event: _2_no_clouds_4k"); s.image = await new _2_no_clouds_4k(); s.needsUpdate = true; //Console.WriteLine("event: _2_no_clouds_4k done"); } ), bumpMap = THREE.ImageUtils.loadTexture( new elev_bump_4k().src //new elev_bump_4k_low().src ), // applies onyl to shaders to create the shadow //bumpScale = 0.005, bumpScale = 0.05, specularMap = new THREE.Texture().With( async s => { Console.WriteLine("event: water_4k"); s.image = await new water_4k().async.oncomplete; s.needsUpdate = true; Console.WriteLine("event: water_4k done"); } ), //specular = new THREE.Color("grey") //specular = new THREE.Color(0xa0a0a0) //specular = new THREE.Color(0x4a4a4a) specular = new THREE.Color(0x2a2a2a) //specular = new THREE.Color(0x0a0a0a) }) ); #endregion // http://stackoverflow.com/questions/12447734/three-js-updateing-texture-on-plane //globesphere.rotation.y = rotation; scene.add(globesphere); #region clouds var clouds = new THREE.Mesh( new THREE.SphereGeometry( //radius + 0.003, radius + radius * 0.01, segments, segments), new THREE.MeshPhongMaterial( new { //map = THREE.ImageUtils.loadTexture( // //new fair_clouds_4k().src // new fair_clouds_4k_low().src // ), map = new THREE.Texture().With( async s => { Console.WriteLine("event: fair_clouds_4k"); s.image = await new fair_clouds_4k().async.oncomplete; s.needsUpdate = true; Console.WriteLine("event: fair_clouds_4k done"); } ), transparent = true }) ); //clouds.rotation.y = rotation; scene.add(clouds); #endregion //clouds.position.set(0, virtualDistance / -2, 0); //globesphere.position.set(0, virtualDistance / -2, 0); //moonsphere.position.set(0, virtualDistance / 2, 0); //clouds.position.set(virtualDistance / -2, 0, 0); //globesphere.position.set(virtualDistance / -2, 0, 0); //moonsphere.position.set(virtualDistance / 2, 0, 0); // want our iss on equator to see some fictional rotation they are talking about clouds.position.set(virtualDistance / 2, 0, 0); globesphere.position.set(virtualDistance / 2, 0, 0); //clouds.position.set(virtualDistance / 2, (int)(-radius * 1.06), 0); //globesphere.position.set(virtualDistance / 2, (int)(-radius * 1.06), 0); // moon dark side away from earth? //moonsphere.position.set(virtualDistance / -2, -radius, 0); // dont care, wont orbit to moon today.. moonsphere.position.set(virtualDistance / -2, radius / earthdiameterKM * moondiameterKM, 0); // asus will hang // https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a // can we get one frame into vr? // cube: mesh to cast shadows #region cube0 // 127m = 5 // 1274m = 48 var iss_virtualsize = 10; // var earthdiameterKM = 12742f; // 12,742 km // var radius = 480; // showing a 10% cube pn left_?? //var cubeGeometry = new THREE.CubeGeometry(48, 48, 48); var cubeGeometry = new THREE.CubeGeometry(iss_virtualsize, iss_virtualsize, iss_virtualsize); var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0xff0000 }); var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial); //cube.position.set(0, 50, 0); // cube0.scale.set(radius / earthdiameterKM * isssizeKM, radius / earthdiameterKM * isssizeKM, radius / earthdiameterKM * isssizeKM); cube0.position.set(iss_virtualsize / 2, 0, 0); // Note that the mesh is flagged to cast shadows //cube0.castShadow = true; //scene.add(cube0); // floor: mesh to receive shadows #endregion // chrome://gpu/ new DAEISS.__AssetsLibrary__.ColladaISS().Source.Task.ContinueWithResult( dae => { // middle? // The dimensions of the completed ISS research facility will be approximately 356 feet (109 meters) by 240 feet (73 meters) // dae.position.set(virtualDistance * 0.0, radius / earthdiameterKM * isssizeKM, 0); //// 90deg //dae.rotation.x = -Math.Cos(Math.PI); ////dae.scale.x = 30; ////dae.scale.y = 30; ////dae.scale.z = 30; //dae.position.set(iss_virtualsize, 0, 0); // since we are orbiting earth. why not put iss on one side and a jet on the other? // can we do a flyby on them? //dae.position.set(-iss_virtualsize, -40, 0); //dae.position.set(-iss_virtualsize, 10, 0); // to compare to cube0 //dae.position.set(-iss_virtualsize /2, 0, 0); // dae.position.set(-iss_virtualsize / 2, 0, 0); //var distanceKM = 384400f; //var earthdiameterKM = 12742f; // 12,742 km //var moondiameterKM = 3475f; //var virtualDistance = radius / earthdiameterKM * distanceKM; var issAltitudeKM = 416f; //var issAltitudeKM = 500f; Console.WriteLine(new { virtualDistance }); Console.WriteLine(new { radius }); var issZ = virtualDistance / 2 - (radius / earthdiameterKM * issAltitudeKM) - radius; //dae.position.set(0, 0, issZ); // camera is transposed dae.position.set(issZ, 0, 0); // center into iss? cameraz.valueAsNumber = (long)issZ; //globesphere.position.set(virtualDistance / 2, (int)(-radius * 1.06), 0); // jsc, do we have ILObserver available yet? // is it to scale yet? // scale should be close enough now dae.scale.set(0.002, 0.002, 0.002); //dae.scale.set(0.02, 0.02, 0.02); //dae.position.y = -80; scene.add(dae); //oo.Add(dae); // where will it show up? // f5 to see clr web server on red.. } ); // called by? applycameraoffset += delegate { // should rotate fake globe via frameid 0..1800 is 360deg is 2pi //frameIDslide // frameID 0 means 0deg // frameID 1800 means 360deg light.position.set( lightX, lightY, lightZ ); globesphere.rotation.y = frameIDslider.valueAsNumber * 2 * Math.PI / 1800.0; // clouds shall rotate twice the speed thanks clouds.rotation.y = frameIDslider.valueAsNumber * 4 * Math.PI / 1800.0; }; //globesphere.position.set(0, radius / earthdiameterKM * distanceKM, 0); //clouds.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); //globesphere.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); // X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs // X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs // hidden for alpha AppWindows //#if FBACKGROUND #region galaxy_starfield new THREE.Texture().With( async s => { var i = new HTML.Images.FromAssets.galaxy_starfield(); //var i = new HTML.Images.FromAssets.galaxy_starfield150FOV(); var bytes = await i.async.bytes; //for (int ii = 0; ii < bytes.Length; ii += 4) //{ // bytes[ii + 3] = (byte)(bytes[ii + 0]); // bytes[ii + 0] = 0xff; // bytes[ii + 1] = 0xff; // bytes[ii + 2] = 0xff; //} var cc = new CanvasRenderingContext2D(i.width, i.height); cc.bytes = bytes; s.image = cc; s.needsUpdate = true; var stars_material = new THREE.MeshBasicMaterial( new { //map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src), map = s, side = THREE.BackSide, transparent = true }); var stars = new THREE.Mesh( new THREE.SphereGeometry(far * 0.9, 64, 64), stars_material ); // http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity //(stars_material as dynamic).opacity = 0.5; scene.add(stars); } ); #endregion new Models.ColladaS6Edge().Source.Task.ContinueWithResult( dae => { //dae.position.y = -80; //dae.AttachTo(sceneg); //scene.add(dae); //oo.Add(dae); // view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html // https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html Native.window.onframe += e => { // let render man know.. if (vsync != null) if (vsync.Task.IsCompleted) return; //if (pause) return; //if (pause.@checked) // return; // can we float out of frame? // haha. a bit too flickery. //dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0; //dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0; //globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0; //clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0; //sphere.rotation.y += speed; //clouds.rotation.y += speed; // manual rebuild? // red compiler notifies laptop chrome of pending update // app reloads applycameraoffset(); renderer0.clear(); //rendererPY.clear(); //cameraPX.aspect = canvasPX.aspect; //cameraPX.updateProjectionMatrix(); // um what does this do? //cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0; // mousewheel allos the camera to move closer // once we see the frame in vr, can we udp sync vr tracking back to laptop? //this.targetPX.x += 1; //this.targetNX.x -= 1; //this.targetPY.y += 1; //this.targetNY.y -= 1; //this.targetPZ.z += 1; //this.targetNZ.z -= 1; // how does the 360 or shadertoy want our cubemaps? // and then rotate right? // how can we render cubemap? #region x // upside down? renderer0.render(scene, cameraPX); canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNX); canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region z renderer0.render(scene, cameraPZ); canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNZ); canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region y renderer0.render(scene, cameraPY); //canvasPY.save(); //canvasPY.translate(0, size); //canvasPY.rotate((float)(-Math.PI / 2)); canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); //canvasPY.restore(); renderer0.render(scene, cameraNY); //canvasNY.save(); //canvasNY.translate(size, 0); //canvasNY.rotate((float)(Math.PI / 2)); canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); //canvasNY.restore(); // ? #endregion //renderer0.render(scene, cameraPX); //rendererPY.render(scene, cameraPY); // at this point we should be able to render the sphere texture //public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070; //public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072; //public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074; //var cube0 = new IHTMLImage[] { // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz() //}; new[] { canvasPX, canvasNX, canvasPY, canvasNY, canvasPZ, canvasNZ }.WithEachIndex( (img, index) => { gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex); //gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true // https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0); //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas); } ); // could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360 pass.Paint_Image( 0, 0, 0, 0, 0 //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); //paintsw.Stop(); // what does it do? gl.flush(); // let render man know.. if (vsync != null) if (!vsync.Task.IsCompleted) vsync.SetResult(null); }; } ); Console.WriteLine("do you see it?"); }