// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://alteredqualia.com/three/examples/webgl_cars.html // http://alteredqualia.com/xg/examples/animation_physics_terrain.html // https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea // Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P // https://github.com/dotnet/roslyn/issues/98 //Icon image is missing. //At least one new-style screenshot or video is required. //Small tile image is missing. //Please select a Primary Category for your item. //Language is not selected. // 640x400 // 128x128 // 440x280 public Application(IApp page) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128 Console.WriteLine("enter WebGLHZBlendCharacter"); #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) { Console.WriteLine("invoke TheServerWithAppWindow.Invoke"); ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text); return; } #endregion { TexturesImages ref0; } // http://www.realitymeltdown.com/WebGL3/character-controller.html // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127 //Native.css Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; //Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46 // used by, for? var clock = new THREE.Clock(); //var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 }; var scene = new THREE.Scene(); var skyScene = new THREE.Scene(); scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; renderer.domElement.AttachToDocument(); // this will mess up // three.OrbitControls.js // onMouseMove //new IStyle(renderer.domElement) //{ // position = IStyle.PositionEnum.absolute, // left = "0px", // top = "0px", // right = "0px", // bottom = "0px", //}; //new { }.With( // async delegate // { // await Native.window.async.onresize; // // if the reload were fast, then we could actually do that:D // Native.document.location.reload(); // } //); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; //cube.position.x = -100; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); while (true) { await Native.window.async.onframe; cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; } } ); #endregion var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new 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); scene.add(blendMesh); var xtrue = true; // run blendMesh.setSpeed(1.0); blendMesh.showSkeleton(!xtrue); var radius = blendMesh.geometry.boundingSphere.radius; Native.document.title = new { radius }.ToString(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); camera.position.set(0.0, radius * 3, radius * 3.5); var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var controls = new THREE.OrbitControls(camera); //controls.noPan = true; //var loader = new THREE.JSONLoader(); //loader.load(new Models.ground().Content.src, // new Action<THREE.Geometry, THREE.Material[]>( // (xgeometry, materials) => // { // var ground = new THREE.Mesh(xgeometry, materials[0]); // ground.scale.set(20, 20, 20); // ground.receiveShadow = true; // ground.castShadow = true; // scene.add(ground); // } // ) // ); #region createSky var urls = new[] { new px().src, new nx().src, new py().src, new ny().src, new pz().src, new nz().src, }; var textureCube = THREE.ImageUtils.loadTextureCube(urls); dynamic shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; // We're inside the box, so make sure to render the backsides // It will typically be rendered first in the scene and without depth so anything else will be drawn in front var material = new THREE.ShaderMaterial(new { fragmentShader = shader.fragmentShader, vertexShader = shader.vertexShader, uniforms = shader.uniforms, depthWrite = false, side = THREE.BackSide }); // THREE.CubeGeometry has been renamed to THREE.BoxGeometry // The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values. var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material); //skyMesh.renderDepth = -10; skyScene.add(skyMesh); #endregion ////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height, //// new //// { //// minFilter = THREE.LinearFilter, //// magFilter = THREE.LinearFilter, //// format = THREE.RGBFormat, //// stencilBufer = false //// } ////); ////var composer = new THREE.EffectComposer(renderer, renderTarget); ////composer.addPass(new THREE.RenderPass(skyScene, skyCamera)); ////composer.addPass(new THREE.RenderPass(scene, camera)); ////#region vblur ////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader); ////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader); ////var bluriness = 6; ////// Show Details Severity Code Description Project File Line //////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183 ////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; ////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; ////(hblur.uniforms as dynamic).r.value = 0.5; ////(vblur.uniforms as dynamic).r.value = 0.5; ////vblur.renderToScreen = true; ////composer.addPass(hblur); ////composer.addPass(vblur); ////#endregion //composer.addPass(new THREE.RenderPass(scene, camera)); // #region onframe Native.window.onframe += delegate { var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); blendMesh.updateSkeletonHelper(); } controls.center.copy(blendMesh.position); controls.center.y += radius * 2.0; controls.update(); //var camOffset = camera.position.clone().sub(controls.center); //camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone(); //camera.position = controls.center.clone().add(camOffset); skyCamera.rotation.copy(camera.rotation); //composer.render(0.1); //renderer.clear(); renderer.render(skyScene, skyCamera); renderer.render(scene, camera); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); } ) ); }
void onDocumentMouseDown(Event arg) { if (!IsActive) { return; } MouseEvent e = arg.As <MouseEvent>(); e.PreventDefault(); THREE.Vector3 vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); THREE.Intersection[] intersects = raycaster.intersectObjects(allObjects); if (intersects.Length > 0) { THREE.Intersection interSec = intersects[0]; THREE.Mesh m = interSec.Object as THREE.Mesh; if (m != null) { controls.enabled = false; selected = m; intersects = raycaster.intersectObject(plane); offset.copy(interSec.point).sub(plane.position); Container.Style.Cursor = Cursor.Move; } } }
public override void Init() { mouse = new THREE.Vector2(); raycaster = new THREE.Raycaster(); offset = new THREE.Vector3(); allObjects = new THREE.Mesh[] { }; CreateCamera(); CreateScene(); CreateBoxes(); plane = new THREE.Mesh( new THREE.PlaneBufferGeometry(2000.0, 2000.0, 8.0, 8.0), new THREE.MeshBasicMaterial() { color = 0x000000, opacity = 0.25, transparent = true } ); plane.visible = false; scene.add(plane); CreateRenderer(); renderer.domElement.OnMouseMove = this.onDocumentMouseMove; renderer.domElement.OnMouseDown = this.onDocumentMouseDown; renderer.domElement.OnMouseUp = this.onDocumentMouseUp; CreateTrackball(); }
//public readonly ApplicationWebService service = new ApplicationWebService(); /// <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) { var goo = new THREE.Vector3(0, 0, 3); Native.window.alert( new { goo }.ToString() ); }
public BoxConstrain(THREE.Vector3 center, double w, double h, double d) { Center = center; Width = w; Height = h; Depth = d; MakeBox(); MakeMesh(); }
public BoxConstrain(THREE.Vector3 center, double w, double h, double d) { Center = center; Width=w; Height=h; Depth=d; MakeBox(); MakeMesh(); }
public virtual void satisify() { THREE.Vector3 diff = DivVector.sub(p2.position, p1.position); var currentLength = diff.length(); if (currentLength == 0) { return; // prevents division by 0 } setPosition(); }
public override THREE.Vector3 Constrain(THREE.Vector3 pos) { THREE.Vector3 diff = DivVector.sub(pos, Center).clone(); if (diff.length() < Radius) { double dist = Radius - diff.length(); diff.normalize().multiplyScalar(dist); return(diff); } return(null); }
public Particle(double m, THREE.Vector3 pos) { position = pos.clone(); previous = pos.clone(); original = pos.clone(); acc = new THREE.Vector3(0, 0, 0); mass = m; invMass = 1.0 / mass; }
public void MakeBox() { double x = Center.x - Width * 0.5; double y = Center.y - Height * 0.5; double z = Center.z - Depth * 0.5; THREE.Vector3 min = new THREE.Vector3(x, y, z); x = Center.x + Width * 0.5; y = Center.y + Height * 0.5; z = Center.z + Depth * 0.5; THREE.Vector3 max = new THREE.Vector3(x, y, z); box = new THREE.Box3(min, max); }
public override THREE.Vector3 Constrain(THREE.Vector3 pos) { if (box.containsPoint(pos)) { double minDist = double.MaxValue; double dist = 0; int dir = 0; for (int i = 0; i < 6; i++) { if (IsX(i)) { dist = Distance(pos.x, i); if (Math.Abs(dist) < Math.Abs(minDist) && dist < 0) { minDist = dist; dir = i; } } else if (IsY(i)) { dist = -Distance(pos.y, i); if (Math.Abs(dist) < Math.Abs(minDist) && dist < 0) { minDist = dist; dir = i; } } else if (IsZ(i)) { dist = Distance(pos.z, i); if (Math.Abs(dist) < Math.Abs(minDist) && dist < 0) { minDist = dist; dir = i; } } } THREE.Vector3 d = Dirs[dir].clone().multiplyScalar(minDist * 1.3); return(d); } return(null); }
public void ApplyConstrained(IEnumerable <Particle> particles) { if (!Apply) { return; } foreach (Particle particle in particles) { var pos = particle.position; THREE.Vector3 disp = Constrain(pos); if (disp != null) { particle.position.add(disp); } } }
private void setPosition() { THREE.Vector3 diff = p2.position.clone().sub(p1.position); THREE.Vector3 correctionHalf = null; var currentLength = diff.length(); double stiff = 0; if (currentLength == 0) { return; } double delta = currentLength - restLength; if (delta < 0) { return; } stiff = restLength / currentLength; var correction = diff.normalize().multiplyScalar(delta); double mid = p1.IsFixed || p2.IsFixed ? 1.0 : 0.5; correctionHalf = correction.multiplyScalar(mid); if (!p1.IsFixed) { p1.position.add(correctionHalf); } if (!p2.IsFixed) { p2.position.sub(correctionHalf); } }
public void CreateParticles() { Console.WriteLine("CreateParticles"); int u; int v; particles = new Particle[0]; // Create particles for (v = 0; v <= NrV; v++) { for (u = 0; u <= NrU; u++) { double up = u / (double)NrU; double vp = v / (double)NrV; THREE.Vector3 pos = ParamFunction(up, vp); double mass = ParticleConstants.MASS; particles.Push(new Particle(mass, pos)); } } }
public void integrate(double deltaT) { if (IsFixed) { ToOriginal(); return; } acc.multiplyScalar(ParticleConstants.DAMPING); THREE.Vector3 newPos = this.position.clone().sub(previous); newPos.add(acc.multiplyScalar(deltaT * deltaT)); newPos.add(position); previous = position.clone(); position = newPos; acc.set(0, 0, 0); }
public void addLocation(double lat, double lon, double radius, double heigth, THREE.Object3D parent, double segments) { var phi = (lat) * Math.PI / 180; var theta = (lon - 180) * Math.PI / 180; var x = -(radius + heigth) * Math.Cos(phi) * Math.Cos(theta); var y = (radius + heigth) * Math.Sin(phi); var z = (radius + heigth) * Math.Cos(phi) * Math.Sin(theta); var latLongOnSphere = new THREE.Vector3(x, y, z); var p = new THREE.Mesh( new THREE.SphereGeometry( 0.005, (int)segments, (int)segments), new THREE.MeshBasicMaterial( new { color = "red" }) ); p.position = latLongOnSphere; parent.add(p); }
public static THREE.Vector3 sub(THREE.Vector3 v1, THREE.Vector3 v2) { diff.subVectors(v1, v2); return(diff); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chromeequirectangularcameraexperiment // "x:\util\android-sdk-windows\platform-tools\adb.exe" install -r "r:\jsc.svn\examples\javascript\WebGL\WebGLVRHZTeaser\WebGLVRHZTeaser\bin\Debug\staging\WebGLVRHZTeaser.ApplicationWebService\staging.apk\staging\apk\bin\WebGLVRHZTeaser.Activities-release.apk" //I/Web Console(25108): 0ms NewInstanceConstructor restore fields.. at http://10.144.157.179:23222/view-source:50800 //I/Web Console(25108): THREE.WebGLRenderer at http://10.144.157.179:23222/view-source:90370 //E/Web Console(25108): Error creating WebGL context. at http://10.144.157.179:23222/view-source:90581 //E/Web Console(25108): Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null at http://10.144.157.179:23222/view-source:90585 /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { #if false #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { chrome.Notification.DefaultTitle = "HZ"; chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Preview().src; ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text); return; } #endregion #endif // https://code.google.com/p/chromium/issues/detail?id=483890 Native.document.body.style.margin = "0px"; Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.backgroundColor = "black"; Native.document.body.Clear(); // what dto do if webgl not supported? double SCREEN_WIDTH = Native.window.Width; double SCREEN_HEIGHT = Native.window.Height; #region scene var scene = new THREE.Scene(); var clock = new THREE.Clock(); var sceneRenderTarget = new THREE.Scene(); var cameraOrtho = new THREE.OrthographicCamera( (int)SCREEN_WIDTH / -2, (int)SCREEN_WIDTH / 2, (int)SCREEN_HEIGHT / 2, (int)SCREEN_HEIGHT / -2, -100000, 100000 ); cameraOrtho.position.z = 100; sceneRenderTarget.add(cameraOrtho); var camera = new THREE.PerspectiveCamera( //40, 20, //10, Native.window.aspect, 2, // how far out do we want to zoom? 200000 //9000 ); camera.position.set(-1200, 800, 1200); var target = new THREE.Vector3(0, 0, 0); scene.add(camera); //scene.add(new THREE.AmbientLight(0x212121)); //var spotLight = new THREE.SpotLight(0xffffff, 1.15); //spotLight.position.set(500, 2000, 0); //spotLight.castShadow = true; //scene.add(spotLight); //var pointLight = new THREE.PointLight(0xff4400, 1.5); //pointLight.position.set(0, 0, 0); //scene.add(pointLight); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0x101030)); #endregion #region light //var light = new THREE.DirectionalLight(0xffffff, 1.0); var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); //var lightOffset = new THREE.Vector3(0, 1000, 2500.0); var lightOffset = new THREE.Vector3( 2000, 700, // lower makes longer shadows 700.0 ); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.1; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; scene.add(light); #endregion var renderer = new THREE.WebGLRenderer( new { // http://stackoverflow.com/questions/20495302/transparent-background-with-three-js alpha = true, preserveDrawingBuffer = true, antialias = true } ); renderer.setSize(1920, 1080); //renderer.setSize(2560, 1440); renderer.domElement.AttachToDocument(); renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; var renderTarget = new THREE.WebGLRenderTarget( Native.window.Width, Native.window.Height, new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBAFormat, stencilBufer = false } ); //var composer = new THREE.EffectComposer(renderer, renderTarget); //var renderModel = new THREE.RenderPass(scene, camera); //composer.addPass(renderModel); //#region vblur //var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader); //var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader); ////var bluriness = 6.0; //var bluriness = 4.0; //// Show Details Severity Code Description Project File Line ////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183 //(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; //(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; //(hblur.uniforms as dynamic).r.value = 0.5; //(vblur.uniforms as dynamic).r.value = 0.5; ////vblur.renderToScreen = true; //composer.addPass(hblur); //composer.addPass(vblur); //#endregion // Uncaught TypeError: renderer.setSize is not a function // Uncaught TypeError: renderer.getClearColor is not a function var effect = new THREE.OculusRiftEffect( renderer, // how to get the vblur into oculus effect? //renderModel, //composer, //renderTarget, new { worldScale = 100, //HMD } ); effect.setSize(1920, 1080); //effect.setSize(2560, 1440); #region WebGLRah66Comanche // why isnt it being found? // "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj" new global::WebGLRah66Comanche.Comanche( ).Source.Task.ContinueWithResult( dae => { //dae.position.y = -40; //dae.position.z = 280; scene.add(dae); //oo.Add(dae); // wont do it //dae.castShadow = true; dae.children[0].children[0].children.WithEach(x => x.castShadow = true); // the rotors? dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); dae.scale.set(0.5, 0.5, 0.5); dae.position.x = -900; dae.position.z = +900; // raise it up dae.position.y = 400; //var sw = Stopwatch.StartNew(); //Native.window.onframe += delegate //{ // //dae.children[0].children[0].children.Last().al // //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; // //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; // dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01; //}; } ); #endregion #region tree // X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading }); var tloader = new THREE.JSONLoader(); // http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic // https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx //System.Runtime.CompilerServices.DynamicAttribute tloader.load( new WebGLGodRay.Models.tree().Content.src, new Action<THREE.Geometry>( xgeometry => { var treeMesh = new THREE.Mesh(xgeometry, materialScene); treeMesh.position.set(0, -150, -150); treeMesh.position.x = -900; treeMesh.position.z = -900; treeMesh.position.y = 25; var tsc = 400; treeMesh.scale.set(tsc, tsc, tsc); treeMesh.matrixAutoUpdate = false; treeMesh.updateMatrix(); treeMesh.AttachTo(scene); } ) ); #endregion #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. // could we get some film grain? var planeGeometry = new THREE.CubeGeometry(512, 512, 1); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(10, 10, 10); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); var sw = Stopwatch.StartNew(); for (var i = 3; i < 9; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 7 * 200 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 100; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); if (i % 2 == 0) { #if FWebGLHZBlendCharacter #region SpeedBlendCharacter var _i = i; { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new WebGLHZBlendCharacter.Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 100; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); //blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. //blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); #endregion #endif } } #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; //cube.position.x = -100; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw2 = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); // offset is wrong //while (true) //{ // await Native.window.async.onframe; // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds; //} } ); #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; // jsc shat about out of band code patching? cube.position.z = 600; cube.position.x = -900; //cube.position.y = -400; //cube.position.x = -100; //cube.position.y = -400; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw2 = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); // offset is wrong //while (true) //{ // await Native.window.async.onframe; // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds; //} } ); #endregion #region HZBunker new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); cube.castShadow = true; //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = -1000; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = 0; scene.add(cube); } ); #endregion var lon0 = -45.0; var lon1 = 0.0; var lon = new sum( () => lon0, () => lon1 ); var lat0 = 0.0; var lat1 = 0.0; // or could we do it with byref or pointers? var lat = new sum( () => lat0, () => lat1 ); var phi = 0.0; var theta = 0.0; //var controls = new THREE.OrbitControls(camera); var camera_rotation_z = 0.0; Native.window.onframe += delegate { ////var delta = clock.getDelta(); //controls.update(); var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); } //camera.position = controls.center.clone(); //if (Native.document.pointerLockElement == Native.document.body) // lon += 0.00; //else // lon += 0.01; //var lat2 = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); //Native.document.title = new { lon0 }.ToString(); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = camera.position.x + (500 * Math.Sin(phi) * Math.Cos(theta)); target.y = camera.position.y + (500 * Math.Cos(phi)); target.z = camera.position.z + (500 * Math.Sin(phi) * Math.Sin(theta)); //controls.update(); //camera.position = controls.center.clone(); // camera beta tilt? camera.lookAt(target); camera.rotation.z += camera_rotation_z; //composer.render(0.1); //renderer.render(scene, camera); effect.render(scene, camera); }; new { }.With( async delegate { retry: //var s = (double)Native.window.Width / 1920.0; //var s = (double)Native.window.Height / Native.screen.height; //var s = (double)Native.window.Height / 1440; var s = (double)Native.window.Height / 1080; Native.document.body.style.transform = "scale(" + s + ")"; Native.document.body.style.transformOrigin = "0% 0%"; await Native.window.async.onresize; goto retry; } ); // gamma -0 .. -90 var compassHeadingOffset = 0.0; var compassHeadingInitialized = 0; #region compassHeading // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs Native.window.ondeviceorientation += dataValues => { // Convert degrees to radians var alphaRad = dataValues.alpha * (Math.PI / 180); var betaRad = dataValues.beta * (Math.PI / 180); var gammaRad = dataValues.gamma * (Math.PI / 180); // Calculate equation components var cA = Math.Cos(alphaRad); var sA = Math.Sin(alphaRad); var cB = Math.Cos(betaRad); var sB = Math.Sin(betaRad); var cG = Math.Cos(gammaRad); var sG = Math.Sin(gammaRad); // Calculate A, B, C rotation components var rA = -cA * sG - sA * sB * cG; var rB = -sA * sG + cA * sB * cG; var rC = -cB * cG; // Calculate compass heading var compassHeading = Math.Atan(rA / rB); // Convert from half unit circle to whole unit circle if (rB < 0) { compassHeading += Math.PI; } else if (rA < 0) { compassHeading += 2 * Math.PI; } /* Alternative calculation (replacing lines 99-107 above): var compassHeading = Math.atan2(rA, rB); if(rA < 0) { compassHeading += 2 * Math.PI; } */ // Convert radians to degrees compassHeading *= 180 / Math.PI; // Compass heading can only be derived if returned values are 'absolute' // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs //Native.document.body.innerText = new { compassHeading }.ToString(); if (compassHeadingInitialized > 0) { lon1 = compassHeading - compassHeadingOffset; } else { compassHeadingOffset = compassHeading; compassHeadingInitialized++; } }; #endregion #region gamma Native.window.ondeviceorientation += //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString(); //e => lon = e.gamma; e => { lat1 = e.gamma; // after servicing a running instance would be nice // either by patching or just re running the whole iteration in the backgrou camera_rotation_z = e.beta * 0.02; }; #endregion #region camera rotation var old = new { clientX = 0, clientY = 0 }; Native.document.body.ontouchstart += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; old = n; }; Native.document.body.ontouchmove += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; e.preventDefault(); lon0 += (n.clientX - old.clientX) * 0.2; lat0 -= (n.clientY - old.clientY) * 0.2; old = n; }; Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon0 += e.movementX * 0.1; lat0 -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { //drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); //drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion Native.body.onmousewheel += e => { camera_rotation_z += 0.1 * e.WheelDirection; ; }; }
public void SetValue(double v) { Value = v; gravity = new THREE.Vector3(0, -Value, 0); }
// Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P public Application(IApp page) { //{ var ref0 = typeof(dirt_tx); } { var ref0 = new dirt_tx { }; } //{ var ref0 = typeof(MarineCv2_color); } { var ref0 = new MarineCv2_color { }; } // http://www.realitymeltdown.com/WebGL3/character-controller.html // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127 //Native.css Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; //Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLSpeedBlendCharacter Application.cs 46 // used by, for? var clock = new THREE.Clock(); //var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 }; var scene = new THREE.Scene(); var skyScene = new THREE.Scene(); scene.fog = new THREE.Fog(0xB0CAE1, 1000, 20000); scene.add(new THREE.AmbientLight(0xaaaaaa)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; scene.add(light); #region renderer var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; renderer.domElement.AttachToDocument(); #endregion // this will mess up // three.OrbitControls.js // onMouseMove //new IStyle(renderer.domElement) //{ // position = IStyle.PositionEnum.absolute, // left = "0px", // top = "0px", // right = "0px", // bottom = "0px", //}; //new { }.With( // async delegate // { // await Native.window.async.onresize; // // if the reload were fast, then we could actually do that:D // Native.document.location.reload(); // } //); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. //var planeGeometry = new THREE.PlaneGeometry(1000, 1000); //var planeMaterial = new THREE.MeshLambertMaterial( // new // { // map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src), // color = 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; // parent.scale.set(100, 100, 100); // scene.add(parent); //} var random = new Random(); var meshArray = new List<THREE.Mesh>(); //var geometry = new THREE.CubeGeometry(1, 1, 1); var geometry = new THREE.BoxGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { var ii = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial( new { color = (Convert.ToInt32(0xffffff * random.NextDouble())) })); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new 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); scene.add(blendMesh); //var characterController = new THREE.CharacterController(blendMesh); // run blendMesh.setSpeed(1.0); var radius = blendMesh.geometry.boundingSphere.radius; Native.document.title = new { radius }.ToString(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); camera.position.set(0.0, radius * 3, radius * 3.5); var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var controls = new THREE.OrbitControls(camera); //controls.noPan = true; var loader = new THREE.JSONLoader(); loader.load(new Models.ground().Content.src, new Action<THREE.Geometry, THREE.Material[]>( (xgeometry, materials) => { // cannot see the ground? var ground = new THREE.Mesh(xgeometry, materials[0]); ground.scale.set(20, 20, 20); ground.receiveShadow = true; ground.castShadow = true; scene.add(ground); } ) ); #region createSky // gearvr has photos360 app var urls = new[] { new px().src, new nx().src, new py().src, new ny().src, new pz().src, new nz().src, }; var textureCube = THREE.ImageUtils.loadTextureCube(urls); dynamic shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; // We're inside the box, so make sure to render the backsides // It will typically be rendered first in the scene and without depth so anything else will be drawn in front var material = new THREE.ShaderMaterial(new { fragmentShader = shader.fragmentShader, vertexShader = shader.vertexShader, uniforms = shader.uniforms, depthWrite = false, side = THREE.BackSide }); // THREE.CubeGeometry has been renamed to THREE.BoxGeometry // The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values. //var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material); var skyMesh = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material); //skyMesh.renderDepth = -10; skyScene.add(skyMesh); #endregion #region onframe Native.window.onframe += delegate { var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); blendMesh.updateSkeletonHelper(); } controls.center.copy(blendMesh.position); controls.center.y += radius * 2.0; controls.update(); var camOffset = camera.position.clone().sub(controls.center); camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone().add(camOffset); skyCamera.rotation.copy(camera.rotation); renderer.clear(); renderer.render(skyScene, skyCamera); renderer.render(scene, camera); }; #endregion #region onresize new { }.With( async delegate { do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); } while (await Native.window.async.onresize); } ); #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/" // 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 a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web // ColladaLoader: Empty or non-existing file (assets/Chrome360HZ/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: "Chrome360HZ"); // 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 size = 1024; // 6 faces, ? //const int cubefacesize = 2048; // 6 faces, ? const int cubefacesize = 512; // 6 faces, ? var uizoom = 0.05; var far = 0xfffff; Native.css.style.backgroundColor = "blue"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument(); var sw = Stopwatch.StartNew(); var pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument(); pause.onchange += delegate { if (pause.@checked) sw.Stop(); else sw.Start(); }; var oo = new List<THREE.Object3D>(); #region scene 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(); var ambient = new THREE.AmbientLight(0x303030); 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; xlight.shadowCameraVisible = true; scene.add(light); #endregion // 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); //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); var cameraoffset = new THREE.Vector3(-1200, 800, 1200); #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); 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(8 + (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); 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(8 + (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); 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(8 + (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); 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(8 + (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)); 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(8 + (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)); 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(8 + (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.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); var mesh = new THREE.Mesh(new THREE.SphereGeometry(far / 2, 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 ) })); mesh.scale.x = -1; #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); mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); #endregion scene.add(mesh); //new IHTMLButton { } 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 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! if (dir == null) 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", f0); // 3.7MB // 3840x2160 }; // "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.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); } ) ); #endregion #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. // could we get some film grain? var planeGeometry = new THREE.CubeGeometry(512, 512, 1); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(10, 10, 10); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); //var sw = Stopwatch.StartNew(); for (var i = 3; i < 9; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 7 * 200 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 100; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); if (i % 2 == 0) { #if FWebGLHZBlendCharacter #region SpeedBlendCharacter var _i = i; { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new WebGLHZBlendCharacter.Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 100; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); //blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. //blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); #endregion #endif } } #endregion #region HZCannon // "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(); scene.add(cube); //interactiveObjects.Add(cube); // offset is wrong //while (true) //{ // await Native.window.async.onframe; // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds; //} } ); #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; // jsc shat about out of band code patching? cube.position.z = 600; cube.position.x = -900; //cube.position.y = -400; //cube.position.x = -100; //cube.position.y = -400; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw2 = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); // offset is wrong //while (true) //{ // await Native.window.async.onframe; // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds; //} } ); #endregion #region HZBunker new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); cube.castShadow = true; //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = -1000; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = 0; scene.add(cube); } ); #endregion 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; 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 => { //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(sw.ElapsedMilliseconds * 0.0001) * 190.0; dae.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 90.0; // manual rebuild? // red compiler notifies laptop chrome of pending update // app reloads 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); } ); 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(); }; } ); #endregion 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) { // http://threejs.org/examples/#webgl_postprocessing_godrays // view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var sunPosition = new THREE.Vector3(0, 1000, -1000); var screenSpacePosition = new THREE.Vector3(); var mouseX = 0; var mouseY = 0; var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; //var postprocessing = { enabled : true }; var orbitRadius = 200; var bgColor = 0x000511; var sunColor = 0xffee00; // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000); camera.position.z = 200; var scene = new THREE.Scene(); // var materialDepth = new THREE.MeshDepthMaterial(new { }); #region tree // X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading }); var loader = new THREE.JSONLoader(); // http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic // https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx //System.Runtime.CompilerServices.DynamicAttribute loader.load( new Models.tree().Content.src, new Action<THREE.Geometry>( xgeometry => { var treeMesh = new THREE.Mesh(xgeometry, materialScene); treeMesh.position.set(0, -150, -150); var tsc = 400; treeMesh.scale.set(tsc, tsc, tsc); treeMesh.matrixAutoUpdate = false; treeMesh.updateMatrix(); treeMesh.AttachTo(scene); } ) ); #endregion // sphere var geo = new THREE.SphereGeometry(1, 20, 10); var sphereMesh = new THREE.Mesh(geo, materialScene); var sc = 20; sphereMesh.scale.set(sc, sc, sc); scene.add(sphereMesh); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setClearColor(bgColor); //renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.autoClear = false; renderer.sortObjects = false; var postprocessing_scene = new THREE.Scene(); var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000); postprocessing_camera.position.z = 100; postprocessing_scene.add(postprocessing_camera); var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat }; var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars); // Switching the depth formats to luminance from rgb doesn't seem to work. I didn't // investigate further for now. // pars.format = THREE.LuminanceFormat; // I would have this quarter size and use it as one of the ping-pong render // targets but the aliasing causes some temporal flickering var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars); // Aggressive downsize god-ray ping-pong render targets to minimize cost var w = Native.window.Width / 4; var h = Native.window.Height / 4; var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars); var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars); // god-ray shaders // X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl // these are special <script src="js/ShaderGodRays.js"></script> var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic; var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms); var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new { uniforms = postprocessing_godrayGenUniforms, vertexShader = godraysGenShader.vertexShader, fragmentShader = godraysGenShader.fragmentShader }); var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic; var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms); var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new { uniforms = postprocessing_godrayCombineUniforms, vertexShader = godraysCombineShader.vertexShader, fragmentShader = godraysCombineShader.fragmentShader }); var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic; var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms); var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new { uniforms = postprocessing_godraysFakeSunUniforms, vertexShader = godraysFakeSunShader.vertexShader, fragmentShader = godraysFakeSunShader.fragmentShader }); postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor); postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor); postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75; var postprocessing_quad = new THREE.Mesh( new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height), postprocessing_materialGodraysGenerate ); postprocessing_quad.position.z = -9900; postprocessing_scene.add(postprocessing_quad); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); //var planeMaterial = new THREE.MeshLambertMaterial( // new // { // //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src), // color = 0xA26D41 // //color = 0xff0000 // } //); //planeMaterial.map.repeat.x = 300; //planeMaterial.map.repeat.y = 300; //planeMaterial.map.wrapS = THREE.RepeatWrapping; //planeMaterial.map.wrapT = THREE.RepeatWrapping; var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.position.y = -.5f * 100; parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); //scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion #region Comanche new Comanche().Source.Task.ContinueWithResult( Comanche => { Comanche.position.y = 200; //dae.position.z = 280; Comanche.AttachTo(scene); //scene.add(dae); //oo.Add(Comanche); // wont do it //dae.castShadow = true; // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); //helper.update(); //// If you want a visible bounding box //scene.add(helper); Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // the rotors? Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); Comanche.scale.set(0.5, 0.5, 0.5); //helper.scale.set(0.5, 0.5, 0.5); var s2w = Stopwatch.StartNew(); Native.window.onframe += delegate { //dae.children[0].children[0].children.Last().al //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; //rotation.y = sw.ElapsedMilliseconds * 0.01; Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001; //dae.children[0].children[0].children.Last().app }; } ); #endregion var sw = Stopwatch.StartNew(); var controls = new THREE.OrbitControls(camera, renderer.domElement); // Show Details Severity Code Description Project File Line //Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238 Native.window.onframe += delegate { //var time = IDate.now() / 4000; var time = sw.ElapsedMilliseconds / 4000.0; sphereMesh.position.x = orbitRadius * Math.Cos(time); sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100; //controls.center.copy(blendMesh.position); //controls.center.y += radius * 2.0; controls.update(); //var camOffset = camera.position.clone().sub(controls.center); //camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone(); //camera.position.x += (mouseX - camera.position.x) * 0.036; //camera.position.y += (-(mouseY) - camera.position.y) * 0.036; //camera.lookAt(scene.position); // Find the screenspace position of the sun screenSpacePosition.copy(sunPosition).project(camera); screenSpacePosition.x = (screenSpacePosition.x + 1) / 2; screenSpacePosition.y = (screenSpacePosition.y + 1) / 2; // Give it to the god-ray and sun shaders postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x; postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y; postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x; postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y; // -- Draw sky and sun -- // Clear colors and depths, will clear to sky color renderer.clearTarget(postprocessing_rtTextureColors, true, true, false); // Sun render. Runs a shader that gives a brightness based on the screen // space distance to the sun. Not very efficient, so i make a scissor // rectangle around the suns position to avoid rendering surrounding pixels. var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected screenSpacePosition.x *= Native.window.Width; screenSpacePosition.y *= Native.window.Height; renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH); renderer.enableScissorTest(true); postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect; postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors); renderer.enableScissorTest(false); // -- Draw scene objects -- // Colors scene.overrideMaterial = null; renderer.render(scene, camera, postprocessing_rtTextureColors); // Depth scene.overrideMaterial = materialDepth; renderer.render(scene, camera, postprocessing_rtTextureDepth, true); // -- Render god-rays -- // Maximum length of god-rays (in texture space [0,1]X[0,1]) var filterLen = 1.0; // Samples taken by filter var TAPS_PER_PASS = 6.0; // Pass order could equivalently be 3,2,1 (instead of 1,2,3), which // would start with a small filter support and grow to large. however // the large-to-small order produces less objectionable aliasing artifacts that // appear as a glimmer along the length of the beams // pass 1 - render into first ping-pong target var pass = 1.0; var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass); postprocessing_godrayGenUniforms["fStepSize"].value = stepLen; postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth; postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2); // pass 2 - render into second ping-pong target pass = 2.0; stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass); postprocessing_godrayGenUniforms["fStepSize"].value = stepLen; postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1); // pass 3 - 1st RT pass = 3.0; stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass); postprocessing_godrayGenUniforms["fStepSize"].value = stepLen; postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2); // final pass - composite god-rays onto colors postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors; postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2; postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine; renderer.render(postprocessing_scene, postprocessing_camera); postprocessing_scene.overrideMaterial = null; }; new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; }
public void addForce(THREE.Vector3 force) { THREE.Vector3 a = force.clone(); a.multiplyScalar(invMass); acc.add(a); }
// 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); }
//--------------------------- //Asset Compiler //--------------------------- //The Asset Compiler has found a few issues while preparing the assets! //'.', hexadecimal value 0x00, is an invalid character.Line 1, position 1. //Please fix the issues and try again! //You may need to reconnect your external drive. //X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.csproj //--------------------------- //OK //--------------------------- public Application(IApp page) { // is there a chrome version? // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularPanorama\ChromeEquirectangularPanorama\Application.cs // http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html // http://stackoverflow.com/users/94411/zproxy // https://www.shadertoy.com/view/XsBSDR# // https://www.shadertoy.com/view/4dsGD2 // https://www.shadertoy.com/view/ldjGRw // https://www.youtube.com/watch?v=GnFGYN-npqM var window = Native.window; var fov = 70.0; var camera = new THREE.PerspectiveCamera(fov, window.aspect, 1, 1100); var target = new THREE.Vector3(0, 0, 0); //(camera as dynamic).target = target; var scene = new THREE.Scene(); var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), new THREE.MeshBasicMaterial(new { map = THREE.ImageUtils.loadTexture( new WebGLEquirectangularPanorama.HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src ) })); mesh.scale.x = -1; scene.add(mesh); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.Width, window.Height); renderer.domElement.AttachToDocument(); //renderer.domElement.style.position = IStyle.PositionEnum.absolute; renderer.domElement.style.SetLocation(0, 0); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; #region onresize Native.window.onresize += delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; #endregion Native.document.body.onmousewheel += e => { fov -= e.WheelDirection * 5.0; camera.projectionMatrix.makePerspective(fov, (double)window.Width / window.Height, 1, 1100); }; var lon = 90.0; var lat = 0.0; var phi = 0.0; var theta = 0.0; Native.window.onframe += delegate { if (Native.document.pointerLockElement == Native.document.body) lon += 0.00; else lon += 0.01; lat = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = 500 * Math.Sin(phi) * Math.Cos(theta); target.y = 500 * Math.Cos(phi); target.z = 500 * Math.Sin(phi) * Math.Sin(theta); camera.lookAt(target); renderer.render(scene, camera); }; // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html #region camera rotation Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { //drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); //drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://threejs.org/examples/#webgl_postprocessing_godrays // view-source:file:///X:/opensource/github/three.js/examples/webgl_postprocessing_godrays.html Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var sunPosition = new THREE.Vector3(0, 1000, -1000); var screenSpacePosition = new THREE.Vector3(); var mouseX = 0; var mouseY = 0; var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; //var postprocessing = { enabled : true }; var orbitRadius = 200; var bgColor = 0x000511; var sunColor = 0xffee00; // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000); camera.position.z = 200; var scene = new THREE.Scene(); // var materialDepth = new THREE.MeshDepthMaterial(new { }); #region tree // X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading }); var loader = new THREE.JSONLoader(); // http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic // https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx //System.Runtime.CompilerServices.DynamicAttribute loader.load( new Models.tree().Content.src, new Action <THREE.Geometry>( xgeometry => { var treeMesh = new THREE.Mesh(xgeometry, materialScene); treeMesh.position.set(0, -150, -150); var tsc = 400; treeMesh.scale.set(tsc, tsc, tsc); treeMesh.matrixAutoUpdate = false; treeMesh.updateMatrix(); treeMesh.AttachTo(scene); } ) ); #endregion // sphere var geo = new THREE.SphereGeometry(1, 20, 10); var sphereMesh = new THREE.Mesh(geo, materialScene); var sc = 20; sphereMesh.scale.set(sc, sc, sc); scene.add(sphereMesh); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setClearColor(bgColor); //renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.autoClear = false; renderer.sortObjects = false; var postprocessing_scene = new THREE.Scene(); var postprocessing_camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000); postprocessing_camera.position.z = 100; postprocessing_scene.add(postprocessing_camera); var pars = new { minFilter = THREE.LinearFilter, magFilter = THREE.LinearFilter, format = THREE.RGBFormat }; var postprocessing_rtTextureColors = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars); // Switching the depth formats to luminance from rgb doesn't seem to work. I didn't // investigate further for now. // pars.format = THREE.LuminanceFormat; // I would have this quarter size and use it as one of the ping-pong render // targets but the aliasing causes some temporal flickering var postprocessing_rtTextureDepth = new THREE.WebGLRenderTarget(Native.window.Width, Native.window.Height, pars); // Aggressive downsize god-ray ping-pong render targets to minimize cost var w = Native.window.Width / 4; var h = Native.window.Height / 4; var postprocessing_rtTextureGodRays1 = new THREE.WebGLRenderTarget(w, h, pars); var postprocessing_rtTextureGodRays2 = new THREE.WebGLRenderTarget(w, h, pars); // god-ray shaders // X:\jsc.svn\market\synergy\THREE\THREE\opensource\gihtub\three.js\build\THREE.ShaderGodRays.idl // these are special <script src="js/ShaderGodRays.js"></script> var godraysGenShader = THREE.ShaderGodRays["godrays_generate"] as dynamic; var postprocessing_godrayGenUniforms = THREE.UniformsUtils.clone(godraysGenShader.uniforms); var postprocessing_materialGodraysGenerate = new THREE.ShaderMaterial(new { uniforms = postprocessing_godrayGenUniforms, vertexShader = godraysGenShader.vertexShader, fragmentShader = godraysGenShader.fragmentShader }); var godraysCombineShader = THREE.ShaderGodRays["godrays_combine"] as dynamic; var postprocessing_godrayCombineUniforms = THREE.UniformsUtils.clone(godraysCombineShader.uniforms); var postprocessing_materialGodraysCombine = new THREE.ShaderMaterial(new { uniforms = postprocessing_godrayCombineUniforms, vertexShader = godraysCombineShader.vertexShader, fragmentShader = godraysCombineShader.fragmentShader }); var godraysFakeSunShader = THREE.ShaderGodRays["godrays_fake_sun"] as dynamic; var postprocessing_godraysFakeSunUniforms = THREE.UniformsUtils.clone(godraysFakeSunShader.uniforms); var postprocessing_materialGodraysFakeSun = new THREE.ShaderMaterial(new { uniforms = postprocessing_godraysFakeSunUniforms, vertexShader = godraysFakeSunShader.vertexShader, fragmentShader = godraysFakeSunShader.fragmentShader }); postprocessing_godraysFakeSunUniforms.bgColor.value.setHex(bgColor); postprocessing_godraysFakeSunUniforms.sunColor.value.setHex(sunColor); postprocessing_godrayCombineUniforms.fGodRayIntensity.value = 0.75; var postprocessing_quad = new THREE.Mesh( new THREE.PlaneBufferGeometry(Native.window.Width, Native.window.Height), postprocessing_materialGodraysGenerate ); postprocessing_quad.position.z = -9900; postprocessing_scene.add(postprocessing_quad); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); //var planeMaterial = new THREE.MeshLambertMaterial( // new // { // //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src), // color = 0xA26D41 // //color = 0xff0000 // } //); //planeMaterial.map.repeat.x = 300; //planeMaterial.map.repeat.y = 300; //planeMaterial.map.wrapS = THREE.RepeatWrapping; //planeMaterial.map.wrapT = THREE.RepeatWrapping; var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.position.y = -.5f * 100; parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); //scene.add(parent); } var random = new Random(); var meshArray = new List <THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion #region Comanche new Comanche().Source.Task.ContinueWithResult( Comanche => { Comanche.position.y = 200; //dae.position.z = 280; Comanche.AttachTo(scene); //scene.add(dae); //oo.Add(Comanche); // wont do it //dae.castShadow = true; // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); //helper.update(); //// If you want a visible bounding box //scene.add(helper); Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // the rotors? Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); Comanche.scale.set(0.5, 0.5, 0.5); //helper.scale.set(0.5, 0.5, 0.5); var s2w = Stopwatch.StartNew(); Native.window.onframe += delegate { //dae.children[0].children[0].children.Last().al //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; //rotation.y = sw.ElapsedMilliseconds * 0.01; Comanche.children[0].children[0].children.Last().rotation.y = s2w.ElapsedMilliseconds * 0.001; //dae.children[0].children[0].children.Last().app }; } ); #endregion var sw = Stopwatch.StartNew(); var controls = new THREE.OrbitControls(camera, renderer.domElement); // Show Details Severity Code Description Project File Line //Error CS0229 Ambiguity between 'THREE.Math' and 'Math' WebGLGodRay Application.cs 238 Native.window.onframe += delegate { //var time = IDate.now() / 4000; var time = sw.ElapsedMilliseconds / 4000.0; sphereMesh.position.x = orbitRadius * Math.Cos(time); sphereMesh.position.z = orbitRadius * Math.Sin(time) - 100; //controls.center.copy(blendMesh.position); //controls.center.y += radius * 2.0; controls.update(); //var camOffset = camera.position.clone().sub(controls.center); //camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone(); //camera.position.x += (mouseX - camera.position.x) * 0.036; //camera.position.y += (-(mouseY) - camera.position.y) * 0.036; //camera.lookAt(scene.position); // Find the screenspace position of the sun screenSpacePosition.copy(sunPosition).project(camera); screenSpacePosition.x = (screenSpacePosition.x + 1) / 2; screenSpacePosition.y = (screenSpacePosition.y + 1) / 2; // Give it to the god-ray and sun shaders postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x; postprocessing_godrayGenUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y; postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.x = screenSpacePosition.x; postprocessing_godraysFakeSunUniforms["vSunPositionScreenSpace"].value.y = screenSpacePosition.y; // -- Draw sky and sun -- // Clear colors and depths, will clear to sky color renderer.clearTarget(postprocessing_rtTextureColors, true, true, false); // Sun render. Runs a shader that gives a brightness based on the screen // space distance to the sun. Not very efficient, so i make a scissor // rectangle around the suns position to avoid rendering surrounding pixels. var sunsqH = 0.74 * Native.window.Height; // 0.74 depends on extent of sun from shader var sunsqW = 0.74 * Native.window.Height; // both depend on height because sun is aspect-corrected screenSpacePosition.x *= Native.window.Width; screenSpacePosition.y *= Native.window.Height; renderer.setScissor(screenSpacePosition.x - sunsqW / 2, screenSpacePosition.y - sunsqH / 2, sunsqW, sunsqH); renderer.enableScissorTest(true); postprocessing_godraysFakeSunUniforms["fAspect"].value = Native.window.aspect; postprocessing_scene.overrideMaterial = postprocessing_materialGodraysFakeSun; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureColors); renderer.enableScissorTest(false); // -- Draw scene objects -- // Colors scene.overrideMaterial = null; renderer.render(scene, camera, postprocessing_rtTextureColors); // Depth scene.overrideMaterial = materialDepth; renderer.render(scene, camera, postprocessing_rtTextureDepth, true); // -- Render god-rays -- // Maximum length of god-rays (in texture space [0,1]X[0,1]) var filterLen = 1.0; // Samples taken by filter var TAPS_PER_PASS = 6.0; // Pass order could equivalently be 3,2,1 (instead of 1,2,3), which // would start with a small filter support and grow to large. however // the large-to-small order produces less objectionable aliasing artifacts that // appear as a glimmer along the length of the beams // pass 1 - render into first ping-pong target var pass = 1.0; var stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass); postprocessing_godrayGenUniforms["fStepSize"].value = stepLen; postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureDepth; postprocessing_scene.overrideMaterial = postprocessing_materialGodraysGenerate; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2); // pass 2 - render into second ping-pong target pass = 2.0; stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass); postprocessing_godrayGenUniforms["fStepSize"].value = stepLen; postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays2; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays1); // pass 3 - 1st RT pass = 3.0; stepLen = filterLen * Math.Pow(TAPS_PER_PASS, -pass); postprocessing_godrayGenUniforms["fStepSize"].value = stepLen; postprocessing_godrayGenUniforms["tInput"].value = postprocessing_rtTextureGodRays1; renderer.render(postprocessing_scene, postprocessing_camera, postprocessing_rtTextureGodRays2); // final pass - composite god-rays onto colors postprocessing_godrayCombineUniforms["tColors"].value = postprocessing_rtTextureColors; postprocessing_godrayCombineUniforms["tGodRays"].value = postprocessing_rtTextureGodRays2; postprocessing_scene.overrideMaterial = postprocessing_materialGodraysCombine; renderer.render(postprocessing_scene, postprocessing_camera); postprocessing_scene.overrideMaterial = null; }; new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // haha this is rather messed up on android. // perhaps the css3d runs out of memory? //var frame0 = Task.Delay(100); //var frame1 = Task.Delay(200); var sw = Stopwatch.StartNew(); //var lon0 = 90.0; var lon0 = 0.0; var lon1 = 0.0; var lon = new sum( () => lon0, () => lon1 ); var lat0 = 0.0; var lat1 = 0.0; // or could we do it with byref or pointers? var lat = new sum( () => lat0, () => lat1 ); var phi = 0.0; var theta = 0.0; var camera_rotation_z = 0.0; var drag = false; new { }.With( async delegate { //var f12 = await new airplane().async.oncomplete; // S6 likes 1024 more... var f12 = await new airplane_1024().async.oncomplete; Action<int> draweye = async (int eyeid) => { // view-source:file:///X:/opensource/github/three.js/examples/css3d_panorama.html //var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000); // wearality lenses? //var camera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 1000); //var camera = new THREE.PerspectiveCamera(120, Native.window.aspect, 1, 1000); //var camera = new THREE.PerspectiveCamera(96, Native.window.aspect, 1, 1000); var camera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 1000); var scene = new THREE.Scene(); var renderer0 = new THREE.CSS3DRenderer(); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150621 // s6 webview wont know? //var f12_height = 1536; // or is s6 memory or size limited? var f12_height = f12.height; //var f12 = await new airplane_low().async.oncomplete; //var f12 = await new airplane_1024().async.oncomplete; //var f12 = await new airplane_729().async.oncomplete; // stop flickering damnet //var f12 = await new airplane_400().async.oncomplete; // ok we got this cool 12 frame stereo map. // what happens if we just pass it? // haha. we get all frames in one. //Func<int, var> f = i => #region f Func<int, IHTMLCanvas> f = i => { // we do have a skybox example somewhere... var f1 = new CanvasRenderingContext2D(w: f12_height, h: f12_height); // can we keep animating the stereo ? // if we return canvas it gets messed up. why? // looks to be a bug? //var stale = new IHTMLImage(); if (eyeid == 0) { // GearVR would have both eyes! // laptop has to flip between eyes to give similar effect? // if this were a chrome app. could gearvr request the frames into the photos360 app? f1.drawImage(f12, i * f12_height, 0, sw: f12_height, sh: f12_height, dx: 0, dy: 0, dw: f12_height, dh: f12_height); // whenever we call drawImage ? callsite event monitoring? // this seems to be slow //stale.src = f1.canvas.toDataURL(); // can we have a synchronized frame choreo? //await Task.Delay(1000 / 15); } else { //await frame0; // update! f1.drawImage(f12, (i + 6) * f12_height, 0, sw: f12_height, sh: f12_height, dx: 0, dy: 0, dw: f12_height, dh: f12_height); //stale.src = f1.canvas.toDataURL(); //await frame1; //await Task.Delay(1000 / 15); }; // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo return f1; }; #endregion //var f0 = new CanvasRenderingContext2D(w: f12.height, h: f12.height); //f0.drawImage(f12, 0, 0, sw: f12.height, sh: f12.height, // dx: 0, dy: 0, dw: f12.height, dh: f12.height); #region sides var sides = new Func<side>[] { () => new side { CSS3DObject_element= f(0), position= new THREE.Vector3( -512, 0, 0 ), rotation= new THREE.Vector3( 0, Math.PI / 2, 0 ) }, () => new side { //img= new humus_nx(), CSS3DObject_element = f(1), position= new THREE.Vector3( 512, 0, 0 ), rotation= new THREE.Vector3( 0, -Math.PI / 2, 0 ) }, () => new side{ CSS3DObject_element= f(2), //img= new humus_py(), position= new THREE.Vector3( 0, 512, 0 ), rotation= new THREE.Vector3( Math.PI / 2, 0, Math.PI ) }, () => new side{ //img= new humus_ny(), CSS3DObject_element= f(3), position= new THREE.Vector3( 0, -512, 0 ), rotation= new THREE.Vector3( - Math.PI / 2, 0, Math.PI ) }, () => new side{ CSS3DObject_element= f(4), //img= new humus_pz(), position= new THREE.Vector3( 0, 0, 512 ), rotation= new THREE.Vector3( 0, Math.PI, 0 ) }, () => new side{ CSS3DObject_element= f(5), //img= new humus_nz(), position= new THREE.Vector3( 0, 0, -512 ), rotation= new THREE.Vector3( 0, 0, 0 ) } }; #endregion for (var i = 0; i < sides.Length; i++) { if (i == 1) { var side = sides[i](); var element = side.CSS3DObject_element; element.style.SetSize(1026, 1026); //element.style.SetSize(256, 256); //element.width = 1026; // 2 pixels extra to close the gap. var xobject = new THREE.CSS3DObject(element); xobject.position.set(side.position.x, side.position.y, side.position.z); xobject.rotation.set(side.rotation.x, side.rotation.y, side.rotation.z); // and lets use max res? // since everything flicers, lets keep only front CSS thing scene.add(xobject); } } //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(0.34382355213165283, -0.024581052362918854, -0.938712477684021, 0, 0, -0.9996572732925415, 0.026176948100328445, 0, 0.9390342831611633, 0.00900025200098753, 0.34370577335357666, 0, 0, 0, 0, 0.9999999403953552) translate3d(489px, 332px, 0px);"> // <img src="assets/CSSStereoCubeMap/posx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -512, 0, 0, 1);"><img src="assets/CSSStereoCubeMap/negx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 512, 0, 0, 1);"><img src="assets/CSSStereoCubeMap/posy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 512, 0, 1);"><img src="assets/CSSStereoCubeMap/negy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, -512, 0, 1);"><img src="assets/CSSStereoCubeMap/posz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 512, 1);"><img src="assets/CSSStereoCubeMap/negz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(-0.4524347484111786, 0, 0.8917974829673767, 0, 0, -1, 0, 0, -0.8917974829673767, 0, -0.4524347484111786, 0, 0, 0, 0, 1) translate3d(489px, 332px, 0px);"> // <img width="1026" src="textures/cube/Bridge2/posx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 512, 1);"><img width="1026" src="textures/cube/Bridge2/negz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> renderer0.domElement.AttachToDocument(); #region onresize new { }.With( async delegate { do { //camera.aspect = Native.window.aspect; camera.aspect = Native.window.Width / 2.0 / Native.window.Height; camera.updateProjectionMatrix(); //renderer0.setSize(Native.window.Width / 2, Native.window.Height); renderer0.setSize(Native.window.Width / 2, Native.window.Height); //renderer0.domElement.style.SetLocation(Native.window.Width / 2 * eyeid, 0); renderer0.domElement.style.SetLocation(Native.window.Width / 2 * (1 - eyeid), 0); } while (await Native.window.async.onresize); }); #endregion var target = new THREE.Vector3(); Native.window.onframe += delegate { //if (Native.document.pointerLockElement == Native.document.body) // lon += 0.00; //else // lon += 0.01; //lat = Math.Max(-85, Math.Min(85, lat)); Native.document.title = new { lon, lat }.ToString(); //phi = THREE.Math.degToRad(90 - lat); //theta = THREE.Math.degToRad(lon); //target.x = Math.Sin(phi) * Math.Cos(theta); //target.y = Math.Cos(phi); //target.z = Math.Sin(phi) * Math.Sin(theta); //camera.lookAt(target); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = 500 * Math.Sin(phi) * Math.Cos(theta); target.y = 500 * Math.Cos(phi); target.z = 500 * Math.Sin(phi) * Math.Sin(theta); camera.lookAt(target); camera.rotation.z += camera_rotation_z; renderer0.render(scene, camera); }; }; draweye(1); draweye(0); var compassHeadingOffset = 0.0; var compassHeadingInitialized = 0; var compassHeadingInitializedsw = Stopwatch.StartNew(); #region compassHeading // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs Native.window.ondeviceorientation += dataValues => { // Convert degrees to radians var alphaRad = dataValues.alpha * (Math.PI / 180); var betaRad = dataValues.beta * (Math.PI / 180); var gammaRad = dataValues.gamma * (Math.PI / 180); // Calculate equation components var cA = Math.Cos(alphaRad); var sA = Math.Sin(alphaRad); var cB = Math.Cos(betaRad); var sB = Math.Sin(betaRad); var cG = Math.Cos(gammaRad); var sG = Math.Sin(gammaRad); // Calculate A, B, C rotation components var rA = -cA * sG - sA * sB * cG; var rB = -sA * sG + cA * sB * cG; var rC = -cB * cG; // Calculate compass heading var compassHeading = Math.Atan(rA / rB); // Convert from half unit circle to whole unit circle if (rB < 0) { compassHeading += Math.PI; } else if (rA < 0) { compassHeading += 2 * Math.PI; } /* Alternative calculation (replacing lines 99-107 above): var compassHeading = Math.atan2(rA, rB); if(rA < 0) { compassHeading += 2 * Math.PI; } */ // Convert radians to degrees compassHeading *= 180 / Math.PI; // Compass heading can only be derived if returned values are 'absolute' // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs //Native.document.body.innerText = new { compassHeading }.ToString(); //if (compassHeadingInitialized > 0) if (compassHeadingInitializedsw.ElapsedMilliseconds > 5000) { lon1 = compassHeading - compassHeadingOffset; } else { compassHeadingOffset = compassHeading; compassHeadingInitialized++; //compassHeadingInitialized. } }; #endregion #region gamma Native.window.ondeviceorientation += //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString(); //e => lon = e.gamma; e => { lat1 = e.gamma; // after servicing a running instance would be nice // either by patching or just re running the whole iteration in the backgrou //camera_rotation_z = e.beta * 0.02; camera_rotation_z = e.beta * -0.01; }; #endregion #region camera rotation var old = new { clientX = 0, clientY = 0 }; Native.document.body.ontouchstart += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; old = n; }; Native.document.body.ontouchmove += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; e.preventDefault(); lon0 += (n.clientX - old.clientX) * 0.2; lat0 -= (n.clientY - old.clientY) * 0.2; old = n; }; Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon0 += e.movementX * 0.1; lat0 -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { //drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); //drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; #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.style.overflow = IStyle.OverflowEnum.hidden; // https://3dwarehouse.sketchup.com/model.html?id=e78dca4863e8572d86ea4fa6bd93bc43 // https://3dwarehouse.sketchup.com/model.html?id=38d1045b8de1cf12b08e958a32ef3184 var oo = new List<THREE.Object3D>(); #region scene var window = Native.window; // scene var scene = new THREE.Scene(); //var ambient = new THREE.AmbientLight(0x101030); //// addTrace? //scene.add(ambient); // should jsc package c# source code along here for code lense like peeking? new THREE.AmbientLight(0x101030).AttachTo(scene); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); // why is idl showing 110? var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; light.AttachTo(scene); { var planeGeometry = new THREE.CubeGeometry(512, 512, 1); var plane = new THREE.Mesh( planeGeometry, material: new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.receiveShadow = true; var ZeFloor = new THREE.Object3D(); plane.AttachTo(ZeFloor); ZeFloor.rotation.x = -Math.PI / 2; ZeFloor.scale.set(10, 10, 10); ZeFloor.AttachTo(scene); } var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.Width, window.Height); renderer.domElement.AttachToDocument(); renderer.domElement.style.SetLocation(0, 0); renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; //var mouseX = 0; //var mouseY = 0; //var st = new Stopwatch(); //st.Start(); //Native.window.document.onmousemove += // e => // { // mouseX = e.CursorX - Native.window.Width / 2; // mouseY = e.CursorY - Native.window.Height / 2; // }; var camera = new THREE.PerspectiveCamera( //40, 20, //10, Native.window.aspect, 2, // how far out do we want to zoom? 200000 //9000 ); camera.position.set(-1200, 800, -3200); camera.AttachTo(scene); var controls = new THREE.OrbitControls(camera, renderer.domElement); Native.window.onframe += delegate { //oo.WithEach( // x => // x.rotation.y = (st.ElapsedMilliseconds + mouseX * 100) * 0.00001 //); //camera.position.x += (mouseX - camera.position.x) * .05; //camera.position.y += (-mouseY - camera.position.y) * .05; //camera.lookAt(scene.position); controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; Native.window.onresize += delegate { camera.aspect = window.aspect; camera.updateProjectionMatrix(); renderer.setSize(window.Width, window.Height); }; #endregion #region Comanche new Comanche().Source.Task.ContinueWithResult( Comanche => { Comanche.position.y = 200; //dae.position.z = 280; Comanche.AttachTo(scene); //scene.add(dae); oo.Add(Comanche); // wont do it //dae.castShadow = true; // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); //helper.update(); //// If you want a visible bounding box //scene.add(helper); Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // the rotors? Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); Comanche.scale.set(0.5, 0.5, 0.5); //helper.scale.set(0.5, 0.5, 0.5); var 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 ZeProperties //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; //#endregion //f.treeView1.Nodes.Add("controls : " + typeof(THREE.OrbitControls)).Tag = controls; }
/// <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) { // view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://threejs.org/examples/#webgl_materials_cubemap_dynamic // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs // http://threejs.org/examples/#webgl_postprocessing_dof // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html" { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var clock = new THREE.Clock(); var radius = 100; var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000); camera.position.z = 200; var skyScene = new THREE.Scene(); var scene = new THREE.Scene(); //scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.sortObjects = false; renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; //var material_depth = new THREE.MeshDepthMaterial(); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List <THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); var sw = Stopwatch.StartNew(); for (var i = 1; i < 5; 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 % 4 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 300; 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); var _i = i; 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) % 4 * 500 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 300; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); } #endregion // maskpass // THREE.EffectComposer relies on THREE.CopyShader var composer = new THREE.EffectComposer(renderer); var renderPass = new THREE.RenderPass(scene, camera); composer.addPass(renderPass); // THREE.BokehPass relies on THREE.BokehShader var bokehPass = new THREE.BokehPass(scene, camera, new { focus = 1.0, aperture = 0.025, maxblur = 1.0, width = Native.window.Width, height = Native.window.Height }); bokehPass.renderToScreen = true; composer.addPass(bokehPass); renderer.autoClear = false; var controls = new THREE.OrbitControls(camera); Native.document.onclick += delegate { // THREE.AnimationHandler.add() has been deprecated. // how to make it work with bokah? //THREE.AnimationHandler.update(1); }; #region onframe Native.window.onframe += delegate { controls.update(); var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); //THREE.AnimationHandler.update(stepSize); } camera.position = controls.center.clone(); skyCamera.rotation.copy(camera.rotation); composer.render(0.1); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); }
/// <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://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo // https://www.reddit.com/r/GearVR/comments/35g8w7/real_world_stereoscopic_360_panoramas/ // https://www.reddit.com/r/oculus/comments/35gcn2/real_world_stereoscopic_panoramas_with_gear_vr/ // http://stackoverflow.com/questions/9032050/canvas-mask-an-image-and-preserve-its-alpha-channel // https://3dwarehouse.sketchup.com/model.html?id=48bcce07b0baf689d9e6f00e848ea18 // https://www.youtube.com/watch?v=OurzBO1cDto Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); new IHTMLPre { "loading stereo... 2MB!" }.AttachToDocument(); // if this is a chrome app // would GearVR 360 app be able to request current stereo cubemap? // Uncaught TypeError: Cannot read property '0' of undefined var keys = new int[0xffff]; //c = a[0].keys[jAEABqtXvT6n4h6m6ZavdA(b)]; //d = c[0]; //c[0] = (((d + 1))); Native.document.body.onkeyup += e => { var z = keys[e.KeyCode]; if (z > 0) z++; else z = 1; // what does it do? keys[e.KeyCode] = z; // 4333ms {{ KeyCode = 83, S = 83, z = NaN }} Console.WriteLine(new { e.KeyCode, System.Windows.Forms.Keys.S, z }); }; // skybox cubemap var iii = new IHTMLImage[] { new px(), new nx(), new py(), new ny(), new pz(), new nz() }; //var f12 = await new airplane().async.oncomplete; //var f12 = new airplane(); Task.WhenAll(from x in iii select x.async.oncomplete).ContinueWithResult( ii => // how can we do an alpha clear on the jpg? //new airplane().async.oncomplete.ContinueWithResult( //new airplane_leftwindows().async.oncomplete.ContinueWithResult( new airplane_mask().async.oncomplete.ContinueWithResult( f12_mask => new airplane().async.oncomplete.ContinueWithResult( f12 => { //Func<int, string, IHTMLImage> xf = (i, globalCompositeOperation) => //{ // // we do have a skybox example somewhere... // var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height); // f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); // // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation // f1.globalCompositeOperation = globalCompositeOperation; // f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); // return f1; //}; //new[] { // "source-over", // "source-in", // "source-out", // "source-atop", // "destination-over", // "destination-in", // "destination-out", // "destination-atop", // "lighter", // "copy", // "xor", // "multiply", // "screen", // "overlay", // "darken", // "lighten", // "color-dodge", // "color-burn", // "hard-light", // "soft-light", // "difference", // "exclusion", // "hue", // "saturation", // "color", // "luminosity" //}.WithEach(globalCompositeOperation => // { // xf(4, globalCompositeOperation).AttachToDocument().title = globalCompositeOperation; // } //); Func<int, IHTMLImage> f = i => { // we do have a skybox example somewhere... var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height); f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation f1.globalCompositeOperation = "multiply"; f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); return f1; }; var skyScene0 = new THREE.Scene(); var skyScene1 = new THREE.Scene(); var skyScene2 = new THREE.Scene { }; #region createSky // gearvr has photos360 app //var textureCube = THREE.ImageUtils.loadTextureCube(urls); var vertexShader = @" varying vec3 vWorldPosition; " //+ THREE.ShaderChunk["logdepthbuf_pars_vertex"] + @" void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); " //+ THREE.ShaderChunk["logdepthbuf_vertex"] + @" } " ; // https://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/texturing.php var fragmentShader = @" uniform samplerCube tCube; uniform float tFlip; varying vec3 vWorldPosition; " //+ THREE.ShaderChunk["logdepthbuf_pars_fragment"] + @" void main() { vec4 c = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) ); " // : gl.getShaderInfoLog() ERROR: 0:52: 'assign' : cannot convert from 'const int' to 'highp float' //+ THREE.ShaderChunk["logdepthbuf_fragment"] + @" // _mask.png has the bits if (c.r == 0.0) if (c.g == 0.0) if (c.b == 0.0) discard; gl_FragColor = c; } " // vec4 textureCube(samplerCube s, vec3 coord [, float bias]) // ; var skyMeshmaterial0 = new THREE.ShaderMaterial(new { fragmentShader = fragmentShader, vertexShader = vertexShader, uniforms = new { tCube = new { type = "t", value = new THREE.CubeTexture(ii ) { flipY = false, // !! needsUpdate = true } }, tFlip = new { type = "f", value = -1 } }, depthWrite = false, side = THREE.BackSide }); var mesh0 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial0).AttachTo(skyScene0); // stereo vs mono skybox var skyMeshmaterial1 = new THREE.ShaderMaterial(new { fragmentShader = fragmentShader, vertexShader = vertexShader, uniforms = new { tCube = new { type = "t", value = new THREE.CubeTexture( f(0), f(1), f(2), f(3), f(4), f(5) ) { flipY = false, // !! needsUpdate = true } }, tFlip = new { type = "f", value = -1 } }, depthWrite = false, side = THREE.BackSide, }); var mesh1 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial1).AttachTo(skyScene1); var skyMeshmaterial2 = new THREE.ShaderMaterial(new { fragmentShader = fragmentShader, vertexShader = vertexShader, uniforms = new { tCube = new { type = "t", value = new THREE.CubeTexture( f(0 + 6), f(1 + 6), f(2 + 6), f(3 + 6), f(4 + 6), f(5 + 6) ) { flipY = false, // !! needsUpdate = true } }, tFlip = new { type = "f", value = -1 } }, depthWrite = false, side = THREE.BackSide }); var mesh2 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial2).AttachTo(skyScene2); #endregion Native.body.Clear(); var skyCamera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 20000); //var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); // not using css? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }) { autoClear = false, shadowMapEnabled = true, shadowMapType = THREE.PCFSoftShadowMap }; renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); #region onresize new { }.With( async delegate { do { skyCamera.aspect = Native.window.aspect; skyCamera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); } while (await Native.window.async.onresize); } ); #endregion Native.document.body.onmousewheel += e => { skyCamera.fov -= e.WheelDirection * 5.0; skyCamera.updateProjectionMatrix(); }; var target0 = new THREE.Vector3(); var lon = 90.0; var lat = 0.0; var phi = 0.0; var theta = 0.0; var drag = false; var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { var sinfps = 1 + (int)(((Math.Sin(sw.ElapsedMilliseconds * 0.0001) + 1.0) / 2.0) * 59); Native.document.title = "" + new { sinfps }; //var eye = (sw.ElapsedMilliseconds / (200)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 15)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 30)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 45)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 60)) % 2; var eye = (sw.ElapsedMilliseconds / (1000 / sinfps)) % 2; // if we are a multiprocess renderer, get the volatile eye id // doesnt work? //skyMesh0.visible = eye == 0; //mesh0.rotation = new THREE.Vector3(0, 0, sw.ElapsedMilliseconds); if (Native.document.pointerLockElement == Native.document.body) lon += 0.00; else { lon += 0.01; } lat = Math.Max(-85, Math.Min(85, lat)); // this is wrong, but gets the idea across. phi = THREE.Math.degToRad(90 - lat) + Math.Sin(sw.ElapsedMilliseconds * 0.001) * 0.1 - 0.3; theta = THREE.Math.degToRad(lon); target0.x = Math.Sin(phi) * Math.Cos(theta); target0.y = Math.Cos(phi); target0.z = Math.Sin(phi) * Math.Sin(theta); skyCamera.lookAt(target0); renderer.clear(); renderer.render(skyScene0, skyCamera); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target0.x = Math.Sin(phi) * Math.Cos(theta); target0.y = Math.Cos(phi); target0.z = Math.Sin(phi) * Math.Sin(theta); skyCamera.lookAt(target0); if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 0) { if (eye == 0) renderer.render(skyScene1, skyCamera); else renderer.render(skyScene2, skyCamera); } else if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 1) { renderer.render(skyScene1, skyCamera); } }; #region ontouchmove var touchX = 0; var touchY = 0; Native.document.body.ontouchstart += e => { e.preventDefault(); var touch = e.touches[0]; touchX = touch.screenX; touchY = touch.screenY; }; Native.document.body.ontouchmove += e => { e.preventDefault(); var touch = e.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; }; #endregion #region camera rotation Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion } ) ) ); }
/// <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://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo // https://www.reddit.com/r/GearVR/comments/35g8w7/real_world_stereoscopic_360_panoramas/ // https://www.reddit.com/r/oculus/comments/35gcn2/real_world_stereoscopic_panoramas_with_gear_vr/ // http://stackoverflow.com/questions/9032050/canvas-mask-an-image-and-preserve-its-alpha-channel // https://3dwarehouse.sketchup.com/model.html?id=48bcce07b0baf689d9e6f00e848ea18 // https://www.youtube.com/watch?v=OurzBO1cDto Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); new IHTMLPre { "loading stereo... 2MB!" }.AttachToDocument(); // if this is a chrome app // would GearVR 360 app be able to request current stereo cubemap? // Uncaught TypeError: Cannot read property '0' of undefined var keys = new int[0xffff]; //c = a[0].keys[jAEABqtXvT6n4h6m6ZavdA(b)]; //d = c[0]; //c[0] = (((d + 1))); Native.document.body.onkeyup += e => { var z = keys[e.KeyCode]; if (z > 0) { z++; } else { z = 1; } // what does it do? keys[e.KeyCode] = z; // 4333ms {{ KeyCode = 83, S = 83, z = NaN }} Console.WriteLine(new { e.KeyCode, System.Windows.Forms.Keys.S, z }); }; // skybox cubemap var iii = new IHTMLImage[] { new px(), new nx(), new py(), new ny(), new pz(), new nz() }; //var f12 = await new airplane().async.oncomplete; //var f12 = new airplane(); Task.WhenAll(from x in iii select x.async.oncomplete).ContinueWithResult( ii => // how can we do an alpha clear on the jpg? //new airplane().async.oncomplete.ContinueWithResult( //new airplane_leftwindows().async.oncomplete.ContinueWithResult( new airplane_mask().async.oncomplete.ContinueWithResult( f12_mask => new airplane().async.oncomplete.ContinueWithResult( f12 => { //Func<int, string, IHTMLImage> xf = (i, globalCompositeOperation) => //{ // // we do have a skybox example somewhere... // var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height); // f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); // // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation // f1.globalCompositeOperation = globalCompositeOperation; // f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); // return f1; //}; //new[] { // "source-over", // "source-in", // "source-out", // "source-atop", // "destination-over", // "destination-in", // "destination-out", // "destination-atop", // "lighter", // "copy", // "xor", // "multiply", // "screen", // "overlay", // "darken", // "lighten", // "color-dodge", // "color-burn", // "hard-light", // "soft-light", // "difference", // "exclusion", // "hue", // "saturation", // "color", // "luminosity" //}.WithEach(globalCompositeOperation => // { // xf(4, globalCompositeOperation).AttachToDocument().title = globalCompositeOperation; // } //); Func <int, IHTMLImage> f = i => { // we do have a skybox example somewhere... var f1 = new CanvasRenderingContext2D(w: f12.height, h: f12.height); f1.drawImage(f12, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation f1.globalCompositeOperation = "multiply"; f1.drawImage(f12_mask, i * f12.height, 0, sw: f12.height, sh: f12.height, dx: 0, dy: 0, dw: f12.height, dh: f12.height); return(f1); }; var skyScene0 = new THREE.Scene(); var skyScene1 = new THREE.Scene(); var skyScene2 = new THREE.Scene { }; #region createSky // gearvr has photos360 app //var textureCube = THREE.ImageUtils.loadTextureCube(urls); var vertexShader = @" varying vec3 vWorldPosition; " //+ THREE.ShaderChunk["logdepthbuf_pars_vertex"] + @" void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); " //+ THREE.ShaderChunk["logdepthbuf_vertex"] + @" } " ; // https://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/texturing.php var fragmentShader = @" uniform samplerCube tCube; uniform float tFlip; varying vec3 vWorldPosition; " //+ THREE.ShaderChunk["logdepthbuf_pars_fragment"] + @" void main() { vec4 c = textureCube( tCube, vec3( tFlip * vWorldPosition.x, vWorldPosition.yz ) ); " // : gl.getShaderInfoLog() ERROR: 0:52: 'assign' : cannot convert from 'const int' to 'highp float' //+ THREE.ShaderChunk["logdepthbuf_fragment"] + @" // _mask.png has the bits if (c.r == 0.0) if (c.g == 0.0) if (c.b == 0.0) discard; gl_FragColor = c; } " // vec4 textureCube(samplerCube s, vec3 coord [, float bias]) // ; var skyMeshmaterial0 = new THREE.ShaderMaterial(new { fragmentShader = fragmentShader, vertexShader = vertexShader, uniforms = new { tCube = new { type = "t", value = new THREE.CubeTexture(ii ) { flipY = false, // !! needsUpdate = true } }, tFlip = new { type = "f", value = -1 } }, depthWrite = false, side = THREE.BackSide }); var mesh0 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial0).AttachTo(skyScene0); // stereo vs mono skybox var skyMeshmaterial1 = new THREE.ShaderMaterial(new { fragmentShader = fragmentShader, vertexShader = vertexShader, uniforms = new { tCube = new { type = "t", value = new THREE.CubeTexture( f(0), f(1), f(2), f(3), f(4), f(5) ) { flipY = false, // !! needsUpdate = true } }, tFlip = new { type = "f", value = -1 } }, depthWrite = false, side = THREE.BackSide, }); var mesh1 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial1).AttachTo(skyScene1); var skyMeshmaterial2 = new THREE.ShaderMaterial(new { fragmentShader = fragmentShader, vertexShader = vertexShader, uniforms = new { tCube = new { type = "t", value = new THREE.CubeTexture( f(0 + 6), f(1 + 6), f(2 + 6), f(3 + 6), f(4 + 6), f(5 + 6) ) { flipY = false, // !! needsUpdate = true } }, tFlip = new { type = "f", value = -1 } }, depthWrite = false, side = THREE.BackSide }); var mesh2 = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), skyMeshmaterial2).AttachTo(skyScene2); #endregion Native.body.Clear(); var skyCamera = new THREE.PerspectiveCamera(90, Native.window.aspect, 1, 20000); //var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); // not using css? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }) { autoClear = false, shadowMapEnabled = true, shadowMapType = THREE.PCFSoftShadowMap }; renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); #region onresize new { }.With( async delegate { do { skyCamera.aspect = Native.window.aspect; skyCamera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); } while (await Native.window.async.onresize); } ); #endregion Native.document.body.onmousewheel += e => { skyCamera.fov -= e.WheelDirection * 5.0; skyCamera.updateProjectionMatrix(); }; var target0 = new THREE.Vector3(); var lon = 90.0; var lat = 0.0; var phi = 0.0; var theta = 0.0; var drag = false; var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { var sinfps = 1 + (int)(((Math.Sin(sw.ElapsedMilliseconds * 0.0001) + 1.0) / 2.0) * 59); Native.document.title = "" + new { sinfps }; //var eye = (sw.ElapsedMilliseconds / (200)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 15)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 30)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 45)) % 2; //var eye = (sw.ElapsedMilliseconds / (1000 / 60)) % 2; var eye = (sw.ElapsedMilliseconds / (1000 / sinfps)) % 2; // if we are a multiprocess renderer, get the volatile eye id // doesnt work? //skyMesh0.visible = eye == 0; //mesh0.rotation = new THREE.Vector3(0, 0, sw.ElapsedMilliseconds); if (Native.document.pointerLockElement == Native.document.body) { lon += 0.00; } else { lon += 0.01; } lat = Math.Max(-85, Math.Min(85, lat)); // this is wrong, but gets the idea across. phi = THREE.Math.degToRad(90 - lat) + Math.Sin(sw.ElapsedMilliseconds * 0.001) * 0.1 - 0.3; theta = THREE.Math.degToRad(lon); target0.x = Math.Sin(phi) * Math.Cos(theta); target0.y = Math.Cos(phi); target0.z = Math.Sin(phi) * Math.Sin(theta); skyCamera.lookAt(target0); renderer.clear(); renderer.render(skyScene0, skyCamera); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target0.x = Math.Sin(phi) * Math.Cos(theta); target0.y = Math.Cos(phi); target0.z = Math.Sin(phi) * Math.Sin(theta); skyCamera.lookAt(target0); if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 0) { if (eye == 0) { renderer.render(skyScene1, skyCamera); } else { renderer.render(skyScene2, skyCamera); } } else if ((keys[(int)System.Windows.Forms.Keys.S] % 3) == 1) { renderer.render(skyScene1, skyCamera); } }; #region ontouchmove var touchX = 0; var touchY = 0; Native.document.body.ontouchstart += e => { e.preventDefault(); var touch = e.touches[0]; touchX = touch.screenX; touchY = touch.screenY; }; Native.document.body.ontouchmove += e => { e.preventDefault(); var touch = e.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; }; #endregion #region camera rotation Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion } ) ) ); }
/// <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://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150824 // http://stackoverflow.com/questions/14103986/canvas-and-spritematerial // X:\jsc.svn\examples\javascript\WebGL\WebGLSVGAnonymous\WebGLSVGAnonymous\Application.cs // X:\jsc.svn\examples\javascript\WebGL\WebGLVRCreativeLeadership\WebGLVRCreativeLeadership\Application.cs // X:\jsc.svn\examples\javascript\WebGL\WebGLSVGSprite\WebGLSVGSprite\Application.cs //var l = new NotificationLayout().layout; //l.AttachToDocument(); // : INodeConvertible<IHTMLElement> //var c = (IHTMLCanvas)l.layout; //var c = (IHTMLCanvas)l; // look we have a databound 2D image! // make it implicit operator for assetslibrary? //l.style //c.AttachToDocument(); // https://play.google.com/store/apps/details?id=com.abstractatech.vr // could we display LAN UDP notifications too. like // which youtube video is playing? Native.body.Clear(); Native.body.style.margin = "0px"; Native.body.style.backgroundColor = "black"; // https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652 // hResolution: 1920, //vResolution: 1080, // "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln" // http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0 // https://github.com/troffmo5/OculusStreetView // http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect // http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/ // http://stemkoski.github.io/Three.js/Sprites.html // http://stemkoski.github.io/Three.js/Texture-Animation.html // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html // http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html var window = Native.window; var fov = 70.0; var camera = new THREE.PerspectiveCamera(fov, 1920.0 / 1080.0, //window.aspect, 1, 1100); var target = new THREE.Vector3(0, 0, 0); //(camera as dynamic).target = target; var scene = new THREE.Scene(); //scene.add(new THREE.AmbientLight(0xffffff)); //scene.add(new THREE.AmbientLight(0xafafaf)); // http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/ // http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect scene.add(new THREE.AmbientLight(0x2f2f2f)); //var light = new THREE.DirectionalLight(0xffffff, 1.0); #region light var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); //var lightOffset = new THREE.Vector3(0, 1000, 2500.0); var lightOffset = new THREE.Vector3( 2000, 700, // lower makes longer shadows 700.0 ); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; scene.add(light); #endregion var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), new THREE.MeshBasicMaterial(new { map = THREE.ImageUtils.loadTexture( new _2294472375_24a3b8ef46_o().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src ) })); mesh.scale.x = -1; scene.add(mesh); var labove = new NotificationLayout(); #region sprite2 above { labove.Message.innerText = "VR CREATIVE LEADERSHIP"; labove.layout.style.background = ""; new { }.With( async delegate { retry: // make it blink. gaze cursor is on it? labove.box.style.background = "rgba(255,255,0,0.7)"; labove.box.setAttribute("invoke", "onmutation1"); await Task.Delay(1500); // is mutation observer noticing it? labove.box.style.background = "rgba(255,255,255,0.7)"; labove.box.setAttribute("invoke", "onmutation2"); await Task.Delay(1500); goto retry; } ); var c = labove.AsCanvas(); var xcrateTexture = new THREE.Texture(c); // like video texture Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; }; var xcrateMaterial = new THREE.SpriteMaterial( new { map = xcrateTexture, useScreenCoordinates = false, //color = 0xff0000 color = 0xffffff } ); var xsprite2 = new THREE.Sprite(xcrateMaterial); //floor //sprite2.position.set(0, -200, 0); // left xsprite2.position.set(200, 0, 0); //sprite2.position.set(0, 0, 200); //sprite2.position.set(-100, 0, 0); xsprite2.scale.set( c.width * 0.5, c.height * 0.5, //64, 64, 1.0); // imageWidth, imageHeight scene.add(xsprite2); } #endregion //var lineTo = new List<THREE.Vector3>(); var others = new { ui = default(NotificationLayout), canvas = default(IHTMLCanvas), map = default(THREE.Texture), sprite = default(THREE.Sprite) }.ToEmptyList(); #region add Action<NotificationLayout> add = ui => { ui.layout.style.background = ""; var canvas = ui.AsCanvas(); var index = others.Count; //ui.Message += new { index }; //ui.Message.innerText += new { index }; //lbelow0.Message = new { THREE.REVISION }.ToString(); // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined ) var map = new THREE.Texture(canvas); map.minFilter = THREE.LinearFilter; // like video texture var xcrateMaterial = new THREE.SpriteMaterial( new { map, useScreenCoordinates = false, //color = 0xff0000 color = 0xffffff } ); var sprite = new THREE.Sprite(xcrateMaterial); //floor //sprite2.position.set(0, -200, 0); // left middle //sprite2.position.set(200, 0, 0); //sprite.position.set(250, -50, 50); //lineTo.Add(sprite.position); //sprite2.position.set(0, 0, 200); //sprite2.position.set(-100, 0, 0); sprite.scale.set( canvas.width * 0.5, canvas.height * 0.5, //64, 64, 1.0); // imageWidth, imageHeight scene.add(sprite); others.Add( new { ui, canvas, map, sprite } ); var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { // can we get some of the crazy c++ template bitmapbuffer code from the past? map.needsUpdate = true; var offset = Math.PI * 2 * ((double)(index + 1) / others.Count); sprite.position.x = 300; sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120; sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120; }; }; #endregion add( new NotificationLayout { // keep attributes around? // like we do with XElement sync? Icon = new HTML.Images.FromAssets._0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With( x => { x.style.width = "96px"; x.style.height = "96px"; } ), Message = "Advanced Mechanics by Portugal Design Lab" } ); add( new NotificationLayout { // keep attributes around? // like we do with XElement sync? Icon = new HTML.Images.FromAssets._42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With( x => { x.style.width = "96px"; x.style.height = "96px"; } ), Message = "Face Value by mshariful" } ); add( new NotificationLayout { // keep attributes around? // like we do with XElement sync? Icon = new HTML.Images.FromAssets._371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With( x => { x.style.width = "96px"; x.style.height = "96px"; } ), Message = "Mind Wall. by Sumit Goski" } ); #region lines { var geometry = new THREE.Geometry { // how can we keep streaming verticies data points to gpu? vertices = others.SelectMany( lineTo => new[] { new THREE.Vector3(200, 0, 0), lineTo.sprite.position } ).ToArray() // https://github.com/mrdoob/three.js/wiki/Updates // http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render //verticesNeedUpdate = true }; Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; }; var o = new THREE.Line(geometry, new THREE.LineDashedMaterial( new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 } ), THREE.LineStrip); //objects.Add(o); scene.add(o); } #endregion // // DK2 // hResolution: 1920, //vResolution: 1080, var renderer = new THREE.WebGLRenderer(); renderer.setSize(1920, 1080); #region HMD // broken? var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 }; var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }; var HMD = new OculusRiftEffectOptions { hResolution = window.Width, vResolution = window.Height, hScreenSize = 0.12576, vScreenSize = 0.07074, interpupillaryDistance = 0.0635, lensSeparationDistance = 0.0635, eyeToScreenDistance = 0.041, // j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0]; //distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 }, distortionK = distortionK, // j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0]; //chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 } chromaAbParameter = chromaAbParameter }; #endregion //var effect = new THREE.OculusRiftEffect( // renderer, new // { // worldScale = 100, // //HMD // } // ); //effect.setSize(1920, 1080); renderer.domElement.AttachToDocument(); //renderer.domElement.style.position = IStyle.PositionEnum.absolute; renderer.domElement.style.SetLocation(0, 0); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; // x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs new { }.With( async delegate { retry: var s = (double)Native.window.Width / 1920.0; Native.document.body.style.transform = "scale(" + s + ")"; Native.document.body.style.transformOrigin = "0% 0%"; await Native.window.async.onresize; goto retry; } ); //#region onresize //Native.window.onresize += // delegate // { // camera.aspect = Native.window.aspect; // camera.updateProjectionMatrix(); // renderer.setSize(window.Width, window.Height); // effect.setSize(window.Width, window.Height); // }; //#endregion //Native.document.body.onmousewheel += // e => // { // fov -= e.WheelDirection * 5.0; // camera.projectionMatrix.makePerspective(fov, // (double)window.Width / window.Height, 1, 1100); // }; var lon0 = -45.0; var lon1 = 0.0; var lon = new sum( () => lon0, () => lon1 ); var lat0 = 0.0; var lat1 = 0.0; // or could we do it with byref or pointers? var lat = new sum( () => lat0, () => lat1 ); var phi = 0.0; var theta = 0.0; //var controls = new THREE.OrbitControls(camera); var camera_rotation_z = 0.0; //Native.document.onmousemove += // e => // { // l.Message = new { e.CursorX, e.CursorY }.ToString(); // }; Native.window.onframe += ee => { //labove.Message = new //{ // lon, // lat, // ee.counter //}.ToString(); //if (Native.document.pointerLockElement == Native.document.body) // lon += 0.00; //else // lon += 0.01; //lat = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = 500 * Math.Sin(phi) * Math.Cos(theta); target.y = 500 * Math.Cos(phi); target.z = 500 * Math.Sin(phi) * Math.Sin(theta); //controls.update(); //camera.position = controls.center.clone(); camera.lookAt(target); camera.rotation.z += camera_rotation_z; renderer.render(scene, camera); //effect.render(scene, camera); }; // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html // http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove var compassHeadingOffset = 0.0; var compassHeadingInitialized = 0; #region compassHeading // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs Native.window.ondeviceorientation += dataValues => { // Convert degrees to radians var alphaRad = dataValues.alpha * (Math.PI / 180); var betaRad = dataValues.beta * (Math.PI / 180); var gammaRad = dataValues.gamma * (Math.PI / 180); // Calculate equation components var cA = Math.Cos(alphaRad); var sA = Math.Sin(alphaRad); var cB = Math.Cos(betaRad); var sB = Math.Sin(betaRad); var cG = Math.Cos(gammaRad); var sG = Math.Sin(gammaRad); // Calculate A, B, C rotation components var rA = -cA * sG - sA * sB * cG; var rB = -sA * sG + cA * sB * cG; var rC = -cB * cG; // Calculate compass heading var compassHeading = Math.Atan(rA / rB); // Convert from half unit circle to whole unit circle if (rB < 0) { compassHeading += Math.PI; } else if (rA < 0) { compassHeading += 2 * Math.PI; } /* Alternative calculation (replacing lines 99-107 above): var compassHeading = Math.atan2(rA, rB); if(rA < 0) { compassHeading += 2 * Math.PI; } */ // Convert radians to degrees compassHeading *= 180 / Math.PI; // Compass heading can only be derived if returned values are 'absolute' // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs //Native.document.body.innerText = new { compassHeading }.ToString(); if (compassHeadingInitialized > 0) { lon1 = compassHeading - compassHeadingOffset; } else { compassHeadingOffset = compassHeading; compassHeadingInitialized++; } }; #endregion #region gamma Native.window.ondeviceorientation += //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString(); //e => lon = e.gamma; e => { lat1 = e.gamma; // after servicing a running instance would be nice // either by patching or just re running the whole iteration in the backgrou camera_rotation_z = e.beta * 0.02; }; #endregion #region camera rotation var old = new { clientX = 0, clientY = 0 }; Native.document.body.ontouchstart += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; old = n; }; Native.document.body.ontouchmove += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; e.preventDefault(); lon0 += (n.clientX - old.clientX) * 0.2; lat0 -= (n.clientY - old.clientY) * 0.2; old = n; }; Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon0 += e.movementX * 0.1; lat0 -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { //drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); //drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion Native.body.onmousewheel += e => { camera_rotation_z += 0.1 * e.WheelDirection; ; }; // https://developer.android.com/training/system-ui/immersive.html //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; }
/// <summary> /// return a forced displacement constrain (delta) /// </summary> /// <param name="pos"></param> /// <returns></returns> public abstract THREE.Vector3 Constrain(THREE.Vector3 pos);
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/ovroculus360photosndk // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularPanorama\ChromeEquirectangularPanorama\bin\Debug\staging\ChromeEquirectangularPanorama.Application\web // subst a: r:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularPanorama\ChromeEquirectangularPanorama\bin\Debug\staging\ChromeEquirectangularPanorama.Application\web // subst a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularPanorama\ChromeEquirectangularPanorama\bin\Debug\staging\ChromeEquirectangularPanorama.Application\web // subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularPanorama\ChromeEquirectangularPanorama\bin\Debug\staging\ChromeEquirectangularPanorama.Application\web // 237ms UdpClient.Client.vBind { ipString = 0.0.0.0, Port = 49000, bind = 0 } /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // https://www.shadertoy.com/view/lsSGRz // "X:\jsc.svn\examples\javascript\chrome\apps\ChromeUDPFloats\ChromeUDPFloats\Application.cs" #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: "ChromeUDPSendAsync"); var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: null ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion //02000047 ChromeEquirectangularPanorama.Application+ctor>b__7>d__1d+<MoveNext>0600001d //script: error JSC1000: *** stack is empty, invalid pop? //script: error JSC1000: error at ChromeEquirectangularPanorama.Application+ctor>b__7>d__1d+<MoveNext>0600001d.<00c3> ldloca.s.try, // assembly: W:\ChromeEquirectangularPanorama.Application.exe // type: ChromeEquirectangularPanorama.Application+ctor>b__7>d__1d+<MoveNext>0600001d, ChromeEquirectangularPanorama.Application, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null // offset: 0x003e // method:Int32 <00c3> ldloca.s.try(<MoveNext>0600001d, ctor>b__7>d__1d ByRef, System.Runtime.CompilerServices.TaskAwaiter`1[chrome.NetworkInterface[]] ByRef, System.Runtime.CompilerServices.TaskAwaiter`1[chrome.NetworkInterface[]] ByRef) //*** Compiler cannot continue... press enter to quit. // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150721/udp var window = Native.window; // Error creating WebGL context. #region webgl //var fov = 70.0; var fov = 90.0; var camera = new THREE.PerspectiveCamera(fov, window.aspect, 1, 1100); var target = new THREE.Vector3(0, 0, 0); //(camera as dynamic).target = target; var scene = new THREE.Scene(); var meshmaterial = new THREE.MeshBasicMaterial(new { map = THREE.ImageUtils.loadTexture( new ChromeEquirectangularPanorama.HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src ) }); var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), meshmaterial ); mesh.scale.x = -1; scene.add(mesh); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.Width, window.Height); renderer.domElement.AttachToDocument(); //renderer.domElement.style.position = IStyle.PositionEnum.absolute; renderer.domElement.style.SetLocation(0, 0); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; #region onresize Native.window.onresize += delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; #endregion Native.document.body.onmousewheel += e => { fov -= e.WheelDirection * 5.0; camera.projectionMatrix.makePerspective(fov, (double)window.Width / window.Height, 1, 1100); }; var gearvr_x = 0f; // left to right var gearvr_y = 0f; var gearvr_z = 0f; // set by? var gearvr_filename = ""; var lon = 90.0; var lat = 0.0; var phi = 0.0; var theta = 0.0; Native.window.onframe += delegate { if (Native.document.pointerLockElement == Native.document.body) lon += 0.00; else lon += 0.01; lat = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); // http://www.gamedev.net/topic/626401-quaternion-from-latitude-and-longitude/ //void xyz_to_latlon(const double x, const double y, const double z, double &lat, double &lon) //{ // double theta = pi + atan2(z, x); // double phi = acos(-y); // lat = phi/pi*180.0 - 90.0; // lon = theta/(2*pi)*360.0 - 180.0; //} //double vrtheta = Math.PI + Math.Atan2(gearvr_z, gearvr_x); //double vrphi = Math.Acos(-gearvr_y); //var vrlat = phi / Math.PI * 180.0 - 90.0; //var vrlon = theta / (2 * Math.PI) * 360.0 - 180.0; // const ovrMatrix4f centerEyeRotation = ovrMatrix4f_CreateFromQuaternion( &tracking->HeadPose.Pose.Orientation ); // http://stackoverflow.com/questions/11665562/three-js-how-to-use-quaternion-to-rotate-camera phi = THREE.Math.degToRad(90 - lat) - Math.Sign(gearvr_x) * (gearvr_x * gearvr_x) * Math.PI; theta = THREE.Math.degToRad(lon) - Math.Sign(gearvr_y) * (gearvr_y * gearvr_y) * Math.PI; target.x = 500 * Math.Sin(phi) * Math.Cos(theta); target.y = 500 * Math.Cos(phi); target.z = 500 * Math.Sin(phi) * Math.Sin(theta); camera.lookAt(target); renderer.render(scene, camera); }; #endregion // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html #region camera rotation Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { if (e.MouseButton == IEvent.MouseButtonEnum.Right) Native.document.exitPointerLock(); //drag = false; e.preventDefault(); }; renderer.domElement.onmousedown += async e => { //e.CaptureMouse(); //drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); //await renderer.domElement.async.onmousedown; //Native.document.exitPointerLock(); }; //Native.document.body.oncontextmenu += // delegate // { // Native.document.exitPointerLock(); // }; //Native.document.body.ondblclick += // e => // { // e.preventDefault(); // Console.WriteLine("requestPointerLock"); // }; #endregion var file64 = ""; var file = new MemoryStream(); var segment0 = new byte[0]; #region toolbar var toolbar = new IHTMLDiv { }.AttachToDocument(); Native.body.style.margin = "0em"; Native.body.style.padding = "0em"; Native.document.documentElement.style.margin = "0em"; Native.document.documentElement.style.padding = "0em"; new IStyle(toolbar) { position = IStyle.PositionEnum.absolute, padding = "1em", top = "0em", right = "0em", bottom = "0em", color = "yellow", //overflow = IStyle.OverflowEnum.scroll overflow = IStyle.OverflowEnum.auto }; toolbar.css[IHTMLElement.HTMLElementEnum.img].style.cursor = IStyle.CursorEnum.pointer; toolbar.css[IHTMLElement.HTMLElementEnum.img].style.display = IStyle.DisplayEnum.block; //toolbar.css.children.style.display = IStyle.DisplayEnum.block; new IHTMLButton { "update pending... update available. click to reload.." }.AttachTo(toolbar).onclick += delegate { // can we get an udp signal from the compiler when the app is out of date, when the update is pending? chrome.runtime.reload(); }; //var n = await chrome.socket.getNetworkList(); ////var n24 = n.Where(x => x.prefixLength == 24).ToArray(); #region UDPClipboardSend // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20160103/x360videoui // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeEquirectangularPanorama\ChromeEquirectangularPanorama\Application.cs Action<byte[]> UDPClipboardSend = async data => { var n = await chrome.socket.getNetworkList(); new IHTMLPre { new { n.Length } }.AttachToDocument(); // LINQ and async wont mix for 2012? //foreach (var item in n.Where(x => x.prefixLength == 24)) foreach (var item in n) if (item.prefixLength == 24) { new IHTMLPre { new { item.prefixLength, item.name, item.address } }.AttachToDocument(); //{ prefixLength = 64, name = {AE3B881D-488F-4C3A-93F8-7DA0D65B9300}, address = fe80::fc45:cae9:46ca:7b0f } //about to bind... { port = 29129 } //about to send... { Length = 0 } //sent: -2 //{ prefixLength = 24, name = {AE3B881D-488F-4C3A-93F8-7DA0D65B9300}, address = 192.168.1.12 } //about to bind... { port = 25162 } //about to send... { Length = 0 } //sent: 0 // X:\jsc.svn\examples\merge\TestDetectOpenFiles\TestDetectOpenFiles\Program.cs // X:\jsc.svn\examples\javascript\chrome\apps\MulticastListenExperiment\MulticastListenExperiment\Application.cs // https://code.google.com/p/chromium/issues/detail?id=455352 // X:\jsc.svn\examples\merge\TestDetectOpenFiles\TestDetectOpenFiles\Program.cs // bind? //var data = Encoding.UTF8.GetBytes(message); //creates a variable b of type byte // http://stackoverflow.com/questions/13691119/chrome-packaged-app-udp-sockets-not-working // http://www.chinabtp.com/how-to-do-udp-broadcast-using-chrome-sockets-udp-api/ // chrome likes 0 too. var port = new Random().Next(16000, 40000); //var port = 0; // //new IHTMLPre { "about to bind... " + new { port } }.AttachToDocument(); // where is bind async? var socket = new UdpClient(); socket.Client.Bind( //new IPEndPoint(IPAddress.Any, port: 40000) new IPEndPoint(IPAddress.Parse(item.address), port) ); //new IHTMLPre { "about to send... " + new { data.Length } }.AttachToDocument(); // X:\jsc.svn\examples\javascript\chrome\apps\ChromeUDPNotification\ChromeUDPNotification\Application.cs var s = await socket.SendAsync( data, data.Length, hostname: "239.1.2.3", port: 39814 ); //new IHTMLPre { "sent: " + s }.AttachToDocument(); //socket.ReceiveAsync //socket.Close(); //new IHTMLPre { $"sent: {s}" }.AttachToDocument(); // android cannot see it. why? because it needs to know which NIC to use. } }; #endregion new { }.With( async delegate { // if (nic.prefixLength != 24) // return; //var status = new IHTMLPre { new { nic.address } }.AttachTo(toolbar); var HUD = new IHTMLPre { "awaiting segment0..." }.AttachTo(toolbar); // 500000 var uu = new UdpClient(49000); //uu.ExclusiveAddressUse = false; var md5string = ""; uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3")); while (true) { var data = await uu.ReceiveAsync(); // did we jump to ui thread? // jpeg progressive? segment0 = data.Buffer; file.Write(segment0, 0, segment0.Length); // if segment is less than 65507 // then download is complete if (file.Length > 0) if (segment0.Length < 65507) { //lobal::System.Security.Cryptography.MD5CryptoServiceProvider var bytes = file.ToArray(); var md5 = new System.Security.Cryptography.MD5CryptoServiceProvider().ComputeHash(bytes); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20160103/x360videoui md5string = md5.ToHexString(); // this is slow.. worker? file64 = Convert.ToBase64String(bytes); //data:[<MIME-type>][;charset=<encoding>][;base64], file = new MemoryStream(); var src = "data:image/jpeg;base64," + file64; new { }.With( async delegate { var img = new IHTMLImage { src = src, title = md5string }.AttachTo(toolbar); img.style.height = "6em"; do { // send udp back. so vr knows which image we went back to? mesh.material.map.image = img; mesh.material.map.needsUpdate = true; await img.async.onclick; //send sha1 UDPClipboardSend(md5); } while (true); } ); } HUD.innerText = "segment0 " + segment0.Length + "\nfile " + file.Length + "\nfile64 " + file64.Length; } } ); #region awaiting tracking new { }.With( async delegate { //if (nic.prefixLength != 24) // return; //var status = new IHTMLPre { new { nic.address } }.AttachTo(toolbar); var HUD = new IHTMLPre { "awaiting tracking..." }.AttachTo(toolbar); var uu = new UdpClient(49834); //uu.ExclusiveAddressUse = false; uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3")); while (true) { var data = await uu.ReceiveAsync(); // did we jump to ui thread? //Console.WriteLine("ReceiveAsync done " + Encoding.UTF8.GetString(x.Buffer)); //args.vertexTransform = x.Buffer; var xy = Encoding.UTF8.GetString(data.Buffer).Split(':'); gearvr_x = float.Parse(xy[0]); gearvr_y = float.Parse(xy[1]); gearvr_z = float.Parse(xy[2]); var w = float.Parse(xy[3]); gearvr_filename = xy[4]; HUD.innerText = new { gearvr_x, gearvr_y, gearvr_z, w, gearvr_filename }.ToString().Replace(",", ",\n"); } } ); #endregion #endregion }
public BallConstrain(THREE.Vector3 c, double ballRadius) { Center = c; Radius = ballRadius; MakeMesh(); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150912/x360mountains // ls sdcard/oculus/360photos/ // "X:\vr\0000.png" // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\0000.png" /sdcard/oculus/360photos/ // 2649 KB/s (1085134 bytes in 0.400s) // "X:\vr\tr.png" // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\tr.png" /sdcard/oculus/360photos/ // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\code.png" /sdcard/oculus/360photos/ // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\cone2.png" /sdcard/oculus/360photos/ // "X:\vr\code.png" // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150906/roomscanningeffectbyrosme // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150816/iss // https://www.youtube.com/watch?v=UWiq-qgedws // https://www.youtube.com/watch?v=TwRSOEG-Gx4 // 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 "X:\vr\sh1\0000.png" "/sdcard/oculus/360photos/sh1.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360columns\0000.png" "/sdcard/oculus/360photos/tape360columns.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\edge.png" "/sdcard/oculus/360photos/tape360columns.png" // 4041 KB/s (3248448 bytes in 0.785s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\terrain.png" "/sdcard/oculus/360photos/" // could we udp our 360 image from webgl to vr yet? // "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\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web // subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web // what if we want to do subst in another winstat or session? // ColladaLoader: Empty or non-existing file (assets/x360mountains/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: "x360mountains"); // 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 //var vs0 = new TraceConeWithCRTByKlk.Shaders.Program360FragmentShader(); //var vs0 = new FaceEdgeVertexByPaniq.Shaders.Program360FragmentShader(); var vs0 = new ChromeShaderToyMountainsByHoskins.Shaders.Program360FragmentShader(); // onframe need syncs to enable GC! var vsync = default(TaskCompletionSource<object>); Func<bool> vsyncReady = delegate { if (vsync != null) if (vsync.Task.IsCompleted) return true; return false; }; // crash //int cubefacesizeMAX = 2048 * 2; // 6 faces, ? // not responding... //int cubefacesizeMAX = 2048 * 2; // 6 faces, ? int cubefacesizeMAX = 2048; // 6 faces, ? //int cubefacesizeMAX = 1024; // 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/" // force laptop into preview. when can we have a button for it? //if (Environment.ProcessorCount < 8) // cubefacesize = 64; // 6 faces, ? // fast gif? //cubefacesize = 128; // 6 faces, ? //cubefacesize = 512; // 6 faces, ? // [GroupMarkerNotSet(crbug.com / 242999)!:247F0809] //RENDER WARNING: texture bound to texture unit 0 is not renderable.It maybe non-power-of-2 and have incompatible texture filtering. // can we keep fast fps yet highp? // can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm? //const int cubefacesize = 128; // 6 faces, ? //var cubecameraoffsetx = 256; var cubecameraoffsetx = 400; //var uizoom = 0.1; //var uizoom = cubefacesize / 128f; var uizoom = 128f / cubefacesize; Native.css.style.backgroundColor = "blue"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); (Native.body.style as dynamic).webkitUserSelect = "text"; //return; // Earth params //var radius = 0.5; //var radius = 1024; //var radius = 2048; //var radius = 512; //var radius = 256; //var radius = 400; // can we have not fly beyond moon too much? //var radius = 500; var radius = 480; //var 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/x360mountains/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg ) var far = 0xffffff; 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)); //scene.add(new THREE.AmbientLight(0xffffff)); //scene.add(new THREE.AmbientLight(0xaaaaaa)); //scene.add(new THREE.AmbientLight(0xcccccc)); //scene.add(new THREE.AmbientLight(0xeeeeee)); scene.add(new THREE.AmbientLight(0xffffff)); //var light = new THREE.DirectionalLight(0xffffff, 1); //// sun should be beyond moon ////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance); ////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); //// where shall the light source be to see half planet? //light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); //scene.add(light); //var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument(); //var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument(); //var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument(); //new IHTMLHorizontalRule { }.AttachToDocument(); // whats WebGLRenderTargetCube do? // WebGLRenderer preserveDrawingBuffer var renderer0 = new THREE.WebGLRenderer( new { //antialias = true, //alpha = true, preserveDrawingBuffer = true } ); // https://github.com/mrdoob/three.js/issues/3836 // the construct. white bg //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 bottomRotate100 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -314, max = 314, valueAsNumber = 0, title = "bottomRotate" }.AttachToDocument(); var maxfps = 60; //var maxlengthseconds = 60; var maxlengthseconds = 120; var maxframes = maxlengthseconds * maxfps; // whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk? var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 137, title = "frameIDslider" }.AttachToDocument(); frameIDslider.onchange += delegate { frameIDslider.title = "frameIDslider " + frameIDslider.valueAsNumber; }; //var vs0 = new ChromeShaderToyRelentlessBySrtuss.Shaders.ProgramFragmentShader(); //var vs0 = new TraceConeWithCRTByKlk.Shaders.ProgramFragmentShader(); // left IHTMLCanvas shader0canvasPZ = null; // locCameraTargetOffset to look left? #region shader0canvasPZ new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader0canvasPZ = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f); // left? //forward=normalize(float3(0.0 , 0.0 ,1.0)); }; Native.window.onframe += delegate { // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // front IHTMLCanvas shader1canvasPX = null; #region shader1canvasPX new { }.With( async delegate { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); var gl0 = new WebGLRenderingContext(alpha: true); shader1canvasPX = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; c0.style.SetLocation(720, 8); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); pass0.ProgramSelected += mProgram => { // off by 45deg__ // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f); // fixup //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, -1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 0.0f); // front //forward=normalize(float3(1.0 , 0.0 ,0.0)); }; var sw0 = Stopwatch.StartNew(); Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // back IHTMLCanvas shader1canvasNX = null; #region shader1canvasNX new { }.With( async delegate { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); var gl0 = new WebGLRenderingContext(alpha: true); shader1canvasNX = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; c0.style.SetLocation(720, 8); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); pass0.ProgramSelected += mProgram => { // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, 1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f); // back //forward=normalize(float3(-1.0 , 0.0 ,0.0)); }; var sw0 = Stopwatch.StartNew(); Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // right IHTMLCanvas shader2canvasNZ = null; // locCameraTargetOffset to look right? #region shader2canvasNZ new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader2canvasNZ = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f); // right //forward=normalize(float3(0.0 , 0.0 ,-1.0)); }; Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // bottom IHTMLCanvas shader2canvasNY = null; // locCameraTargetOffset to look bottom? #region shader2canvasNY new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader2canvasNY = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? // 45deg off?? // front //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f); // left //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, -1, 0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0); }; Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // top IHTMLCanvas shader2canvasPY = null; // locCameraTargetOffset to look right? #region shader2canvasPY new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader2canvasPY = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? // 45deg off?? // front //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f); // left //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, 1, 0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0); }; Native.window.onframe += delegate { //d = a[0].CS___8__locals1.vsync != null; //e = a[0].CS___8__locals1.vsync.kAcABp_b1ITCbIktNs3el5Q().dgQABqwxMjO1zVAJb5WXKA(); // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion 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? 1.0 * (camerax + fcamerax), // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1.0 * (cy + fcameray), //1200 1.0 * (cameraz + fcameraz) // can we hover top of the map? ); }; #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 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 DirectoryEntry var dir = default(DirectoryEntry); int files2count = 0; new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); var dir2r = dir.createReader(); var files2 = await dir2r.readFileEntries(); files2count = files2.Count(); if (files2count > 0) { new IHTMLPre { new { files2count } }.AttachToDocument(); } }; frame0.style.cursor = IStyle.CursorEnum.pointer; frame0.title = "save frame"; frame0.onclick += delegate { // http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf // A method of creating synthetic stereoscopic panoramic images that can be implemented //in most rendering packages has been presented. If single panoramic pairs can be created //then stereoscopic panoramic movies are equally possible giving rise to the prospect of //movies where the viewer can interact with, at least with regard to what they choose to look //at.These images can be projected so as to engage the two features of the human visual //system that assist is giving us a sense of immersion, the feeling of “being there”. That is, //imagery that contains parallax information as captured from two horizontally separated eye //positions (stereopsis)and imagery that fills our peripheral vision.The details that define //how the two panoramic images should be created in rendering packages are provided, in //particular, how to precisely configure the virtual cameras and control the distance to zero //parallax. // grab a frame if (dir == null) { // 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 #region render 60hz 30sec new IHTMLButton { $"render {maxfps}hz {maxlengthseconds}sec" }.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; frameIDslider.valueAsNumber = files2count - 1; goto beforeframe; // parallax offset? await_nextframe: var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '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); // some shaders need to know where the camera is looking from. can we tell them? //fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); //// up //fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); // cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f))); // up //fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcamerax += (1.0 / 60.0); //fcamerax += (1.0 / 60.0) * 120; // 60hz 30sec if (frameIDslider.valueAsNumber < maxframes) { // Blob GC? either this helms or the that we made a Blob static. //await Task.Delay(11); await Task.Delay(33); // gc at 260 happened twice? 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" // asus will hang // https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a // can we get one frame into vr? // cube: mesh to cast shadows //{ // var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); // var floor2 = new THREE.Mesh(planeGeometry0, // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) // new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 }) // ); // floor2.position.set(0, 0, -cubefacesize / 2); // floor2.AttachTo(scene); //} //{ // var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); // var floor2 = new THREE.Mesh(planeGeometry0, // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) // new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff }) // ); // floor2.position.set(-cubefacesize / 2, 0, 0); // floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); // floor2.AttachTo(scene); //} // front? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader1canvasPX) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, //color = 0x00ff00 }) ); //floor2.position.set(0, 0, -cubefacesize * 0.55); floor2.position.set(-cubefacesize * 0.5, 0, 0); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); floor2.AttachTo(scene); } // left? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader0canvasPZ) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0xff0000, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); floor2.position.set(0, 0, cubefacesize * 0.5); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); floor2.AttachTo(scene); } // right? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader2canvasNZ) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); floor2.position.set(0, 0, -cubefacesize * 0.5); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); floor2.AttachTo(scene); } // back? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader1canvasNX) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, //color = 0x00ff00 }) ); floor2.position.set(cubefacesize * 0.5, 0, 0); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); floor2.AttachTo(scene); } // bottom? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader2canvasNY) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); //floor2.position.set(cubefacesize * 0.5, 0, 0); //floor2.position.set(-cubefacesize * 0.5, 0, 0); floor2.position.set(0, -cubefacesize * 0.5, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); applycameraoffset += delegate { floor2.rotation.set(0, 0, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI ); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI); floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI + bottomRotate100 * 0.01f); }; floor2.AttachTo(scene); } // top? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader2canvasPY) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); //floor2.position.set(cubefacesize * 0.5, 0, 0); //floor2.position.set(-cubefacesize * 0.5, 0, 0); floor2.position.set(0, cubefacesize * 0.5, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); applycameraoffset += delegate { floor2.rotation.set(0, 0, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI ); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI); floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), bottomRotate100 * 0.01f); }; floor2.AttachTo(scene); } // X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs // X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs // hidden for alpha AppWindows //#if FBACKGROUND #region galaxy_starfield new THREE.Texture().With( async s => { var i = new HTML.Images.FromAssets.galaxy_starfield(); //var i = new HTML.Images.FromAssets.galaxy_starfield150FOV(); var bytes = await 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 { }.With( delegate { //dae.position.y = -80; //dae.AttachTo(sceneg); //scene.add(dae); //oo.Add(dae); //var rdysw = Stopwatch.StartNew(); //Console.WriteLine() // 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.. // let render man know.. if (vsyncReady()) 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? // are we ready? 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?"); }
/// <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) { // view-source:file:///X:/opensource/github/three.js/examples/css3d_panorama.html var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000); var scene = new THREE.Scene(); var renderer = new THREE.CSS3DRenderer(); #region sides var sides = new[] { new side { img= new cubecamera_px(), //img= new humus_px(), // glsl, clr46, Vector3? position= new THREE.Vector3( -512, 0, 0 ), rotation= new THREE.Vector3( 0, Math.PI / 2, 0 ) }, new side { img= new cubecamera_nx(), //img= new humus_nx(), position= new THREE.Vector3( 512, 0, 0 ), rotation= new THREE.Vector3( 0, -Math.PI / 2, 0 ) }, new side{ img= new cubecamera_py(), //img= new humus_py(), position= new THREE.Vector3( 0, 512, 0 ), rotation= new THREE.Vector3( Math.PI / 2, 0, Math.PI ) }, new side{ img= new cubecamera_ny(), //img= new humus_ny(), position= new THREE.Vector3( 0, -512, 0 ), rotation= new THREE.Vector3( - Math.PI / 2, 0, Math.PI ) }, new side{ img= new cubecamera_pz(), //img= new humus_pz(), position= new THREE.Vector3( 0, 0, 512 ), rotation= new THREE.Vector3( 0, Math.PI, 0 ) }, new side{ img= new cubecamera_nz(), //img= new humus_nz(), position= new THREE.Vector3( 0, 0, -512 ), rotation= new THREE.Vector3( 0, 0, 0 ) } }; #endregion for (var i = 0; i < sides.Length; i++) { var side = sides[i]; var element = side.img; element.style.SetSize(1026, 1026); //element.width = 1026; // 2 pixels extra to close the gap. var xobject = new THREE.CSS3DObject(element); xobject.position.set(side.position.x, side.position.y, side.position.z); xobject.rotation.set(side.rotation.x, side.rotation.y, side.rotation.z); scene.add(xobject); } //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(0.34382355213165283, -0.024581052362918854, -0.938712477684021, 0, 0, -0.9996572732925415, 0.026176948100328445, 0, 0.9390342831611633, 0.00900025200098753, 0.34370577335357666, 0, 0, 0, 0, 0.9999999403953552) translate3d(489px, 332px, 0px);"> // <img src="assets/CSS3DPanoramaByHumus/posx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -512, 0, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/negx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 512, 0, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/posy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 512, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/negy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, -512, 0, 1);"><img src="assets/CSS3DPanoramaByHumus/posz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 512, 1);"><img src="assets/CSS3DPanoramaByHumus/negz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(-0.4524347484111786, 0, 0.8917974829673767, 0, 0, -1, 0, 0, -0.8917974829673767, 0, -0.4524347484111786, 0, 0, 0, 0, 1) translate3d(489px, 332px, 0px);"> // <img width="1026" src="textures/cube/Bridge2/posx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 512, 1);"><img width="1026" src="textures/cube/Bridge2/negz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); #region onresize Native.window.onresize += delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; #endregion var target = new THREE.Vector3(); var lon = 90.0; var lat = 0.0; var phi = 0.0; var theta = 0.0; var drag = false; Native.window.onframe += delegate { if (Native.document.pointerLockElement == Native.document.body) lon += 0.00; else lon += 0.01; lat = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = Math.Sin(phi) * Math.Cos(theta); target.y = Math.Cos(phi); target.z = Math.Sin(phi) * Math.Sin(theta); camera.lookAt(target); renderer.render(scene, camera); }; #region ontouchmove var touchX = 0; var touchY = 0; Native.document.body.ontouchstart += e => { e.preventDefault(); var touch = e.touches[0]; touchX = touch.screenX; touchY = touch.screenY; }; Native.document.body.ontouchmove += e => { e.preventDefault(); var touch = e.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; }; #endregion #region camera rotation Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion Native.document.body.onmousewheel += e => { camera.fov -= e.WheelDirection * 5.0; camera.updateProjectionMatrix(); }; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page = null) { // 20140704 no balls shown? // broken? // view-source:http://www.mrdoob.com/lab/javascript/beachballs/ //Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); var origin = new THREE.Vector3(0, 15, 0); var isMouseDown = false; var renderer = new THREE.WebGLRenderer( new { antialias = true, alpha = false }); renderer.setClearColor(new THREE.Color(0x101010)); renderer.domElement.AttachToDocument(); // scene var camera = new THREE.PerspectiveCamera( 40, Native.window.aspect, 1, 1000 ); camera.position.x = -30; camera.position.y = 10; camera.position.z = 30; camera.lookAt(new THREE.Vector3(0, 10, 0)); #region AtResize Action AtResize = delegate { camera.aspect = (double)Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion var scene = new THREE.Scene(); var light = new THREE.HemisphereLight(0xffffff, 0x606060, 1.2); light.position.set(-10, 10, 10); scene.add(light); { var geometry = new THREE.CubeGeometry(20, 20, 20); var material = new THREE.MeshBasicMaterial( new { wireframe = true, opacity = 0.1, transparent = true }); var mesh = new THREE.Mesh(geometry, material); mesh.position.y = 10; scene.add(mesh); } var intersectionPlane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20, 8, 8)); intersectionPlane.position.y = 10; intersectionPlane.visible = false; scene.add(intersectionPlane); // geometry var ballGeometry = new THREE.Geometry(); var ballMaterial = new THREE.MeshPhongMaterial( new __MeshPhongMaterialDictionary { vertexColors = THREE.FaceColors, specular = 0x808080, shininess = 2000 } ); // var colors = new[] { new THREE.Color( 0xe52b30 ), new THREE.Color( 0xe52b30 ), new THREE.Color( 0x2e1b6a ), new THREE.Color( 0xdac461 ), new THREE.Color( 0xf07017 ), new THREE.Color( 0x38b394 ), new THREE.Color( 0xeaf1f7 ) }; var amount = colors.Length; var geometryTop = new THREE.SphereGeometry(1, 5 * amount, 2, 0, Math.PI * 2.0, 0, 0.30); for (var j = 0; j < geometryTop.faces.Length; j++) { geometryTop.faces[j].color = colors[0]; } THREE.GeometryUtils.merge(ballGeometry, geometryTop); var geometryBottom = new THREE.SphereGeometry(1, 5 * amount, 2, 0, Math.PI * 2, Math.PI - 0.30, 0.30); for (var j = 0; j < geometryBottom.faces.Length; j++) { geometryBottom.faces[j].color = colors[0]; } THREE.GeometryUtils.merge(ballGeometry, geometryBottom); { var sides = amount - 1; var size = (Math.PI * 2) / sides; for (var i = 0; i < sides; i++) { var patch = new THREE.SphereGeometry(1, 5, 10, i * size, size, 0.30, Math.PI - 0.60); for (var j = 0; j < patch.faces.Length; j++) { patch.faces[j].color = colors[i + 1]; } THREE.GeometryUtils.merge(ballGeometry, patch); } } // physics var world = new CANNON.World(); world.broadphase = new CANNON.NaiveBroadphase(); world.gravity.set(0, -15, 0); world.solver.iterations = 7; world.solver.tolerance = 0.1; var groundShape = new CANNON.Plane(); var groundMaterial = new CANNON.Material(); var groundBody = new CANNON.RigidBody(0, groundShape, groundMaterial); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2.0); world.add(groundBody); var planeShapeXmin = new CANNON.Plane(); var planeXmin = new CANNON.RigidBody(0, planeShapeXmin, groundMaterial); planeXmin.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2.0); planeXmin.position.set(-10, 0, 0); world.add(planeXmin); var planeShapeXmax = new CANNON.Plane(); var planeXmax = new CANNON.RigidBody(0, planeShapeXmax, groundMaterial); planeXmax.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), -Math.PI / 2.0); planeXmax.position.set(10, 0, 0); world.add(planeXmax); var planeShapeYmin = new CANNON.Plane(); var planeZmin = new CANNON.RigidBody(0, planeShapeYmin, groundMaterial); planeZmin.position.set(0, 0, -10); world.add(planeZmin); var planeShapeYmax = new CANNON.Plane(); var planeZmax = new CANNON.RigidBody(0, planeShapeYmax, groundMaterial); planeZmax.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI); planeZmax.position.set(0, 0, 10); world.add(planeZmax); var ballBodyMaterial = new CANNON.Material(); world.addContactMaterial(new CANNON.ContactMaterial(groundMaterial, ballBodyMaterial, 0.2, 0.5)); world.addContactMaterial(new CANNON.ContactMaterial(ballBodyMaterial, ballBodyMaterial, 0.2, 0.8)); var spheres = new Queue<THREE.Mesh>(); var bodies = new Queue<CANNON.RigidBody>(); Func<double> random = new Random().NextDouble; #region addBall Action<double, double, double> addBall = (x, y, z) => { x = Math.Max(-10, Math.Min(10, x)); y = Math.Max(5, y); z = Math.Max(-10, Math.Min(10, z)); var size = 1.25; var sphere = new THREE.Mesh(ballGeometry, ballMaterial); sphere.scale.multiplyScalar(size); //sphere.useQuaternion = true; scene.add(sphere); spheres.Enqueue(sphere); var sphereShape = new CANNON.Sphere(size); var sphereBody = new CANNON.RigidBody(0.1, sphereShape, ballBodyMaterial); sphereBody.position.set(x, y, z); var q = new { a = random() * 3.0, b = random() * 3.0, c = random() * 3.0, d = random() * 3.0 }; Console.WriteLine("addBall " + new { x, y, z, q }); //sphereBody.quaternion.set(q.a, q.b, q.c, q.d); world.add(sphereBody); bodies.Enqueue(sphereBody); }; #endregion for (var i = 0; i < 100; i++) { addBall( random() * 10 - 5, random() * 20, random() * 10 - 5 ); } // var projector = new THREE.Projector(); var ray = new THREE.Raycaster(); var mouse3D = new THREE.Vector3(); Native.Document.body.ontouchstart += e => { e.preventDefault(); isMouseDown = true; }; Native.Document.body.ontouchmove += e => { e.preventDefault(); }; Native.Document.body.ontouchend += e => { e.preventDefault(); isMouseDown = false; }; #region onmousemove Native.document.body.onmousedown += e => { e.preventDefault(); isMouseDown = true; }; Native.document.body.onmouseup += e => { e.preventDefault(); isMouseDown = false; if (e.MouseButton == IEvent.MouseButtonEnum.Middle) { if (Native.Document.pointerLockElement == Native.Document.body) { // cant requestFullscreen while pointerLockElement Console.WriteLine("exitPointerLock"); Native.Document.exitPointerLock(); Native.Document.exitFullscreen(); return; } Console.WriteLine("requestFullscreen"); Native.Document.body.requestFullscreen(); Native.Document.body.requestPointerLock(); return; } }; Native.document.body.onmousemove += e => { mouse3D.set( ((double)e.CursorX / (double)Native.window.Width) * 2 - 1, -((double)e.CursorY / (double)Native.window.Height) * 2 + 1, 0.5 ); projector.unprojectVector(mouse3D, camera); ray.set(camera.position, mouse3D.sub(camera.position).normalize()); var intersects = ray.intersectObject(intersectionPlane); if (intersects.Length > 0) { origin.copy(intersects[0].point); } }; #endregion #region removeBall Action removeBall = delegate { scene.remove(spheres.Dequeue()); world.remove(bodies.Dequeue()); }; #endregion var sw0 = Stopwatch.StartNew(); var sw = Stopwatch.StartNew(); //var time = Native.window.performance.now(); //var lastTime = Native.window.performance.now(); #region animate Action render = delegate { var delta = sw.ElapsedMilliseconds; sw.Restart(); //time = Native.window.performance.now(); camera.position.x = -Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 40; camera.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 40; camera.lookAt(new THREE.Vector3(0, 10, 0)); intersectionPlane.lookAt(camera.position); world.step(delta * 0.001); //lastTime = time; for (var i = 0; i < spheres.Count; i++) { var sphere = spheres.ElementAt(i); var body = bodies.ElementAt(i); sphere.position.copy(body.position); sphere.quaternion.copy(body.quaternion); } renderer.render(scene, camera); }; Native.window.onframe += delegate { if (isMouseDown) { if (spheres.Count > 200) { removeBall(); } addBall( origin.x + (random() * 4.0 - 2), origin.y + (random() * 4.0 - 2), origin.z + (random() * 4.0 - 2) ); } render(); }; #endregion }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { //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: "x360stereomidnightsun"); // 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 // crash //int cubefacesizeMAX = 2048 * 2; // 6 faces, ? int cubefacesizeMAX = 1024; // 6 faces, ? int cubefacesize = cubefacesizeMAX; // 6 faces, ? //int cubefacesize = 1024; // 6 faces, ? // "X:\vr\tape1\0000x2048.png" // for 60hz render we may want to use float camera percision, not available for ui. // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/" if (Environment.ProcessorCount < 8) //cubefacesize = 64; // 6 faces, ? // fast gif? cubefacesize = 1024; // 6 faces, ? // can we keep fast fps yet highp? // can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm? //const int cubefacesize = 128; // 6 faces, ? //var cubecameraoffsetx = 256; var cubecameraoffsetx = 400; //var uizoom = 0.1; //var uizoom = cubefacesize / 128f; var uizoom = 128f / cubefacesize; Native.css.style.backgroundColor = "darkcyan"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); (Native.body.style as dynamic).webkitUserSelect = "text"; IHTMLCanvas shader1canvas = null; //return; // Earth params //var radius = 0.5; //var radius = 1024; //var radius = 2048; //var radius = 512; //var radius = 256; //var radius = 400; // can we have not fly beyond moon too much? //var radius = 500; var radius = 480; //var 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/x360stereomidnightsun/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg ) var far = 0xffffff; 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)); //scene.add(new THREE.AmbientLight(0xffffff)); //scene.add(new THREE.AmbientLight(0xaaaaaa)); //scene.add(new THREE.AmbientLight(0xcccccc)); //scene.add(new THREE.AmbientLight(0xeeeeee)); scene.add(new THREE.AmbientLight(0xffffff)); //var light = new THREE.DirectionalLight(0xffffff, 1); //// sun should be beyond moon ////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance); ////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); //// where shall the light source be to see half planet? //light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); //scene.add(light); //var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument(); //var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument(); //var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument(); //new IHTMLHorizontalRule { }.AttachToDocument(); // whats WebGLRenderTargetCube do? // WebGLRenderer preserveDrawingBuffer var renderer0 = new THREE.WebGLRenderer( new { //antialias = true, alpha = true, preserveDrawingBuffer = true } ); // https://github.com/mrdoob/three.js/issues/3836 // the construct. white bg //renderer0.setClearColor(0xfffff, 1); //renderer0.setClearColor(0x0, 1); renderer0.setClearColor(0x0, 0); //renderer.setSize(window.Width, window.Height); renderer0.setSize(cubefacesize, cubefacesize); //renderer0.domElement.AttachToDocument(); //rendererPX.domElement.style.SetLocation(0, 0); //renderer0.domElement.style.SetLocation(4, 4); // top // http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene // need a place to show the cubemap face to GUI // how does the stereo OTOY do it? // https://www.opengl.org/wiki/Sampler_(GLSL) // http://www.richardssoftware.net/Home/Post/25 // [+X, –X, +Y, –Y, +Z, –Z] fa // move up //camera.position.set(-1200, 800, 1200); //var cameraoffset = new THREE.Vector3(0, 15, 0); // can we aniamte it? //var cameraoffset = new THREE.Vector3(0, 800, 1200); // can we have linear animation fromcenter of the map to the edge and back? // then do the flat earth sun orbit? var cameraoffset = new THREE.Vector3( // left? -512, // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1024, //1200 0 // can we hover top of the map? ); // original vieworigin //var cameraoffset = new THREE.Vector3(-1200, 800, 1200); // whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk? var maxfps = 60; //var maxlengthseconds = 60; var maxlengthseconds = 120; var maxframes = maxlengthseconds * maxfps; var frameIDanimation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "frameIDanimation", @checked = false }.AttachToDocument(); // whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk? var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 0, title = "frameIDslider" }.AttachToDocument(); //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 = -32, max = 32, valueAsNumber = 0, title = "camerax" }.AttachToDocument(); camerax.css.after.contentText = "x: "; new IHTMLBreak { }.AttachToDocument(); //camerax.style.borderLeft = "1em solid red"; // 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 = -32, max = 32, valueAsNumber = 0, title = "cameray" }.AttachToDocument(); cameray.css.after.contentText = "y: "; new IHTMLBreak { }.AttachToDocument(); // we wont be going to orbit //new IHTMLBreak { }.AttachToDocument(); //var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument(); //new IHTMLHorizontalRule { }.AttachToDocument(); //var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); //var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -2048 / 2, max = 0 + 2048 / 2, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); cameraz.css.after.contentText = "z: "; // for render server var fcamerax = 0.0; var fcameray = 0.0; var fcameraz = 0.0; new IHTMLHorizontalRule { }.AttachToDocument(); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo // not used for this example tho... var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -180, max = 180, valueAsNumber = 0, title = "itemRotation" }.AttachToDocument(); var spriteOffset = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 11, valueAsNumber = 0, title = "spriteOffset" }.AttachToDocument(); //var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -90, max = 90, valueAsNumber = 33, title = "itemRotation" }.AttachToDocument(); //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; // we wont be going to orbit //if (cameray.valueAsNumber < cameray.max) // camerayHigh.valueAsNumber = camerayHigh.min; //if (camerayHigh.valueAsNumber > camerayHigh.min) // cameray.valueAsNumber = cameray.max; //if (cameray.valueAsNumber == cameray.max) // cy = camerayHigh; cameraoffset = new THREE.Vector3( // left? 1.0 * (camerax + fcamerax), // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1.0 * (cy + fcameray), //1200c 1.0 * (cameraz + fcameraz) // can we hover top of the map? ); }; #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 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 // lets have the item twice the cube item size. and offset -0.5 to recenter. // this wont work as we are cloning the buffer for now! //var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize * 2); var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPXitem.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 2); canvasPXitem.canvas.title = "item"; canvasPXitem.canvas.AttachToDocument(); canvasPXitem.canvas.style.transformOrigin = "0 0"; canvasPXitem.canvas.style.transform = "scale(" + uizoom + ")"; canvasPXitem.canvas.style.border = "1px solid yellow"; //canvasPXitem.fillText("hello", 1, 1, cubefacesize); //canvasPXitem.drawImage( // //new IHTMLPre { "hello" } // new IHTMLDiv { "hello world. can we draw html into 360 VR yet?" }, 0, 0, cubefacesize, cubefacesize //); // http://www.w3schools.com/tags/canvas_fillstyle.asp canvasPXitem.fillStyle = "red"; // too big? //canvasPXitem.fillRect( // x: cubefacesize / 3, // y: cubefacesize / 4, // w: cubefacesize / 3, // h: cubefacesize / 2 //); // canvasPXitem.fillRect( // x: (cubefacesize - cubefacesize / 6) / 2, // y: (cubefacesize - cubefacesize / 3) / 2, // w: cubefacesize / 6, // h: cubefacesize / 3 //); #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 // bots cannot get a bigger mp4 from yt, and vrideo renders 2k on gearvr. 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); var frame2 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument(); frame2.style.height = "270px"; frame2.style.width = "480px"; frame2.style.SetLocation( 8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 * 2 + 16 * 2, 8 + (int)(uizoom * cubefacesize + 8) * 3); #region DirectoryEntry var dir = default(DirectoryEntry); new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); }; frame0.style.cursor = IStyle.CursorEnum.pointer; frame0.title = "save frame"; frame0.onclick += delegate { // http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf // A method of creating synthetic stereoscopic panoramic images that can be implemented //in most rendering packages has been presented. If single panoramic pairs can be created //then stereoscopic panoramic movies are equally possible giving rise to the prospect of //movies where the viewer can interact with, at least with regard to what they choose to look //at.These images can be projected so as to engage the two features of the human visual //system that assist is giving us a sense of immersion, the feeling of “being there”. That is, //imagery that contains parallax information as captured from two horizontally separated eye //positions (stereopsis)and imagery that fills our peripheral vision.The details that define //how the two panoramic images should be created in rendering packages are provided, in //particular, how to precisely configure the virtual cameras and control the distance to zero //parallax. // grab a frame if (dir == null) { // 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>); // "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj" // asus will hang // https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a // can we get one frame into vr? // cube: mesh to cast shadows //{ // var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); // var floor2 = new THREE.Mesh(planeGeometry0, // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) // new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 }) // ); // floor2.position.set(0, 0, -cubefacesize / 2); // floor2.AttachTo(scene); //} //{ // var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); // var floor2 = new THREE.Mesh(planeGeometry0, // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) // new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff }) // ); // floor2.position.set(-cubefacesize / 2, 0, 0); // floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); // floor2.AttachTo(scene); //} //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var texPXitem = new THREE.Texture( //shader1canvas canvasPXitem.canvas ) { needsUpdate = true }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = texPXitem, transparent = true, alphaTest = 0.5 //ambient = 0x00ff00, //color = 0x00ff00 }) ); //floor2.position.set(0, 0, -cubefacesize * 0.55); floor2.AttachTo(scene); applycameraoffset += delegate { texPXitem.needsUpdate = true; //floor2.position.set(-cubefacesize * 0.5, 0, 0); //floor2.position.set(-cubefacesize * 0.33, 0, 0); // floor2.position.set(-cubefacesize * 0.25, 0, 0); //floor2.position.set(-cubefacesize * 0.225, 0, 0); floor2.position.set(-cubefacesize * 0.23, 0, 0); // too close! //floor2.position.set(-cubefacesize * 0.20, 0, 0); floor2.rotation.set(0, 0, 0); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2 + radians(itemRotation.valueAsNumber)); }; // 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 new IHTMLBreak { }.AttachToDocument(); var iskybox2 = new HTML.Images.FromAssets._2massAllskyGAMMA(); var iskybox1 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs(); var hideskybox1 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox1", @checked = true }.AttachToDocument(); var hideskybox2 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox2", @checked = false }.AttachToDocument(); #region drawStereoFrame Func<CanvasRenderingContext2D, Task> drawStereoFrame = async canvasTB => { //var xIPD = 4.0; var xIPD = 6.0; // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203/x360stereomidnightsun // fake skybox? canvasTB.fillStyle = "darkcyan"; canvasTB.fillRect(0, 0, c.width, c.height); //canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2); //canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2); // 12 frames in total. lets add em all // can we add a secondary stereo frame ? at 45deg? var offsetrotation = 360 / 12; hideskybox1.@checked = true; hideskybox2.@checked = false; // mono bg! floor2.visible = false; fcamerax = 0; await Native.window.async.onframe; await Native.window.async.onframe; canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2); canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2); // keep only bg. hide stereo sprite floor2.visible = true; //await Native.window.async.onframe; // we need our stereo item frame thanks. no bg. hideskybox1.@checked = true; hideskybox2.@checked = true; await Native.window.async.onframe; //fcamerax = -xIPD; //await Native.window.async.onframe; //var stereoT = new IHTMLImage { src = gl.canvas.toDataURL() }; //fcamerax = +xIPD; //await Native.window.async.onframe; //var stereoB = new IHTMLImage { src = gl.canvas.toDataURL() }; ////await Native.window.async.onframe; //await stereoB.async.oncomplete; // we now have a stereo sprite. // can we rotate it on top of the background? // 8K fulldome is a resolution of 8192×8192 // 8K UHD is a resolution of 7680 × 4320 (33.2 megapixels) // 8192×4320 t // Digital video formats with resolutions of 4K (3840×2160) and 8K (7680×4320) // WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost ? for (int stereoframei = 0; stereoframei < 12; stereoframei++) { spriteOffset.valueAsNumber = stereoframei; Console.WriteLine(new { stereoframei }); double ioffsetdeg = offsetrotation * stereoframei; ioffsetdeg += (degrees(frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2)); // follow the moon? //stars.rotateOnAxis(new THREE.Vector3(0, -1, 0), // frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2 //); var ipxoffset = (int)Math.Floor(c.width * ioffsetdeg / 360); ipxoffset = ipxoffset % c.width; fcamerax = -xIPD; await Native.window.async.onframe; var stereoT = gl.canvas; canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, ipxoffset, 0, c.width, c.height / 2); canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, -c.width + ipxoffset, 0, c.width, c.height / 2); fcamerax = +xIPD; await Native.window.async.onframe; var stereoB = gl.canvas; canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, ipxoffset, c.height / 2, c.width, c.height / 2); canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, -c.width + ipxoffset, c.height / 2, c.width, c.height / 2); } //var canvasTB8K = new CanvasRenderingContext2D(c.width * 2, c.height * 2); //canvasTB8K.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height); //canvasTB8K.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height); // https://www.reddit.com/r/GearVR/comments/2vrfyu/id_suggest_makers_of_360_videos_make_them_the/ // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203 // can we actually watch stereo _TB images on gearVR? }; #endregion #region stero // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 new IHTMLButton { "make me a stero TB image " }.AttachToDocument().With( async e => { // http://www.vrideo.com/watch/ALdE7mm // https://www.youtube.com/watch?v=S3iTPxMIlCI var onclick = e.async.onclick; while (await onclick) { // keep it 4K, as hw, yt is not ready for 60fps 8K! var canvasTB = new CanvasRenderingContext2D(c.width, c.height); drawStereoFrame(canvasTB); // gearVR will get a black screen // //frame2.src = canvasTB8K.canvas.toDataURL(); frame2.src = canvasTB.canvas.toDataURL(); onclick = e.async.onclick; //while (!onclick.IsCompleted) //{ // await Task.Delay(1000 / 30); // frame0.src = f0.src; // await Task.Delay(1000 / 30); // frame0.src = f1.src; //} } } ); #endregion #region render 60hz 30sec new IHTMLButton { //"render 60hz 30sec" //$"render {maxfps}hz {maxlengthseconds}sec" "render " + new {maxfps} + "hz " + new {maxlengthseconds} + "sec" }.AttachToDocument().onclick += async e => { e.Element.disabled = true; //var canvasTB = new CanvasRenderingContext2D(c.width * 2, c.height * 2); var canvasTB = new CanvasRenderingContext2D(c.width, c.height); 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; //frameIDanimation.@checked = true; frameIDslider.valueAsNumber = -1; // allow the animation values to sink in //vsync = new TaskCompletionSource<object>(); //await vsync.Task; goto beforeframe; // parallax offset? await_nextframe: var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".jpg"; status = "rendering... " + new { filename }; await drawStereoFrame(canvasTB); //var xIPD = 4.0; //// left eye //fcamerax = -xIPD; //vsync = new TaskCompletionSource<object>(); //await vsync.Task; //var f0 = new IHTMLImage { src = gl.canvas.toDataURL() }; //// right eye //fcamerax = +xIPD; //vsync = new TaskCompletionSource<object>(); //await vsync.Task; //var f1 = new IHTMLImage { src = gl.canvas.toDataURL() }; //await f1.async.oncomplete; //canvasTB.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height); //canvasTB.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height); // 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) { frame2.src = canvasTB.canvas.toDataURL(); await Task.Delay(500); } else await dir.WriteAllBytes(filename, canvasTB); //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 += 60; else frameIDslider.valueAsNumber++; beforeframe: // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); // fcamerax = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); // some shaders need to know where the camera is looking from. can we tell them? //fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); //// up //fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); // cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f))); // up //fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcamerax += (1.0 / 60.0); //fcamerax += (1.0 / 60.0) * 120; // 60hz 30sec if (frameIDslider.valueAsNumber < maxframes) { // 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 new { }.With( async delegate { var tex1 = new the_midnight_sun_by_isilmetriel { }; await tex1.async.oncomplete; // first one is 124, while others is 123? var tex1w = 123; //var tex1w = 120; var tex1h = 626; //canvasPXitem.drawImage( // tex1, 2, 2, tex1w, tex1h, 0, 0, tex1w, tex1h // ); // how long until jsc can upstream small updates to code? //// canvasPXitem.drawImage( //// (IHTMLCanvas)renderer0.domElement, //// sx: (cubefacesize - cubefacesize / 6) / 2, //// sy: (cubefacesize - cubefacesize / 3) / 2, //// sw: cubefacesize / 6, //// sh: cubefacesize / 3, //// dx: (cubefacesize - cubefacesize / 6) / 2, //// dy: (cubefacesize - cubefacesize / 3) / 2, //// dw: cubefacesize / 6, //// dh: cubefacesize / 3 ////); await iskybox2.async.oncomplete; var bytes1 = await iskybox1.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(iskybox1.width, iskybox1.height); cc.bytes = bytes1; //s.image = cc; //s.needsUpdate = true; var skybox1_material = new THREE.MeshBasicMaterial( new { //map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src), map = new THREE.Texture { image = cc, needsUpdate = true }, side = THREE.BackSide, transparent = true }); var skybox1 = new THREE.Mesh( //new THREE.SphereGeometry(far * 0.92, 64, 64), //new THREE.SphereGeometry(far * 0.80, 64, 64), // still zfighting //new THREE.SphereGeometry(far * 0.50, 64, 64), // the other option is to have a single bg and blend on tht. this is just a rotation visualization. new THREE.SphereGeometry(far * 0.30, 64, 64), skybox1_material ); // http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity //(stars_material as dynamic).opacity = 0.5; hideskybox1.onchange += delegate { skybox1.visible = !hideskybox1.@checked; }; skybox1.visible = !hideskybox1.@checked; scene.add(skybox1); applycameraoffset += delegate { if (frameIDanimation.@checked) { itemRotation.valueAsNumber = (frameIDslider.valueAsNumber / 2) % 360 - 180; hideskybox1.@checked = (frameIDslider.valueAsNumber / 2 + 180) % 720 < 360; } }; // target bg var skybox2 = new THREE.Mesh( new THREE.SphereGeometry(far * 0.95, 64, 64), new THREE.MeshBasicMaterial( new { map = new THREE.Texture { image = iskybox2, needsUpdate = true }, side = THREE.BackSide, transparent = true }) ); skybox2.AttachTo(scene).With( stars => { applycameraoffset += delegate { skybox2.visible = !hideskybox2.@checked; skybox1.rotation.set(0, 0, 0); // spin skybox1.rotateOnAxis(new THREE.Vector3(0, -1, 0), frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2 ); // reset stars.rotation.set(0, 0, 0); // slow rotate in place stars.rotateOnAxis(new THREE.Vector3(1, 0, 0), frameIDslider.valueAsNumber / 3600.0 * Math.PI * 2 ); // follow the moon? stars.rotateOnAxis(new THREE.Vector3(0, -1, 0), frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2 ); }; } ); // can we get our stereo sprite this way? // do we get clean tiles with transparency? // on x83 on frame0 we were able to hide skybox. how? //hideskybox2.onchange += delegate //{ // skybox2.visible = !hideskybox2.@checked; //}; //skybox2.visible = !hideskybox2.@checked; Console.WriteLine("skybox added"); //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(); // spriteOffset canvasPXitem.drawImage( tex1, //2px black border! //((tex1w + 4) * spriteOffset.valueAsNumber) + 2, ((tex1w + 2) * spriteOffset.valueAsNumber) + 3, 2, tex1w, tex1h, // dest (cubefacesize - tex1w) / 2, (cubefacesize - tex1h) / 2, tex1w, tex1h ); //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? // hide everything else // inversion effect? //// if (hideskybox1.@checked) //// skybox1.visible = true; //// else //// skybox1.visible = false; //// floor2.visible = false; //// renderer0.render(scene, cameraPX); //// //canvasPXitem.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203 // can we draw from that special image? //canvasPXitem.drawImage( // tex1, 2, 2, 124, 630 - 4, 0, 0, 124, 626 //); //// canvasPXitem.drawImage( //// (IHTMLCanvas)renderer0.domElement, //// sx: (cubefacesize - cubefacesize / 6) / 2, //// sy: (cubefacesize - cubefacesize / 3) / 2, //// sw: cubefacesize / 6, //// sh: cubefacesize / 3, //// dx: (cubefacesize - cubefacesize / 6) / 2, //// dy: (cubefacesize - cubefacesize / 3) / 2, //// dw: cubefacesize / 6, //// dh: cubefacesize / 3 ////); //// skybox1.visible = !hideskybox1.@checked; //// floor2.visible = true; #region x canvasPX.clearRect(0, 0, cubefacesize, cubefacesize); // upside down? renderer0.render(scene, cameraPX); canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); canvasNX.clearRect(0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNX); canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region z canvasPZ.clearRect(0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraPZ); canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); canvasNZ.clearRect(0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNZ); canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region y canvasPY.clearRect(0, 0, cubefacesize, cubefacesize); 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(); canvasNY.clearRect(0, 0, cubefacesize, cubefacesize); 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); } ); //if (cameraz.valueAsNumber == 0) gl.clearColor(0, 0, 0, 0); //else //gl4K.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360 pass.Paint_Image( 0, 0, 0, 0, 0 //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); //paintsw.Stop(); // what does it do? 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); }
// var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 ); static THREE.Vector3[] hilbert3D( THREE.Vector3 center, double size = 25.0, int iterations = 1, int v0 = 0, int v1 = 1, int v2 = 2, int v3 = 3, int v4 = 4, int v5 = 5, int v6 = 6, int v7 = 7) { // 0:71ms {{ i = 0, x = -18.75, y = 18.75, z = -18.75 }} // Default Vars var half = size / 2; var vec_s = new[] { new THREE.Vector3(center.x - half, center.y + half, center.z - half), new THREE.Vector3(center.x - half, center.y + half, center.z + half), new THREE.Vector3(center.x - half, center.y - half, center.z + half), new THREE.Vector3(center.x - half, center.y - half, center.z - half), new THREE.Vector3(center.x + half, center.y - half, center.z - half), new THREE.Vector3(center.x + half, center.y - half, center.z + half), new THREE.Vector3(center.x + half, center.y + half, center.z + half), new THREE.Vector3(center.x + half, center.y + half, center.z - half) }; var vec = new[] { vec_s[v0], vec_s[v1], vec_s[v2], vec_s[v3], vec_s[v4], vec_s[v5], vec_s[v6], vec_s[v7] }; // Recurse iterations //if (--iterations >= 0) if (iterations > 0) { iterations--; var tmp = new[] { hilbert3D(vec[0], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1), hilbert3D(vec[1], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3), hilbert3D(vec[2], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3), hilbert3D(vec[3], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5), hilbert3D(vec[4], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5), hilbert3D(vec[5], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7), hilbert3D(vec[6], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7), hilbert3D(vec[7], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7) }; // Return recursive call return(tmp.SelectMany(x => x).ToArray()); } // Return complete Hilbert Curve. return(vec); }
void onDocumentMouseDown(Event arg) { if (!IsActive) return; MouseEvent e = arg.As<MouseEvent>(); e.PreventDefault(); THREE.Vector3 vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); THREE.Intersection[] intersects = raycaster.intersectObjects(allObjects); if (intersects.Length > 0 ) { THREE.Intersection interSec = intersects[0]; THREE.Mesh m = interSec.Object as THREE.Mesh; if (m != null) { controls.enabled = false; selected = m; intersects = raycaster.intersectObject(plane); offset.copy(interSec.point).sub(plane.position); Container.Style.Cursor = Cursor.Move; } } }
// Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P public Application(IApp page) { //{ var ref0 = typeof(dirt_tx); } { var ref0 = new dirt_tx { }; } //{ var ref0 = typeof(MarineCv2_color); } { var ref0 = new MarineCv2_color { }; } // http://www.realitymeltdown.com/WebGL3/character-controller.html // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127 //Native.css Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; //Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLSpeedBlendCharacter Application.cs 46 // used by, for? var clock = new THREE.Clock(); //var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 }; var scene = new THREE.Scene(); var skyScene = new THREE.Scene(); scene.fog = new THREE.Fog(0xB0CAE1, 1000, 20000); scene.add(new THREE.AmbientLight(0xaaaaaa)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; scene.add(light); #region renderer var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; renderer.domElement.AttachToDocument(); #endregion // this will mess up // three.OrbitControls.js // onMouseMove //new IStyle(renderer.domElement) //{ // position = IStyle.PositionEnum.absolute, // left = "0px", // top = "0px", // right = "0px", // bottom = "0px", //}; //new { }.With( // async delegate // { // await Native.window.async.onresize; // // if the reload were fast, then we could actually do that:D // Native.document.location.reload(); // } //); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. //var planeGeometry = new THREE.PlaneGeometry(1000, 1000); //var planeMaterial = new THREE.MeshLambertMaterial( // new // { // map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.dirt_tx().src), // color = 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; // parent.scale.set(100, 100, 100); // scene.add(parent); //} var random = new Random(); var meshArray = new List <THREE.Mesh>(); //var geometry = new THREE.CubeGeometry(1, 1, 1); var geometry = new THREE.BoxGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { var ii = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial( new { color = (Convert.ToInt32(0xffffff * random.NextDouble())) })); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new 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); scene.add(blendMesh); //var characterController = new THREE.CharacterController(blendMesh); // run blendMesh.setSpeed(1.0); var radius = blendMesh.geometry.boundingSphere.radius; Native.document.title = new { radius }.ToString(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); camera.position.set(0.0, radius * 3, radius * 3.5); var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var controls = new THREE.OrbitControls(camera); //controls.noPan = true; var loader = new THREE.JSONLoader(); loader.load(new Models.ground().Content.src, new Action <THREE.Geometry, THREE.Material[]>( (xgeometry, materials) => { // cannot see the ground? var ground = new THREE.Mesh(xgeometry, materials[0]); ground.scale.set(20, 20, 20); ground.receiveShadow = true; ground.castShadow = true; scene.add(ground); } ) ); #region createSky // gearvr has photos360 app var urls = new[] { new px().src, new nx().src, new py().src, new ny().src, new pz().src, new nz().src, }; var textureCube = THREE.ImageUtils.loadTextureCube(urls); dynamic shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; // We're inside the box, so make sure to render the backsides // It will typically be rendered first in the scene and without depth so anything else will be drawn in front var material = new THREE.ShaderMaterial(new { fragmentShader = shader.fragmentShader, vertexShader = shader.vertexShader, uniforms = shader.uniforms, depthWrite = false, side = THREE.BackSide }); // THREE.CubeGeometry has been renamed to THREE.BoxGeometry // The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values. //var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material); var skyMesh = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material); //skyMesh.renderDepth = -10; skyScene.add(skyMesh); #endregion #region onframe Native.window.onframe += delegate { var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); blendMesh.updateSkeletonHelper(); } controls.center.copy(blendMesh.position); controls.center.y += radius * 2.0; controls.update(); var camOffset = camera.position.clone().sub(controls.center); camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone().add(camOffset); skyCamera.rotation.copy(camera.rotation); renderer.clear(); renderer.render(skyScene, skyCamera); renderer.render(scene, camera); }; #endregion #region onresize new { }.With( async delegate { do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); } while (await Native.window.async.onresize); } ); #endregion } ) ); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo //0001 02000178 ScriptCoreLib::ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProvider //script: error JSC1000: Java : Opcode not implemented: stind.i1 at ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProviderByMahmood.CreatePaddedBuffer //internal compiler error at method // script: error JSC1000: Java : //BCL needs another method, please define it. //Cannot call type without script attribute : //System.Threading.Monitor for Void Enter(System.Object, Boolean ByRef) used at //WebGLVRCreativeLeadership.Activities.ApplicationWebServiceActivity+<>c__DisplayClass24.<CreateServer>b__29 at offset 0018. //If the use of this method is intended, an implementation should be provided with the attribute[Script(Implements = typeof(...)] set.You may have mistyped it. // I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050) //I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050) public Application(com.abstractatech.apps.vr.HTML.Pages.IApp page) { #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { ChromeTCPServer.TheServerWithAppWindow.Invoke(com.abstractatech.apps.vr.HTML.Pages.AppSource.Text); return; } #endregion // https://play.google.com/store/apps/details?id=com.abstractatech.vr // could we display LAN UDP notifications too. like // which youtube video is playing? Native.body.Clear(); Native.body.style.margin = "0px"; Native.body.style.backgroundColor = "black"; // https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652 // hResolution: 1920, //vResolution: 1080, // "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln" // http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0 // https://github.com/troffmo5/OculusStreetView // http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect // http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/ // http://stemkoski.github.io/Three.js/Sprites.html // http://stemkoski.github.io/Three.js/Texture-Animation.html // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html // http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html var window = Native.window; var fov = 70.0; var camera = new THREE.PerspectiveCamera(fov, window.aspect, 1, 1100); var target = new THREE.Vector3(0, 0, 0); //(camera as dynamic).target = target; var scene = new THREE.Scene(); //scene.add(new THREE.AmbientLight(0xffffff)); //scene.add(new THREE.AmbientLight(0xafafaf)); // http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/ // http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect scene.add(new THREE.AmbientLight(0x2f2f2f)); //var light = new THREE.DirectionalLight(0xffffff, 1.0); #region light var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); //var lightOffset = new THREE.Vector3(0, 1000, 2500.0); var lightOffset = new THREE.Vector3( 2000, 700, // lower makes longer shadows 700.0 ); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; scene.add(light); #endregion var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), new THREE.MeshBasicMaterial(new { map = THREE.ImageUtils.loadTexture( new _2294472375_24a3b8ef46_o().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src ) })); mesh.scale.x = -1; scene.add(mesh); #region sprite2 var crateTexture = THREE.ImageUtils.loadTexture( new ChromeCreativeLeadership.HTML.Images.FromAssets.Mockup().src ); var crateMaterial = new THREE.SpriteMaterial( new { map = crateTexture, useScreenCoordinates = false, //color = 0xff0000 color = 0xffffff } ); var sprite2 = new THREE.Sprite(crateMaterial); //floor //sprite2.position.set(0, -200, 0); // left //sprite2.position.set(200, 50, 0); sprite2.position.set(0, 0, 200); //sprite2.position.set(-100, 0, 0); sprite2.scale.set( _2294472375_24a3b8ef46_o.ImageDefaultWidth * 0.08, _2294472375_24a3b8ef46_o.ImageDefaultHeight * 0.08, //64, 64, 1.0); // imageWidth, imageHeight scene.add(sprite2); #endregion #region ColladaAudiA4 new ColladaAudiA4().Source.Task.ContinueWithResult( dae => { // 90deg //dae.rotation.x = -Math.Cos(Math.PI); //dae.scale.x = 30; //dae.scale.y = 30; //dae.scale.z = 30; //dae.position.z = 65; // right dae.position.z = -20; dae.position.x = -100; dae.position.y = -90; // jsc, do we have ILObserver available yet? dae.scale.x = 1.0; dae.scale.y = 1.0; dae.scale.z = 1.0; //dae.position.y = -80; scene.add(dae); //oo.Add(dae); } ); #endregion #region nexus7 new nexus7().Source.Task.ContinueWithResult( dae => { // 90deg dae.rotation.x = -Math.Cos(Math.PI); //dae.scale.x = 30; //dae.scale.y = 30; //dae.scale.z = 30; //dae.position.z = 65; // left //dae.position.x = 200; dae.position.z = -100; dae.position.y = -50; //dae.position.z = 100; // jsc, do we have ILObserver available yet? dae.scale.x = 13.5; dae.scale.y = 13.5; dae.scale.z = 13.5; //dae.position.y = -80; scene.add(dae); //oo.Add(dae); } ); #endregion // // DK2 // hResolution: 1920, //vResolution: 1080, var renderer = new THREE.WebGLRenderer(); renderer.setSize(1920, 1080); // broken? var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 }; var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }; var HMD = new OculusRiftEffectOptions { hResolution = window.Width, vResolution = window.Height, hScreenSize = 0.12576, vScreenSize = 0.07074, interpupillaryDistance = 0.0635, lensSeparationDistance = 0.0635, eyeToScreenDistance = 0.041, // j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0]; //distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 }, distortionK = distortionK, // j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0]; //chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 } chromaAbParameter = chromaAbParameter }; var effect = new THREE.OculusRiftEffect( renderer, new { worldScale = 100, //HMD } ); effect.setSize(1920, 1080); renderer.domElement.AttachToDocument(); //renderer.domElement.style.position = IStyle.PositionEnum.absolute; renderer.domElement.style.SetLocation(0, 0); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; // x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs #region onresize new { }.With( async delegate { retry: var s = (double)Native.window.Width / 1920.0; Native.document.body.style.transform = "scale(" + s + ")"; Native.document.body.style.transformOrigin = "0% 0%"; await Native.window.async.onresize; goto retry; } ); #endregion //#region onresize //Native.window.onresize += // delegate // { // camera.aspect = Native.window.aspect; // camera.updateProjectionMatrix(); // renderer.setSize(window.Width, window.Height); // effect.setSize(window.Width, window.Height); // }; //#endregion //Native.document.body.onmousewheel += // e => // { // fov -= e.WheelDirection * 5.0; // camera.projectionMatrix.makePerspective(fov, // (double)window.Width / window.Height, 1, 1100); // }; var lon0 = -45.0; var lon1 = 0.0; var lon = new sum( () => lon0, () => lon1 ); var lat0 = 0.0; var lat1 = 0.0; // or could we do it with byref or pointers? var lat = new sum( () => lat0, () => lat1 ); var phi = 0.0; var theta = 0.0; var camera_rotation_z = 0.0; var labove = new NotificationLayout(); #region sprite2 above { labove.Message.innerText = "VR CREATIVE LEADERSHIP"; labove.layout.style.background = ""; new { }.With( async delegate { retry: // make it blink. gaze cursor is on it? labove.box.style.background = "rgba(255,255,0,0.7)"; labove.box.setAttribute("invoke", "onmutation1"); await Task.Delay(1500); // is mutation observer noticing it? labove.box.style.background = "rgba(255,255,255,0.7)"; labove.box.setAttribute("invoke", "onmutation2"); await Task.Delay(1500); goto retry; } ); var c = labove.AsCanvas(); var xcrateTexture = new THREE.Texture(c); // like video texture Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; }; var xcrateMaterial = new THREE.SpriteMaterial( new { map = xcrateTexture, useScreenCoordinates = false, //color = 0xff0000 color = 0xffffff } ); var xsprite2 = new THREE.Sprite(xcrateMaterial); //floor //sprite2.position.set(0, -200, 0); // left xsprite2.position.set(200, 0, 0); //sprite2.position.set(0, 0, 200); //sprite2.position.set(-100, 0, 0); xsprite2.scale.set( c.width * 0.5, c.height * 0.5, //64, 64, 1.0); // imageWidth, imageHeight scene.add(xsprite2); } #endregion //var lineTo = new List<THREE.Vector3>(); var others = new { ui = default(NotificationLayout), canvas = default(IHTMLCanvas), map = default(THREE.Texture), sprite = default(THREE.Sprite) }.ToEmptyList(); #region add Action <NotificationLayout> add = ui => { ui.layout.style.background = ""; var canvas = ui.AsCanvas(); var index = others.Count; //ui.Message += new { index }; //ui.Message.innerText += new { index }; //lbelow0.Message = new { THREE.REVISION }.ToString(); // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined ) var map = new THREE.Texture(canvas); map.minFilter = THREE.LinearFilter; // like video texture var xcrateMaterial = new THREE.SpriteMaterial( new { map, useScreenCoordinates = false, //color = 0xff0000 color = 0xffffff } ); var sprite = new THREE.Sprite(xcrateMaterial); //floor //sprite2.position.set(0, -200, 0); // left middle //sprite2.position.set(200, 0, 0); //sprite.position.set(250, -50, 50); //lineTo.Add(sprite.position); //sprite2.position.set(0, 0, 200); //sprite2.position.set(-100, 0, 0); sprite.scale.set( canvas.width * 0.5, canvas.height * 0.5, //64, 64, 1.0); // imageWidth, imageHeight scene.add(sprite); others.Add( new { ui, canvas, map, sprite } ); var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { // can we get some of the crazy c++ template bitmapbuffer code from the past? map.needsUpdate = true; var offset = Math.PI * 2 * ((double)(index + 1) / others.Count); sprite.position.x = 300; sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120; sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120; }; }; #endregion #region NotificationLayout add( new NotificationLayout { // keep attributes around? // like we do with XElement sync? Icon = new _0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With( x => { x.style.width = "96px"; x.style.height = "96px"; } ), Message = "Advanced Mechanics by Portugal Design Lab" } ); add( new NotificationLayout { // keep attributes around? // like we do with XElement sync? Icon = new _42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With( x => { x.style.width = "96px"; x.style.height = "96px"; } ), Message = "Face Value by mshariful" } ); add( new NotificationLayout { // keep attributes around? // like we do with XElement sync? Icon = new _371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With( x => { x.style.width = "96px"; x.style.height = "96px"; } ), Message = "Mind Wall. by Sumit Goski" } ); #endregion #region lines { var geometry = new THREE.Geometry { // how can we keep streaming verticies data points to gpu? vertices = others.SelectMany( lineTo => new[] { new THREE.Vector3(200, 0, 0), lineTo.sprite.position } ).ToArray() // https://github.com/mrdoob/three.js/wiki/Updates // http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render //verticesNeedUpdate = true }; Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; }; var o = new THREE.Line(geometry, new THREE.LineDashedMaterial( new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 } ), THREE.LineStrip); //objects.Add(o); scene.add(o); } #endregion Native.window.onframe += ee => { // look we are having html in 3D in VR! //if (Native.document.pointerLockElement == Native.document.body) // lon += 0.00; //else // lon += 0.01; //lat = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = 500 * Math.Sin(phi) * Math.Cos(theta); target.y = 500 * Math.Cos(phi); target.z = 500 * Math.Sin(phi) * Math.Sin(theta); camera.lookAt(target); camera.rotation.z += camera_rotation_z; //renderer.render(scene, camera); effect.render(scene, camera); }; // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html // http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove var compassHeadingOffset = 0.0; var compassHeadingInitialized = 0; #region compassHeading // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs Native.window.ondeviceorientation += dataValues => { // Convert degrees to radians var alphaRad = dataValues.alpha * (Math.PI / 180); var betaRad = dataValues.beta * (Math.PI / 180); var gammaRad = dataValues.gamma * (Math.PI / 180); // Calculate equation components var cA = Math.Cos(alphaRad); var sA = Math.Sin(alphaRad); var cB = Math.Cos(betaRad); var sB = Math.Sin(betaRad); var cG = Math.Cos(gammaRad); var sG = Math.Sin(gammaRad); // Calculate A, B, C rotation components var rA = -cA * sG - sA * sB * cG; var rB = -sA * sG + cA * sB * cG; var rC = -cB * cG; // Calculate compass heading var compassHeading = Math.Atan(rA / rB); // Convert from half unit circle to whole unit circle if (rB < 0) { compassHeading += Math.PI; } else if (rA < 0) { compassHeading += 2 * Math.PI; } /* * Alternative calculation (replacing lines 99-107 above): * * var compassHeading = Math.atan2(rA, rB); * * if(rA < 0) { * compassHeading += 2 * Math.PI; * } */ // Convert radians to degrees compassHeading *= 180 / Math.PI; // Compass heading can only be derived if returned values are 'absolute' // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs //Native.document.body.innerText = new { compassHeading }.ToString(); if (compassHeadingInitialized > 0) { lon1 = compassHeading - compassHeadingOffset; } else { compassHeadingOffset = compassHeading; compassHeadingInitialized++; } }; #endregion #region gamma Native.window.ondeviceorientation += //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString(); //e => lon = e.gamma; e => { lat1 = e.gamma; // after servicing a running instance would be nice // either by patching or just re running the whole iteration in the backgrou camera_rotation_z = e.beta * 0.02; }; #endregion #region camera rotation var old = new { clientX = 0, clientY = 0 }; Native.document.body.ontouchstart += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; old = n; }; Native.document.body.ontouchmove += e => { var n = new { e.touches[0].clientX, e.touches[0].clientY }; e.preventDefault(); lon0 += (n.clientX - old.clientX) * 0.2; lat0 -= (n.clientY - old.clientY) * 0.2; old = n; }; Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon0 += e.movementX * 0.1; lat0 -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { //drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); //drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion Native.body.onmousewheel += e => { camera_rotation_z += 0.1 * e.WheelDirection;; }; // https://developer.android.com/training/system-ui/immersive.html }
/// <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://blog.cuartodejuegos.es/wp-content/uploads/2011/06/Story-cubes-caras.jpg // http://css-eblog.com/3d/box.html var w = Native.window.Width; var h = Native.window.Height; // var world, ground, var timeStep = 1 / 60.0; //diceRigid, dice, //camera, scene, renderer, floorObj, //startDiceNum = 3, var cubeSize = 3.0; #region Cannonの世界を生成 var world = new CANNON.World(); //重力を設定 world.gravity.set(0, -90.82, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; world.solver.tolerance = 0.001; //地面用にPlaneを生成 var plane = new CANNON.Plane(); //Planeの剛体を質量0で生成する var ground = new CANNON.RigidBody(0, plane); //X軸に90度(つまり地面)に回転 ground.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); ground.position.set( 50, 0, 50); world.add(ground); #endregion #region initThree() { //var camera = new THREE.OrthographicCamera(-w / 2, w / 2, h / 2, -h / 2, 1, 1000); var camera = new THREE.PerspectiveCamera(60, w / (double)h, 0.1, 1000); camera.lookAt(new THREE.Vector3(0, 0, 0)); var scene = new THREE.Scene(); var renderer = new THREE.CSS3DRenderer(); renderer.setSize(w, h); var textureSize = 800; var floorEle = new IHTMLDiv(); //floorEle.style.width = textureSize + "px"; //floorEle.style.height = textureSize + "px"; floorEle.style.width = 100 + "px"; floorEle.style.height = 100 + "px"; new WebGLDiceByEBLOG.HTML.Images.FromAssets.background().ToBackground(floorEle.style, true); //floorEle.style.background = 'url(http://jsrun.it/assets/d/x/0/w/dx0wl.png) left top repeat'; //floorEle.style.backgroundSize = textureSize / 20 + "px " + textureSize / 20 + "px"; (floorEle.style as dynamic).backgroundSize = textureSize / 20 + "px " + textureSize / 20 + "px"; var floorObj = new THREE.CSS3DObject(floorEle); //floorObj.position.fromArray(new double[] { 100, 0, 0 }); //floorObj.rotation.fromArray(new double[] { Math.PI / 2.0, 0, 0 }); scene.add(floorObj); scene.add(camera); renderer.domElement.AttachToDocument(); renderer.render(scene, camera); #endregion } #region createDice Func<xdice> createDice = delegate { Console.WriteLine("before array"); //t = new Array(3); //p.rotation = t; var zero = 0.0; #region boxInfo var boxInfo = new[] { new xdiceface { img = (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num4(), position= new double [] { 0, 0, -cubeSize }, // jsc, please allow rotation= new double [] { 0, 0, zero } }, new xdiceface{ img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num2(), position = new double [] { -cubeSize, 0, 0 }, rotation = new double [] { 0, Math.PI / 2, 0 } }, new xdiceface{ img = (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num5(), position = new double [] { cubeSize, 0, 0 }, rotation= new double [] { 0, -Math.PI / 2, 0 } }, new xdiceface{ img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num1(), position= new double [] { 0, cubeSize, 0 }, rotation= new double [] { Math.PI / 2, 0, Math.PI } }, new xdiceface { img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num6(), position= new double [] { 0, -cubeSize, 0 }, rotation= new double [] { - Math.PI / 2, 0, Math.PI } }, new xdiceface{ img= (IHTMLImage)new WebGLDiceByEBLOG.HTML.Images.FromAssets.num3(), position= new double [] { 0, 0, cubeSize }, rotation= new double [] { 0, Math.PI, 0 } }, }; #endregion Console.WriteLine("after array"); //for three.js //var el, dice, // info, img, face; var el = new IHTMLDiv(); el.style.width = cubeSize * 2 + "px"; el.style.height = cubeSize * 2 + "px"; var dice = new THREE.CSS3DObject(el); for (var j = 0; j < boxInfo.Length; j++) { Console.WriteLine("after array " + new { j }); var info = boxInfo[j]; info.img.style.SetSize( (int)(cubeSize * 2), (int)(cubeSize * 2) ); var face = new THREE.CSS3DObject(info.img); face.position.fromArray(info.position); face.rotation.fromArray(info.rotation); dice.add(face); } //Create physics. var mass = 1; var box = new CANNON.Box(new CANNON.Vec3(cubeSize, cubeSize, cubeSize)); var body = new CANNON.RigidBody(mass, box); //body.position.set(x, y, z); //body.velocity.set(0, 0, Math.random() * -50 - 30); //body.angularVelocity.set(10, 10, 10); //body.angularDamping = 0.001; return new xdice { dice = dice, rigid = body }; }; #endregion //world.allowSleep = true; var stopped = false; Func<double> random = new Random().NextDouble; #region initAnimation Action<xdice> initAnimation = y => { var position = new { x = 5 + random() * 50.0, y = 5 + random() * 50.0, z = 5 + random() * 5.0, }; Console.WriteLine(new { position }); y.rigid.position.set(position.x, position.y, position.z); y.rigid.velocity.set( random() * 20 + 0, random() * 20 + 10, random() * 20 + 10 ); y.rigid.angularVelocity.set(10, 10, 10); y.rigid.angularDamping = 0.001; }; #endregion //create a dice. var AllDice = new List<xdice>(); for (int i = 0; i < 9; i++) { var y = createDice(); initAnimation(y); scene.add(y.dice); world.add(y.rigid); AllDice.Add(y); } var target = new THREE.Vector3(); var lon = 50.0; var lat = -72.0; var drag = false; #region onframe Native.window.onframe += delegate { if (Native.document.pointerLockElement == Native.document.body) lon += 0.00; else lon += 0.01; lat = Math.Max(-85, Math.Min(85, lat)); Native.document.title = new { lon = (int)lon, lat = (int)lat }.ToString(); var phi = THREE.Math.degToRad(90.0 - lat); var theta = THREE.Math.degToRad(lon); target.x = Math.Sin(phi) * Math.Cos(theta); target.y = Math.Cos(phi); target.z = Math.Sin(phi) * Math.Sin(theta); //XInteractiveInt32Form.ToInteractiveInt32Form( camera.position.set( x: 0, y: 50.ToInteractiveInt32Form(), z: 0 ); #region updatePhysics(); //物理エンジンの時間を進める world.step(timeStep); //物理エンジンで計算されたbody(RigidBody)の位置をThree.jsのMeshにコピー AllDice.WithEach( y => { y.rigid.position.copy(y.dice.position); y.rigid.quaternion.copy(y.dice.quaternion); //y.rigid.position.copy(camera.position); } ); if (!drag) { camera.lookAt( new THREE.Vector3( AllDice.Average(i => i.rigid.position.x), AllDice.Average(i => i.rigid.position.y), AllDice.Average(i => i.rigid.position.z) ) ); } else { camera.lookAt( new THREE.Vector3( target.x + camera.position.x, target.y + camera.position.y, target.z + camera.position.z ) ); } ground.position.copy(floorObj.position); ground.quaternion.copy(floorObj.quaternion); #endregion renderer.render(scene, camera); }; #endregion #region sleepy AllDice.Last().With( x => { x.rigid.addEventListener("sleepy", IFunction.OfDelegate( new Action( delegate { var px = new THREE.Vector4(1, 0, 0, 0); var nx = new THREE.Vector4(-1, 0, 0, 0); var py = new THREE.Vector4(0, 1, 0, 0); var ny = new THREE.Vector4(0, -1, 0, 0); var pz = new THREE.Vector4(0, 0, 1, 0); var nz = new THREE.Vector4(0, 0, -1, 0); var UP = 0.99; //tmp; #region showNum Action<int> showNum = num => { new { num }.ToString().ToDocumentTitle(); }; if (px.applyMatrix4(x.dice.matrixWorld).y > UP) { showNum(5); } else if (nx.applyMatrix4(x.dice.matrixWorld).y > UP) { showNum(2); } else if (py.applyMatrix4(x.dice.matrixWorld).y > UP) { showNum(1); } else if (ny.applyMatrix4(x.dice.matrixWorld).y > UP) { showNum(6); } else if (pz.applyMatrix4(x.dice.matrixWorld).y > UP) { showNum(3); } else if (nz.applyMatrix4(x.dice.matrixWorld).y > UP) { showNum(4); } #endregion stopped = true; } ) ) ); } ); #endregion #region onresize Action AtResize = delegate { camera.aspect = Native.window.Width / Native.window.Height; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; #endregion #region onclick var button = new IHTMLDiv(); button.style.position = IStyle.PositionEnum.absolute; button.style.left = "0px"; button.style.right = "0px"; button.style.bottom = "0px"; button.style.height = "3em"; button.style.backgroundColor = "rgba(0,0,0,0.5)"; button.AttachToDocument(); button.onmousedown += e => { e.stopPropagation(); }; button.ontouchstart += e => { e.stopPropagation(); }; button.ontouchmove += e => { e.stopPropagation(); }; button.onclick += delegate { stopped = false; AllDice.WithEach( y => { initAnimation(y); } ); }; #endregion #region ontouchmove var touchX = 0; var touchY = 0; Native.document.body.ontouchend += e => { drag = false; }; Native.document.body.ontouchstart += e => { drag = true; e.preventDefault(); var touch = e.touches[0]; touchX = touch.screenX; touchY = touch.screenY; }; Native.document.body.ontouchmove += e => { e.preventDefault(); var touch = e.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; }; #endregion #region camera rotation renderer.domElement.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == renderer.domElement) { drag = true; lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; renderer.domElement.onmouseup += e => { drag = Native.document.pointerLockElement != null; e.preventDefault(); }; renderer.domElement.onmousedown += e => { //e.CaptureMouse(); drag = true; e.preventDefault(); renderer.domElement.requestPointerLock(); }; renderer.domElement.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion }
// example broken by sf data loss? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151016/azimuthal /// <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) { // chrome 48 opens too many connections to download pngs? // Version 48.0.2536.0 canary (64-bit) //TCP enter https { ClientCounter = 395 } //{ RemoteEndPoint = 192.168.1.199:65133, isPeerProxy = False } //{ certificate = , chain = } //Unhandled Exception: OutOfMemoryException. // view-source:file:///X:/opensource/github/three.js/examples/css3d_panorama.html // http://security.stackexchange.com/questions/53765/router-detecting-port-scan-and-ack-flood-attack // what causes the port flood ////TCP enter https { ClientCounter = 12 } ////{ RemoteEndPoint = 192.168.1.199:65188, isPeerProxy = False } //new azi_ny().AttachToDocument(); //// what happens if we add two of them? //var __threejs = new THREE.Vector3(-512, 0, 0); //var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000); //var scene = new THREE.Scene(); //var renderer = new THREE.CSS3DRenderer(); Console.WriteLine("about to init sides..."); #region sides var sides = new[] { new side { img= new azi_px(), // glsl, clr46, Vector3? position= new THREE.Vector3( -512, 0, 0 ), rotation= new THREE.Vector3( 0, Math.PI / 2, 0 ) }, new side { img= new azi_nx(), position= new THREE.Vector3( 512, 0, 0 ), rotation= new THREE.Vector3( 0, -Math.PI / 2, 0 ) }, new side{ img= new azi_py(), position= new THREE.Vector3( 0, 512, 0 ), rotation= new THREE.Vector3( Math.PI / 2, 0, Math.PI ) }, new side{ img= new azi_ny(), position= new THREE.Vector3( 0, -512, 0 ), rotation= new THREE.Vector3( - Math.PI / 2, 0, Math.PI ) }, new side{ img= new azi_pz(), position= new THREE.Vector3( 0, 0, 512 ), rotation= new THREE.Vector3( 0, Math.PI, 0 ) }, new side{ img= new azi_nz(), position= new THREE.Vector3( 0, 0, -512 ), rotation= new THREE.Vector3( 0, 0, 0 ) } }; #endregion Console.WriteLine("about to init CSS3DObject sides... did chrome just abuse TCP ?"); var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000); var scene = new THREE.Scene(); var renderer = new THREE.CSS3DRenderer(); for (var i = 0; i < sides.Length; i++) { var side = sides[i]; var element = side.img; element.style.SetSize(1026, 1026); //element.width = 1026; // 2 pixels extra to close the gap. var xobject = new THREE.CSS3DObject(element); xobject.position.set(side.position.x, side.position.y, side.position.z); xobject.rotation.set(side.rotation.x, side.rotation.y, side.rotation.z); scene.add(xobject); } //// c48 floods the ports by now. //TCP enter https { ClientCounter = 344 } //{ RemoteEndPoint = 192.168.1.199:49221, isPeerProxy = False } //Unhandled Exception: OutOfMemoryException. //return; //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(0.34382355213165283, -0.024581052362918854, -0.938712477684021, 0, 0, -0.9996572732925415, 0.026176948100328445, 0, 0.9390342831611633, 0.00900025200098753, 0.34370577335357666, 0, 0, 0, 0, 0.9999999403953552) translate3d(489px, 332px, 0px);"> // <img src="assets/CSSAzimuthMapViz/posx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -512, 0, 0, 1);"><img src="assets/CSSAzimuthMapViz/negx.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 512, 0, 0, 1);"><img src="assets/CSSAzimuthMapViz/posy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 512, 0, 1);"><img src="assets/CSSAzimuthMapViz/negy.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, -512, 0, 1);"><img src="assets/CSSAzimuthMapViz/posz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 512, 1);"><img src="assets/CSSAzimuthMapViz/negz.jpg" width="1026" style="width: 1024px; height: 1024px; position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> //<div style="-webkit-transform-style: preserve-3d; width: 978px; height: 664px; -webkit-transform: translate3d(0px, 0px, 432.6708237832803px) matrix3d(-0.4524347484111786, 0, 0.8917974829673767, 0, 0, -1, 0, 0, -0.8917974829673767, 0, -0.4524347484111786, 0, 0, 0, 0, 1) translate3d(489px, 332px, 0px);"> // <img width="1026" src="textures/cube/Bridge2/posx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negx.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 512, 0, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/negy.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, 0, -1, 0, 0, 1, 0, 0, 0, -512, 0, 1);"><img width="1026" src="textures/cube/Bridge2/posz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(-1, 0, 0, 0, 0, -1, 0, 0, 0, 0, -1, 0, 0, 0, 512, 1);"><img width="1026" src="textures/cube/Bridge2/negz.jpg" style="position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -512, 1);"></div> renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); #region onresize Native.window.onresize += delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; #endregion var target = new THREE.Vector3(); var lon = 90.0; var lat = 0.0; var phi = 0.0; var theta = 0.0; var drag = false; Native.window.onframe += delegate { if (Native.document.pointerLockElement == Native.document.body) lon += 0.00; else lon += 0.01; lat = Math.Max(-85, Math.Min(85, lat)); //Native.document.title = new { lon, lat }.ToString(); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = Math.Sin(phi) * Math.Cos(theta); target.y = Math.Cos(phi); target.z = Math.Sin(phi) * Math.Sin(theta); camera.lookAt(target); renderer.render(scene, camera); }; #region ontouchmove var touchX = 0; var touchY = 0; Native.document.body.ontouchstart += e => { e.preventDefault(); var touch = e.touches[0]; touchX = touch.screenX; touchY = touch.screenY; }; Native.document.body.ontouchmove += e => { e.preventDefault(); var touch = e.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; }; #endregion #region camera rotation Native.document.body.onmousemove += e => { e.preventDefault(); if (Native.document.pointerLockElement == Native.document.body) { lon += e.movementX * 0.1; lat -= e.movementY * 0.1; //Console.WriteLine(new { lon, lat, e.movementX, e.movementY }); } }; Native.document.body.onmouseup += e => { drag = false; e.preventDefault(); }; Native.document.body.onmousedown += e => { //e.CaptureMouse(); drag = true; e.preventDefault(); Native.document.body.requestPointerLock(); }; Native.document.body.ondblclick += e => { e.preventDefault(); Console.WriteLine("requestPointerLock"); }; #endregion Native.document.body.onmousewheel += e => { camera.fov -= e.WheelDirection * 5.0; camera.updateProjectionMatrix(); }; }
// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://alteredqualia.com/three/examples/webgl_cars.html // http://alteredqualia.com/xg/examples/animation_physics_terrain.html // https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea // Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P // https://github.com/dotnet/roslyn/issues/98 //Icon image is missing. //At least one new-style screenshot or video is required. //Small tile image is missing. //Please select a Primary Category for your item. //Language is not selected. // 640x400 // 128x128 // 440x280 public Application(IApp page) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128 Console.WriteLine("enter WebGLHZBlendCharacter"); #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) { Console.WriteLine("invoke TheServerWithAppWindow.Invoke"); ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text); return; } #endregion { TexturesImages ref0; } // http://www.realitymeltdown.com/WebGL3/character-controller.html // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127 //Native.css Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; //Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46 // used by, for? var clock = new THREE.Clock(); //var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 }; var scene = new THREE.Scene(); var skyScene = new THREE.Scene(); scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; renderer.domElement.AttachToDocument(); // this will mess up // three.OrbitControls.js // onMouseMove //new IStyle(renderer.domElement) //{ // position = IStyle.PositionEnum.absolute, // left = "0px", // top = "0px", // right = "0px", // bottom = "0px", //}; //new { }.With( // async delegate // { // await Native.window.async.onresize; // // if the reload were fast, then we could actually do that:D // Native.document.location.reload(); // } //); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List <THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; //cube.position.x = -100; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); while (true) { await Native.window.async.onframe; cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; } } ); #endregion var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new 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); scene.add(blendMesh); var xtrue = true; // run blendMesh.setSpeed(1.0); blendMesh.showSkeleton(!xtrue); var radius = blendMesh.geometry.boundingSphere.radius; Native.document.title = new { radius }.ToString(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); camera.position.set(0.0, radius * 3, radius * 3.5); var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var controls = new THREE.OrbitControls(camera); //controls.noPan = true; //var loader = new THREE.JSONLoader(); //loader.load(new Models.ground().Content.src, // new Action<THREE.Geometry, THREE.Material[]>( // (xgeometry, materials) => // { // var ground = new THREE.Mesh(xgeometry, materials[0]); // ground.scale.set(20, 20, 20); // ground.receiveShadow = true; // ground.castShadow = true; // scene.add(ground); // } // ) // ); #region createSky var urls = new[] { new px().src, new nx().src, new py().src, new ny().src, new pz().src, new nz().src, }; var textureCube = THREE.ImageUtils.loadTextureCube(urls); dynamic shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; // We're inside the box, so make sure to render the backsides // It will typically be rendered first in the scene and without depth so anything else will be drawn in front var material = new THREE.ShaderMaterial(new { fragmentShader = shader.fragmentShader, vertexShader = shader.vertexShader, uniforms = shader.uniforms, depthWrite = false, side = THREE.BackSide }); // THREE.CubeGeometry has been renamed to THREE.BoxGeometry // The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values. var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material); //skyMesh.renderDepth = -10; skyScene.add(skyMesh); #endregion ////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height, //// new //// { //// minFilter = THREE.LinearFilter, //// magFilter = THREE.LinearFilter, //// format = THREE.RGBFormat, //// stencilBufer = false //// } ////); ////var composer = new THREE.EffectComposer(renderer, renderTarget); ////composer.addPass(new THREE.RenderPass(skyScene, skyCamera)); ////composer.addPass(new THREE.RenderPass(scene, camera)); ////#region vblur ////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader); ////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader); ////var bluriness = 6; ////// Show Details Severity Code Description Project File Line //////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183 ////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; ////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; ////(hblur.uniforms as dynamic).r.value = 0.5; ////(vblur.uniforms as dynamic).r.value = 0.5; ////vblur.renderToScreen = true; ////composer.addPass(hblur); ////composer.addPass(vblur); ////#endregion //composer.addPass(new THREE.RenderPass(scene, camera)); // #region onframe Native.window.onframe += delegate { var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); blendMesh.updateSkeletonHelper(); } controls.center.copy(blendMesh.position); controls.center.y += radius * 2.0; controls.update(); //var camOffset = camera.position.clone().sub(controls.center); //camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone(); //camera.position = controls.center.clone().add(camOffset); skyCamera.rotation.copy(camera.rotation); //composer.render(0.1); //renderer.clear(); renderer.render(skyScene, skyCamera); renderer.render(scene, camera); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); } ) ); }
/// <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) { // view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://threejs.org/examples/#webgl_materials_cubemap_dynamic // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs // http://threejs.org/examples/#webgl_postprocessing_dof // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html" { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var clock = new THREE.Clock(); var radius = 100; var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000); camera.position.z = 200; var skyScene = new THREE.Scene(); var scene = new THREE.Scene(); //scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.sortObjects = false; renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; //var material_depth = new THREE.MeshDepthMaterial(); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); var sw = Stopwatch.StartNew(); for (var i = 1; i < 5; 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 % 4 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 300; 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); var _i = i; 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) % 4 * 500 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 300; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); } #endregion // maskpass // THREE.EffectComposer relies on THREE.CopyShader var composer = new THREE.EffectComposer(renderer); var renderPass = new THREE.RenderPass(scene, camera); composer.addPass(renderPass); // THREE.BokehPass relies on THREE.BokehShader var bokehPass = new THREE.BokehPass(scene, camera, new { focus = 1.0, aperture = 0.025, maxblur = 1.0, width = Native.window.Width, height = Native.window.Height }); bokehPass.renderToScreen = true; composer.addPass(bokehPass); renderer.autoClear = false; var controls = new THREE.OrbitControls(camera); Native.document.onclick += delegate { // THREE.AnimationHandler.add() has been deprecated. // how to make it work with bokah? //THREE.AnimationHandler.update(1); }; #region onframe Native.window.onframe += delegate { controls.update(); var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); //THREE.AnimationHandler.update(stepSize); } camera.position = controls.center.clone(); skyCamera.rotation.copy(camera.rotation); composer.render(0.1); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); }
private static void InitializeContent() { Action __WoodsXmasByRobert_loaded = null; Console.WriteLine( new { Native.window.opener, Native.window.parent } ); Native.window.parent.With( parent => { parent.postMessage("WoodsXmasByRobert.preparing"); Console.WriteLine("WoodsXmasByRobert.preparing"); __WoodsXmasByRobert_loaded = delegate { Console.WriteLine("will post WoodsXmasByRobert.loaded"); __WoodsXmasByRobert_loaded = null; parent.postMessage("WoodsXmasByRobert.loaded"); }; } ); //<!-- Snow flakes --> new IHTMLScript { type = "x-shader/x-vertex", id = "vertexshader", innerText = new Shaders.particlesVertexShader().ToString() }.AttachToDocument(); new IHTMLScript { type = "x-shader/x-fragment", id = "fragmentshader", innerText = new Shaders.particlesFragmentShader().ToString() }.AttachToDocument(); var w = Native.window; dynamic window = w; // http://stackoverflow.com/questions/4923136/why-doesnt-firefox-support-mp3-file-format-in-audio // Timestamp: 12/28/2012 1:22:05 PM //Warning: HTTP "Content-Type" of "audio/mpeg3" is not supported. Load of media resource http://192.168.1.100:27248/assets/WoodsXmasByRobert/unfiltered_mix.mp3 failed. //Source File: http://192.168.1.100:27248/ //Line: 0 #region snd var snd = new HTML.Audio.FromAssets.unfiltered_mix { volume = 0.9 }; window.snd = snd; Native.window.onfocus += delegate { Console.WriteLine("WoodsXmasByRobert onfocus"); snd.volume = 0.9; }; Native.window.onblur += delegate { Console.WriteLine("WoodsXmasByRobert onblur"); snd.volume = 0.1; // if we are also not visible anymore // and animations frame stop // we should stop all sound }; #endregion var canvas = new IHTMLCanvas(); object webglRenderer_args = new object().With( (dynamic a) => { a.clearColor = 0x000000; a.clearAlpha = 1.0; a.preserveDrawingBuffer = true; a.canvas = canvas; } ); var webglRenderer = new THREE.WebGLRenderer( webglRenderer_args ); webglRenderer.autoClear = false; //var canvas = (IHTMLCanvas)webglRenderer.domElement; canvas.AttachToDocument(); webglRenderer.setSize(Native.window.Width, Native.window.Height); var camera = new THREE.PerspectiveCamera(75, Native.window.Width / Native.window.Height, 1, 100000); camera.position.z = 0; camera.position.x = 0; camera.position.y = 0; window.camera = camera; var cameraTarget = new THREE.Vector3(); cameraTarget.z = -400; camera.lookAt(cameraTarget); window.cameraTarget = cameraTarget; var loadingImage = THREE.ImageUtils.loadTexture(new loading().src); var map = THREE.ImageUtils.loadTexture(new snowflake().src); var starImage = THREE.ImageUtils.loadTexture(new flare().src); window.loadingImage = loadingImage; window.map = map; window.starImage = starImage; #region cursor var cursor = new pointer(); cursor.style.zIndex = 0x1000; cursor.Hide(); cursor.AttachToDocument(); dynamic style = Native.Document.body.style; //http://stackoverflow.com/questions/7849002/how-can-i-set-the-hotspot-to-the-center-of-a-custom-cursor // http://stackoverflow.com/questions/5649608/custom-css-cursors style.cursor = "url(" + cursor.src + ") 16 16,pointer"; #endregion var mouseXpercent = 0.5; var mouseYpercent = 0.5; #region onmousemove var CursorX = 0; var CursorY = 0; Native.Document.onmousemove += e => { if (Native.Document.pointerLockElement == Native.Document.body) { cursor.Show(); CursorX += e.movementX; CursorY += e.movementY; } else { cursor.Hide(); CursorX = e.CursorX; CursorY = e.CursorY; } // keep cursor in view CursorX = CursorX.Max(0).Min(Native.window.Width); CursorY = CursorY.Max(0).Min(Native.window.Height); if (Native.document.pointerLockElement == Native.document.body) { cursor.style.SetLocation(CursorX - 16, CursorY - 16); } var windowHalfX = Native.window.Width >> 1; var windowHalfY = Native.window.Height >> 1; var mouseX = (CursorX - windowHalfX); var mouseY = (CursorY - windowHalfY); mouseXpercent = mouseX / windowHalfX; mouseYpercent = mouseY / windowHalfY; window.mouseXpercent = mouseXpercent; window.mouseYpercent = mouseYpercent; }; #endregion Native.Document.onmousedown += e => { if (e.MouseButton == IEvent.MouseButtonEnum.Right) Native.Document.body.requestPointerLock(); }; new AppCode().Content.AttachToDocument().onload += delegate { // ScriptCoreLib should define this event! snd.addEventListener( "loadeddata", new Action( delegate { new IFunction("window.checkLoadingDone();").apply(Native.window); } ) ); var scene = (THREE.Scene)(object)window.scene; scene.add(camera); #region Cloud { object args = new object().With( (dynamic a) => { a.map = THREE.ImageUtils.loadTexture(new cloud().src); a.transparent = true; a.opacity = 0.17; a.fog = false; } ); var cloudPlane = new THREE.PlaneGeometry(12500, 1880); var cloud = new THREE.Mesh(cloudPlane, new THREE.MeshBasicMaterial(args)); cloud.position.set(300, 5350, -4450); cloud.lookAt(camera.position); scene.add(cloud); window.cloud = cloud; } #endregion #region Sky { object args = new object().With( (dynamic a) => { a.map = THREE.ImageUtils.loadTexture(new sky().src); a.opacity = 0.57; a.fog = false; } ); var skyPlane = new THREE.PlaneGeometry(9000, 6000); var sky = new THREE.Mesh(skyPlane, new THREE.MeshBasicMaterial(args)); sky.scale.set(4, 2.5, 2.5); sky.position.set(0, 7500, -6000); sky.lookAt(camera.position); scene.add(sky); window.sky = sky; } #endregion #region moon { dynamic moon_material_args = new object(); moon_material_args.map = THREE.ImageUtils.loadTexture(new moon().src); moon_material_args.transparent = true; moon_material_args.opacity = 0.3; moon_material_args.fog = false; moon_material_args.blending = THREE.AdditiveBlending; var moonPlane = new THREE.PlaneGeometry(1000, 1000); var moon = new THREE.Mesh(moonPlane, new THREE.MeshBasicMaterial( (object)moon_material_args ) ); moon.position.set(300, 4300, -4600); moon.lookAt(camera.position); scene.add(moon); window.moon = moon; } #endregion #region subtitleArray var subtitleArray = (IArray<THREE.Mesh>)(object)window.subtitleArray; var textPlane = new THREE.PlaneGeometry(512, 80); new SubtitlesImages().Images.WithEach( i => { object args = new object().With( (dynamic a) => { a.map = THREE.ImageUtils.loadTexture(i.src); a.transparent = true; a.depthTest = false; } ); var sub = new THREE.Mesh(textPlane, new THREE.MeshBasicMaterial(args)); sub.position.z = -800; sub.position.y = -550; sub.visible = false; camera.add(sub); subtitleArray.push(sub); } ); { var endPlane = new THREE.PlaneGeometry(500, 100); object args = new object().With( (dynamic a) => { a.map = THREE.ImageUtils.loadTexture(new xmas().src); a.transparent = true; a.opacity = 1.0; a.depthTest = false; } ); var end = new THREE.Mesh(endPlane, new THREE.MeshBasicMaterial(args)); end.position.z = -400; end.position.y = 100; end.visible = false; camera.add(end); subtitleArray.push(end); window.end = end; } new IFunction("window.setupSubtitles();").apply(Native.window); #endregion var particles = (THREE.ParticleSystem)(object)window.particles; var bgSprite = (THREE.Sprite)(object)window.bgSprite; var loadingSprite = (THREE.Sprite)(object)window.loadingSprite; var pointLight = (THREE.PointLight)(object)window.pointLight; var treeArray = (IArray<THREE.Mesh>)(object)window.treeArray; var rockArray = (IArray<THREE.Mesh>)(object)window.rockArray; var flowerArray = (IArray<THREE.Mesh>)(object)window.flowerArray; var groundMesh1 = (THREE.Mesh)(object)window.groundMesh1; var groundMesh2 = (THREE.Mesh)(object)window.groundMesh2; var renderModel = (object)window.renderModel; var effectFilm = (object)window.effectFilm; var effectVignette = (object)window.effectVignette; var effectCopy = (object)window.effectCopy; var composer = new THREE.EffectComposer(webglRenderer); composer.addPass(renderModel); composer.addPass(effectFilm); composer.addPass(effectVignette); composer.addPass(effectCopy); var speedEffector_value = (int)new IFunction("return window.speedEffector.value;").apply(Native.window); #region load Action<string, Action<object>> load = (src, yield) => { new THREE.JSONLoader().load( src, IFunction.OfDelegate(yield) ); }; #endregion #region sled load( new WoodsXmasByRobert.Design.models.sleigh().Content.src, geometry => { Console.WriteLine("got sled!"); var sled = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() ); var scale = 4; sled.scale.set(scale, scale, scale); sled.rotation.y = -Math.PI / 2; sled.position.y = -290; sled.position.z = -80; scene.add(sled); window.sled = sled; new IFunction("window.checkLoadingDone();").apply(Native.window); } ); #endregion var random = new Random(); #region treeDead load( new WoodsXmasByRobert.Design.models.treeDead().Content.src, tree1Geo => { Console.WriteLine("got treeDead!"); load( new WoodsXmasByRobert.Design.models.treeEvergreenHigh().Content.src, tree2Geo => { Console.WriteLine("got treeEvergreenHigh!"); var gridSize = 500; for (var x = 0; x < 8; x++) { for (var z = 0; z < 12; z++) { var geo = tree2Geo; if (random.NextDouble() < 0.25) if (x != 0 && x != 7) { geo = tree1Geo; } var mesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial()); var scale = 1.2 + random.NextDouble(); mesh.scale.set(scale, scale * 2, scale); var posx = 0.0; if (x < 4) { posx = (x * gridSize) - (gridSize * 4) - 100 + random.NextDouble() * 100 - 50; } else { posx = (x * gridSize) - 1400 + random.NextDouble() * 100 - 50; }; var posz = -(z * gridSize) + random.NextDouble() * 100 - 50; mesh.position.set(posx, -400 - (random.NextDouble() * 80), posz); mesh.rotation.set((random.NextDouble() * 0.2) - 0.1, random.NextDouble() * Math.PI, (random.NextDouble() * 0.2) - 0.1); scene.add(mesh); treeArray.push(mesh); } } new IFunction("window.checkLoadingDone();").apply(Native.window); } ); } ); #endregion #region bird load( new WoodsXmasByRobert.Design.models.eagle().Content.src, geometry => { Console.WriteLine("got bird!"); dynamic args = new object(); args.color = 0x000000; args.morphTargets = true; args.fog = false; var bird = new THREE.MorphAnimMesh( geometry, new THREE.MeshBasicMaterial( (object)args ) ); bird.duration = 1000; bird.scale.set(4, 4, 4); bird.rotation.y = Math.PI; bird.position.set(0, 3000, -1500); scene.add(bird); window.bird = bird; new IFunction("window.checkLoadingDone();").apply(Native.window); } ); #endregion #region rock load( new WoodsXmasByRobert.Design.models.rock().Content.src, geometry => { Console.WriteLine("got rock!"); var numOfRocks = 25; for (var i = 0; i < numOfRocks; ++i) { dynamic args = new object(); args.color = 0x444444; var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial((object)args)); var scale = 1 + (random.NextDouble() * 0.5); mesh.scale.set(scale, scale, scale); mesh.rotation.set(0, random.NextDouble() * Math.PI, 0); mesh.position.set((random.NextDouble() * 4000) - 2000, -400, (random.NextDouble() * 6000) - 6000); if (mesh.position.x < 45) if (mesh.position.x > 0) { mesh.position.x += 450; } if (mesh.position.x > -450) if (mesh.position.x < 0) { mesh.position.x -= 450; } scene.add(mesh); rockArray.push(mesh); } new IFunction("window.checkLoadingDone();").apply(Native.window); } ); #endregion #region horse load( new WoodsXmasByRobert.Design.models.horse().Content.src, geometry => { Console.WriteLine("got horse!"); dynamic horse_material_args = new object(); horse_material_args.color = 0x090601; horse_material_args.morphTargets = true; var horse = new THREE.MorphAnimMesh(geometry, new THREE.MeshLambertMaterial( (object)horse_material_args ) ); horse.duration = 1000; horse.scale.set(2.5, 1.8, 2); horse.rotation.y = Math.PI; horse.position.set(0, -350, -700); scene.add(horse); window.horse = horse; //checkLoadingDone(); // Handles var plane = new THREE.PlaneGeometry(700, 10, 40, 1); var l = Math.Floor(plane.vertices.Length / 2.0); for (var i = 0; i < l; i++) { var offset = Math.Sin(i / 14) * 100; plane.vertices[i].y -= offset; plane.vertices[i + 41].y -= offset; plane.vertices[i].z -= (i / 5) + (offset * -1) / 8; plane.vertices[i + 41].z += (i / 5) - (offset * -1) / 8; } dynamic material_args = new object(); material_args.color = 0x090601; material_args.side = THREE.DoubleSide; var material = new THREE.MeshBasicMaterial( (object)material_args ); var leftHandle = new THREE.Mesh(plane, material); leftHandle.position.y = -120; leftHandle.position.z = -350; leftHandle.position.x = -30; leftHandle.rotation.y = -(Math.PI / 2) + 0.075; leftHandle.rotation.x = Math.PI * 2 - 0.075; scene.add(leftHandle); window.leftHandle = leftHandle; var rightHandle = new THREE.Mesh(plane, material); rightHandle.position.y = -120; rightHandle.position.z = -350; rightHandle.position.x = 30; rightHandle.rotation.y = -(Math.PI / 2) - 0.075; rightHandle.scale.z = -1; rightHandle.rotation.x = Math.PI * 2 - 0.075; scene.add(rightHandle); window.rightHandle = rightHandle; new IFunction("window.checkLoadingDone();").apply(Native.window); } ); #endregion #region flowerLoaded Action<object, bool> flowerLoaded = (geometry, halfScale) => { var numOfFlowers = 20; var half = Math.Floor(numOfFlowers / 2.0); dynamic args = new object(); args.color = 0x444444; for (var i = 0; i < half; ++i) { var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial( (object)args ) ); var scale = 1 + (random.NextDouble() * 1); if (halfScale) { scale *= 0.6; } mesh.scale.set(scale, scale, scale); mesh.rotation.set((random.NextDouble() * 0.6) - 0.3, random.NextDouble() * Math.PI, (random.NextDouble() * 0.6) - 0.3); mesh.position.set((random.NextDouble() * 1000) - 500, -310, (random.NextDouble() * 6000) - 6000); if (mesh.position.x < 100) if (mesh.position.x > 0) { mesh.position.x += 100; } if (mesh.position.x > -100) if (mesh.position.x < 0) { mesh.position.x -= 100; } scene.add(mesh); flowerArray.push(mesh); } new IFunction("window.checkLoadingDone();").apply(Native.window); }; #endregion #region weeds01 load( new WoodsXmasByRobert.Design.models.weeds01().Content.src, geometry => { Console.WriteLine("got weeds01!"); flowerLoaded(geometry, false); } ); #endregion #region glowbulb load( new WoodsXmasByRobert.Design.models.glowbulb().Content.src, geometry => { Console.WriteLine("got glowbulb!"); flowerLoaded(geometry, true); } ); #endregion #region run Action<double> run = delta => { // trees var mesh = default(THREE.Mesh); for (var i = 0; i < treeArray.length; ++i) { mesh = treeArray[i]; // respawn if (mesh.position.z > camera.position.z + 700) { mesh.position.z -= 6000; var scale = 1.2 + random.NextDouble(); mesh.scale.set(scale, scale * 2, scale); } } // rocks for (var i = 0; i < rockArray.length; ++i) { mesh = rockArray[i]; // respawn if (mesh.position.z > camera.position.z + 400) { mesh.position.z -= 6000; } } // flowers for (var i = 0; i < flowerArray.length; ++i) { mesh = flowerArray[i]; // respawn if (mesh.position.z > camera.position.z + 400) { mesh.position.z -= 6000; } } // ground respawn if (groundMesh1.position.z - 10000 > camera.position.z) { groundMesh1.position.z -= 40000; } if (groundMesh2.position.z - 10000 > camera.position.z) { groundMesh2.position.z -= 40000; } }; #endregion var oldTime = new IDate().getTime(); var r = 0.0; bool disableNextFrame = false; #region loop Action loop = delegate { var allLoaded = (bool)(object)window.allLoaded; var horse = (THREE.MorphAnimMesh)(object)window.horse; var bird = (THREE.MorphAnimMesh)(object)window.bird; var leftHandle = (THREE.Mesh)(object)window.leftHandle; var rightHandle = (THREE.Mesh)(object)window.rightHandle; var moon = (THREE.Mesh)(object)window.moon; var cloud = (THREE.Mesh)(object)window.cloud; var sky = (THREE.Mesh)(object)window.sky; var sled = (THREE.Mesh)(object)window.sled; //new IFunction("this.loop();").apply(Native.Window); var time = new IDate().getTime(); var delta = time - oldTime; oldTime = time; if (double.IsNaN(delta)) { delta = 1000 / 60; } var maxSpeed = delta / 2; if (allLoaded) { r += delta / 2000; run(delta); var noise = random.NextDouble() * 2; camera.position.x = (50 * Math.Cos(r * 2)) * speedEffector_value; camera.position.y = (2 * Math.Sin(r * 12) - 100) * speedEffector_value; camera.up.x = (Math.Sin(r * 12) / 50) * speedEffector_value; cameraTarget.y += (((camera.position.y + 80) + noise - mouseYpercent * 120) - cameraTarget.y) / 20; cameraTarget.x += (mouseXpercent * 400 - cameraTarget.x) / 20; var speed = (delta / 2) * speedEffector_value; camera.position.z -= speed; cameraTarget.z -= speed; camera.lookAt(cameraTarget); pointLight.position.z -= speed; if (moon != null) { moon.position.z -= speed; } if (cloud != null) { cloud.position.z -= speed; } if (sky != null) { sky.position.z -= speed; } #region sled if (sled != null) { sled.position.z -= speed; sled.position.x = camera.position.x; } #endregion #region bird if (bird != null) { bird.position.x = 200 * Math.Cos(r) + ((bird.position.z - camera.position.z) / 10); bird.position.y = 4000 + (Math.Sin(r) * 300); bird.position.z -= maxSpeed * 1.25; if (bird.position.z < camera.position.z - 10000) { bird.position.z = camera.position.z - 500; } bird.updateAnimation(delta); } #endregion #region horse if (horse != null) { horse.position.z -= speed; horse.position.x = camera.position.x; horse.updateAnimation(speed * 2); leftHandle.position.z -= speed; leftHandle.position.x = camera.position.x - 37; rightHandle.position.z -= speed; rightHandle.position.x = camera.position.x + 40; leftHandle.scale.y = 1 - Math.Abs(Math.Sin(camera.position.z / 150)) / 4; rightHandle.scale.y = leftHandle.scale.y; } #endregion particles.position.z -= speed; new IFunction("e", "window.uniforms.globalTime.value += e;").apply(Native.window, delta * 0.00015); new IFunction("e", "window.uniforms.speed.value = e;").apply(Native.window, speed / maxSpeed); new IFunction("window.runSubtitles();").apply(Native.window); //disableNextFrame = true; if (__WoodsXmasByRobert_loaded != null) __WoodsXmasByRobert_loaded(); } else { if (loadingSprite != null) { loadingSprite.position.set(Native.window.Width >> 1, Native.window.Height >> 1, 0); loadingSprite.rotation -= 0.08; } } if (bgSprite != null) { bgSprite.position.set(Native.window.Width >> 1, Native.window.Height >> 1, 0); } new IFunction("window.TWEEN.update();").apply(Native.window); //if (has_gl) { webglRenderer.clear(); composer.render(0.01); } }; #endregion #region animate Native.window.onframe += delegate { if (disableNextFrame) return; loop(); }; #endregion Action AtResize = delegate { // notify the renderer of the size change webglRenderer.setSize(Native.window.Width, Native.window.Height); // update the camera camera.aspect = Native.window.Width / Native.window.Height; camera.updateProjectionMatrix(); }; #region onresize Native.window.onresize += delegate { AtResize(); }; #endregion AtResize(); }; Native.Document.body.ondblclick += delegate { Native.Document.body.requestFullscreen(); }; Native.Document.body.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; } Native.Document.body.requestFullscreen(); Native.Document.body.requestPointerLock(); } }; Native.Document.oncontextmenu += e => { e.preventDefault(); }; }
/// <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 } ); }