// 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); } ); } ) ); }
private void MakeClothMesh(THREE.Texture t) { THREE.Texture clothTexture = t; clothTexture.wrapS = THREE.WrapType.MirroredRepeatWrapping; clothTexture.wrapT = THREE.WrapType.RepeatWrapping; clothTexture.repeat.y = -1; clothTexture.anisotropy = 16; THREE.MeshPhongMaterial clothMaterial = new THREE.MeshPhongMaterial(); clothMaterial.specular = new THREE.Color().setHex(0x030303); //clothMaterial.color = new THREE.Color(1, 0.4, 0); clothMaterial.map = clothTexture; clothMaterial.side = THREE.SideType.DoubleSide; clothMaterial.alphaTest = 0.5; clothMaterial.wireframe = false; clothMaterial.wireframeLinewidth = 2; // cloth mesh THREE.Mesh clothMesh = new THREE.Mesh(cloth.Geometry, clothMaterial); clothMesh.position.set(0, 0, 0); clothMesh.castShadow = true; THREE.ShaderMaterial shaderMat = null;; THREE.ShaderMaterialOptions o = new THREE.ShaderMaterialOptions() { texture = new THREE.Uniform() { type = "t", value = clothTexture } }; shaderMat = new THREE.ShaderMaterial(); shaderMat.side = THREE.SideType.DoubleSide; string vertexShader = Shaders.vertex; string fragmentShader = Shaders.fragment; shaderMat.vertexShader = vertexShader; shaderMat.fragmentShader = fragmentShader; clothMesh.customDepthMaterial = shaderMat; scene.add(clothMesh); }
/// <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(IDefault page = null) { // used by // X:\jsc.svn\examples\javascript\WebGL\WebGLGoldDropletTransactions\WebGLGoldDropletTransactions\Application.cs if (DisableBackground) { // nop } else { //page.body.style.backgroundColor = "#4584b4"; container.style.backgroundColor = "#4584b4"; } // Bg gradient //var canvas = new IHTMLCanvas(); //canvas.width = 32; //canvas.height = Native.Window.Height; //var context = (CanvasRenderingContext2D)canvas.getContext("2d"); //var gradient = context.createLinearGradient(0, 0, 0, canvas.height); //gradient.addColorStop(0f, "#1e4877"); //gradient.addColorStop(0.5f, "#4584b4"); //context.fillStyle = gradient; //context.fillRect(0, 0, canvas.width, canvas.height); // Clouds //var , , renderer, sky, mesh, , material, //, h, color, colors = [], sprite, size, x, y, z; var mouseX = 0f; var start_time = new IDate().getTime(); Console.WriteLine(new { Native.window.Width, Native.window.Height }); var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; Console.WriteLine(new { DefaultMouseY }); var mouseY = (float)((Native.window.Height * DefaultMouseY - windowHalfY) * 0.15); //Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; if (page == null) { container.AttachToDocument(); } else { container.AttachTo(page.body); } container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); //container.style.background = "url(" + canvas.toDataURL("image/png") + ")"; #region Dispose var IsDisposed = false; Dispose = delegate { if (IsDisposed) return; IsDisposed = true; container.Orphanize(); }; #endregion var camera = new THREE.PerspectiveCamera(30, Native.window.aspect, 1, 3000); camera.position.z = 6000; var scene = new THREE.Scene(); var geometry = new THREE.Geometry(); //var texture = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.cloud10().src); var texture = THREE.ImageUtils.loadTexture(CloudTexture); texture.magFilter = THREE.LinearMipMapLinearFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; // FogColor //var fog = new THREE.Fog(0x4584b4, -100, 3000); var fog = new THREE.Fog(FogColor, -100, 3000); // what about sprites? var material = new THREE.ShaderMaterial( new { uniforms = new { map = new { type = "t", value = texture }, fogColor = new { type = "c", value = fog.color }, fogNear = new { type = "f", value = fog.near }, fogFar = new { type = "f", value = fog.far }, }, vertexShader = new GeometryVertexShader().ToString(), fragmentShader = new GeometryFragmentShader().ToString(), depthWrite = false, depthTest = false, transparent = true } ); var r = new Random(); Func<float> Math_random = () => (float)r.NextDouble(); var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64)); for (var i = 0; i < 8000; i++) { plane.position.x = Math_random() * 1000 - 500; plane.position.y = -Math_random() * Math_random() * 200 - 15; plane.position.z = i; plane.rotation.z = (f)(Math_random() * Math.PI); plane.scale.x = Math_random() * Math_random() * 1.5f + 0.5f; plane.scale.y = plane.scale.x; THREE.GeometryUtils.merge(geometry, plane); } var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); mesh = new THREE.Mesh(geometry, material); mesh.position.z = -8000; scene.add(mesh); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); container.appendChild(renderer.domElement); container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); #region onresize Native.window.onresize += delegate { container.style.SetSize(Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; #endregion #region animate Native.window.onframe += delegate { if (IsDisposed) return; var position = ((new IDate().getTime() - start_time) * 0.03) % 8000; camera.position.x += (float)((mouseX - camera.position.x) * 0.01); camera.position.y += (float)((-mouseY - camera.position.y) * 0.01); camera.position.z = (f)(-position + 8000); renderer.render(scene, camera); }; #endregion Native.document.onmousemove += e => { mouseX = (float)((e.CursorX - windowHalfX) * 0.25); mouseY = (float)((e.CursorY - windowHalfY) * 0.15); }; //var ze = new ZeProperties(); //ze.Show(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); }
// new three broke it? // http://www.clicktorelease.com/code/perlin/explosion.html // http://www.webgl.com/2013/01/webgl-tutorial-vertex-displacement-with-a-noise-function-aka-fiery-explosion/ /// <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(IDefault page = null) { // http://inear.se/fireshader/ // http://stackoverflow.com/questions/16765120/ashima-perlin-noise-shader-not-working-with-recent-versions-of-three-js //var container, renderer, camera, mesh; var start = IDate.Now; var fov = 30; #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 scene = new THREE.Scene(); var bkgScene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(fov, Native.window.aspect, 1, 10000); camera.position.z = 100; //camera.target = new THREE.Vector3(0, 0, 0); scene.add(camera); var bkgCamera = new THREE.OrthographicCamera( Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000 ); bkgScene.add(bkgCamera); var bkgShader = new THREE.ShaderMaterial( new { uniforms = new { tDiffuse = new { type = "t", value = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets.bkg().src ) }, resolution = new { type = "v2", value = new THREE.Vector2(Native.window.Width, Native.window.Height) } }, vertexShader = new Shaders.ExplosionVertexShader().ToString(), // fragmentShader: document.getElementById( 'fs_Gradient' ).textContent, //fragmentShader = new Shaders.GradientFragmentShader().ToString(), fragmentShader = new Shaders.ExplosionFragmentShader().ToString(), depthWrite = false, depthTest = false, transparent = true } ); var quad = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), bkgShader); quad.position.z = -100; quad.rotation.x = (float)Math.PI / 2; bkgScene.add(quad); var material = new THREE.ShaderMaterial( new { uniforms = new // material_uniforms { tExplosion = new //uniforms_item { type = "t", value = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets.explosion().src ) }, time = new { type = "f", value = 0.0 }, weight = new { type = "f", value = 8.0 }, }, vertexShader = new Shaders.ExplosionVertexShader().ToString(), fragmentShader = new Shaders.ExplosionFragmentShader().ToString(), depthWrite = false, depthTest = false, transparent = true } ); var mesh = new THREE.Mesh(new THREE.SphereGeometry(20, 200, 200), material); scene.add(mesh); var renderer = new THREE.WebGLRenderer(); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; container.appendChild(renderer.domElement); var lon = 0.0; var phi = 0.0; var theta = 0.0; var lat = 15.0; var isUserInteracting = false; var scale = 0.0; #region render Native.window.onframe += delegate { ((material_uniforms)material.uniforms).time.value = .00025 * (IDate.Now - start); scale += .005; scale %= 2; lat = Math.Max(-85, Math.Min(85, lat)); phi = (90 - lat) * Math.PI / 180; theta = lon * Math.PI / 180; camera.position.x = (float)(100 * Math.Sin(phi) * Math.Cos(theta)); camera.position.y = (float)(100 * Math.Cos(phi)); camera.position.z = (float)(100 * Math.Sin(phi) * Math.Sin(theta)); //mesh.rotation.x += .012; //mesh.rotation.y += .01; camera.lookAt(scene.position); // //renderer.render( bkgScene, bkgCamera ); renderer.render(scene, camera); // stats.update(); }; #endregion #region IsDisposed Dispose = delegate { if (IsDisposed) return; IsDisposed = true; container.Orphanize(); }; #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 var ze = new ZeProperties(); ze.Show(); ze.treeView1.Nodes.Clear(); ze.Add(() => renderer); //ze.Add(() => controls); ze.Add(() => scene); ze.Left = 0; }
private void MakeCarpetMesh(THREE.Texture t) { THREE.Texture clothTexture = t; clothTexture.wrapS = THREE.WrapType.MirroredRepeatWrapping; clothTexture.wrapT = THREE.WrapType.RepeatWrapping; clothTexture.repeat.y = -1; clothTexture.anisotropy = 16; THREE.MeshPhongMaterial clothMaterial = new THREE.MeshPhongMaterial(); clothMaterial.specular = new THREE.Color().setHex(0x030303); //clothMaterial.color = new THREE.Color(1, 0.4, 0); clothMaterial.map = clothTexture; clothMaterial.side = THREE.SideType.DoubleSide; clothMaterial.alphaTest = 0.5; // cloth mesh THREE.Mesh clothMesh = new THREE.Mesh(carpet.Geometry, clothMaterial); clothMesh.position.set(0, 0, 0); clothMesh.castShadow = true; THREE.ShaderMaterial shaderMat = null; ; THREE.ShaderMaterialOptions o = new THREE.ShaderMaterialOptions() { texture = new THREE.Uniform() { type = "t", value = clothTexture } }; shaderMat = new THREE.ShaderMaterial(); shaderMat.side = THREE.SideType.DoubleSide; //string vertexShader = Shaders.vertex; //string fragmentShader = Shaders.fragment; //shaderMat.vertexShader = vertexShader; //shaderMat.fragmentShader = fragmentShader; clothMesh.customDepthMaterial = shaderMat; scene.add(clothMesh); }
/// <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 } ) ) ); }
// 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(IDefault page = null) { // used by // X:\jsc.svn\examples\javascript\WebGL\WebGLGoldDropletTransactions\WebGLGoldDropletTransactions\Application.cs if (DisableBackground) { // nop } else { //page.body.style.backgroundColor = "#4584b4"; container.style.backgroundColor = "#4584b4"; } // Bg gradient //var canvas = new IHTMLCanvas(); //canvas.width = 32; //canvas.height = Native.Window.Height; //var context = (CanvasRenderingContext2D)canvas.getContext("2d"); //var gradient = context.createLinearGradient(0, 0, 0, canvas.height); //gradient.addColorStop(0f, "#1e4877"); //gradient.addColorStop(0.5f, "#4584b4"); //context.fillStyle = gradient; //context.fillRect(0, 0, canvas.width, canvas.height); // Clouds //var , , renderer, sky, mesh, , material, //, h, color, colors = [], sprite, size, x, y, z; var mouseX = 0f; var start_time = new IDate().getTime(); Console.WriteLine(new { Native.window.Width, Native.window.Height }); var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; Console.WriteLine(new { DefaultMouseY }); var mouseY = (float)((Native.window.Height * DefaultMouseY - windowHalfY) * 0.15); //Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; if (page == null) { container.AttachToDocument(); } else { container.AttachTo(page.body); } container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); //container.style.background = "url(" + canvas.toDataURL("image/png") + ")"; #region Dispose var IsDisposed = false; Dispose = delegate { if (IsDisposed) { return; } IsDisposed = true; container.Orphanize(); }; #endregion var camera = new THREE.PerspectiveCamera(30, Native.window.aspect, 1, 3000); camera.position.z = 6000; var scene = new THREE.Scene(); var geometry = new THREE.Geometry(); //var texture = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.cloud10().src); var texture = THREE.ImageUtils.loadTexture(CloudTexture); texture.magFilter = THREE.LinearMipMapLinearFilter; texture.minFilter = THREE.LinearMipMapLinearFilter; // FogColor //var fog = new THREE.Fog(0x4584b4, -100, 3000); var fog = new THREE.Fog(FogColor, -100, 3000); // what about sprites? var material = new THREE.ShaderMaterial( new { uniforms = new { map = new { type = "t", value = texture }, fogColor = new { type = "c", value = fog.color }, fogNear = new { type = "f", value = fog.near }, fogFar = new { type = "f", value = fog.far }, }, vertexShader = new GeometryVertexShader().ToString(), fragmentShader = new GeometryFragmentShader().ToString(), depthWrite = false, depthTest = false, transparent = true } ); var r = new Random(); Func <float> Math_random = () => (float)r.NextDouble(); var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64)); for (var i = 0; i < 8000; i++) { plane.position.x = Math_random() * 1000 - 500; plane.position.y = -Math_random() * Math_random() * 200 - 15; plane.position.z = i; plane.rotation.z = (f)(Math_random() * Math.PI); plane.scale.x = Math_random() * Math_random() * 1.5f + 0.5f; plane.scale.y = plane.scale.x; THREE.GeometryUtils.merge(geometry, plane); } var mesh = new THREE.Mesh(geometry, material); scene.add(mesh); mesh = new THREE.Mesh(geometry, material); mesh.position.z = -8000; scene.add(mesh); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); container.appendChild(renderer.domElement); container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); #region onresize Native.window.onresize += delegate { container.style.SetSize(Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; #endregion #region animate Native.window.onframe += delegate { if (IsDisposed) { return; } var position = ((new IDate().getTime() - start_time) * 0.03) % 8000; camera.position.x += (float)((mouseX - camera.position.x) * 0.01); camera.position.y += (float)((-mouseY - camera.position.y) * 0.01); camera.position.z = (f)(-position + 8000); renderer.render(scene, camera); }; #endregion Native.document.onmousemove += e => { mouseX = (float)((e.CursorX - windowHalfX) * 0.25); mouseY = (float)((e.CursorY - windowHalfY) * 0.15); }; //var ze = new ZeProperties(); //ze.Show(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // 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; }
// 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 } ) ); }
/// <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; }
// new three broke it? // http://www.clicktorelease.com/code/perlin/explosion.html // http://www.webgl.com/2013/01/webgl-tutorial-vertex-displacement-with-a-noise-function-aka-fiery-explosion/ /// <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(IDefault page = null) { // http://inear.se/fireshader/ // http://stackoverflow.com/questions/16765120/ashima-perlin-noise-shader-not-working-with-recent-versions-of-three-js //var container, renderer, camera, mesh; var start = IDate.Now; var fov = 30; #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 scene = new THREE.Scene(); var bkgScene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(fov, Native.window.aspect, 1, 10000); camera.position.z = 100; //camera.target = new THREE.Vector3(0, 0, 0); scene.add(camera); var bkgCamera = new THREE.OrthographicCamera( Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -10000, 10000 ); bkgScene.add(bkgCamera); var bkgShader = new THREE.ShaderMaterial( new { uniforms = new { tDiffuse = new { type = "t", value = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets.bkg().src ) }, resolution = new { type = "v2", value = new THREE.Vector2(Native.window.Width, Native.window.Height) } }, vertexShader = new Shaders.ExplosionVertexShader().ToString(), // fragmentShader: document.getElementById( 'fs_Gradient' ).textContent, //fragmentShader = new Shaders.GradientFragmentShader().ToString(), fragmentShader = new Shaders.ExplosionFragmentShader().ToString(), depthWrite = false, depthTest = false, transparent = true } ); var quad = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), bkgShader); quad.position.z = -100; quad.rotation.x = (float)Math.PI / 2; bkgScene.add(quad); var material = new THREE.ShaderMaterial( new { uniforms = new // material_uniforms { tExplosion = new //uniforms_item { type = "t", value = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets.explosion().src ) }, time = new { type = "f", value = 0.0 }, weight = new { type = "f", value = 8.0 }, }, vertexShader = new Shaders.ExplosionVertexShader().ToString(), fragmentShader = new Shaders.ExplosionFragmentShader().ToString(), depthWrite = false, depthTest = false, transparent = true } ); var mesh = new THREE.Mesh(new THREE.SphereGeometry(20, 200, 200), material); scene.add(mesh); var renderer = new THREE.WebGLRenderer(); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; container.appendChild(renderer.domElement); var lon = 0.0; var phi = 0.0; var theta = 0.0; var lat = 15.0; var isUserInteracting = false; var scale = 0.0; #region render Native.window.onframe += delegate { ((material_uniforms)material.uniforms).time.value = .00025 * (IDate.Now - start); scale += .005; scale %= 2; lat = Math.Max(-85, Math.Min(85, lat)); phi = (90 - lat) * Math.PI / 180; theta = lon * Math.PI / 180; camera.position.x = (float)(100 * Math.Sin(phi) * Math.Cos(theta)); camera.position.y = (float)(100 * Math.Cos(phi)); camera.position.z = (float)(100 * Math.Sin(phi) * Math.Sin(theta)); //mesh.rotation.x += .012; //mesh.rotation.y += .01; camera.lookAt(scene.position); // //renderer.render( bkgScene, bkgCamera ); renderer.render(scene, camera); // stats.update(); }; #endregion #region IsDisposed Dispose = delegate { if (IsDisposed) { return; } IsDisposed = true; container.Orphanize(); }; #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 var ze = new ZeProperties(); ze.Show(); ze.treeView1.Nodes.Clear(); ze.Add(() => renderer); //ze.Add(() => controls); ze.Add(() => scene); ze.Left = 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 } ) ); }
public Application(IDefault page = null) { // https://github.com/mrdoob/three.js/wiki/Migration var size = 600; var windowHalfX = size / 2; var windowHalfY = size / 2; Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); container.style.backgroundColor = JSColor.Black; var camera = new THREE.PerspectiveCamera(40, Native.window.aspect, 1, 3000); camera.position.z = 1000; var scene = new THREE.Scene(); var light = new THREE.DirectionalLight(0xffffff); light.position.x = 1; light.position.y = 0; light.position.z = 1; //scene.addLight(light); scene.add(light); var renderer = new THREE.WebGLRenderer(); var geometry = new THREE.TorusGeometry(50, 20, 15, 15); var uniforms = new MyUniforms(); // ShaderMaterial var material_base = new THREE.ShaderMaterial( new { uniforms = THREE.UniformsUtils.clone(uniforms), vertex_shader = new GeometryVertexShader().ToString(), fragment_shader = new GeometryFragmentShader().ToString() } ); //renderer.initMaterial(material_base, scene.lights, scene.fog); #region addObject var r = new Random(); Func <float> Math_random = () => (float)r.NextDouble(); for (var i = 0; i < 100; i++) { //var material_uniforms = (MyUniforms)THREE.__ThreeExtras.Uniforms.clone(uniforms); var material_uniforms = (MyUniforms)THREE.UniformsUtils.clone(uniforms); var material = new THREE.ShaderMaterial( new { uniforms = material_uniforms, vertex_shader = new GeometryVertexShader().ToString(), fragment_shader = new GeometryFragmentShader().ToString() } ); material.program = material_base.program; material_uniforms.uDirLightPos.value = light.position; material_uniforms.uDirLightColor.value = light.color; material_uniforms.uBaseColor.value = new THREE.Color((int)(Math_random() * 0xffffff)); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = Math_random() * 800f - 400f; mesh.position.y = Math_random() * 800f - 400f; mesh.position.z = Math_random() * 800f - 400f; mesh.rotation.x = Math_random() * 360f * (float)Math.PI / 180f; mesh.rotation.y = Math_random() * 360f * (float)Math.PI / 180f; mesh.rotation.z = Math_random() * 360f * (float)Math.PI / 180f; //scene.addObject(mesh); scene.add(mesh); } #endregion /////////////////////////////// var c = 0; container.appendChild(renderer.domElement); #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = (int)Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region IsDisposed var IsDisposed = false; Dispose = delegate { if (IsDisposed) { return; } IsDisposed = true; renderer.domElement.Orphanize(); }; #endregion #region tick Native.window.onframe += delegate { if (IsDisposed) { return; } c++; var l = scene.children.Length; Native.document.title = new { l }.ToString(); var time = new IDate().getTime() * 0.0004; //var l = scene.objects.Length; for (var i = 0; i < l; i++) { scene.children[i].rotation.x += 0.01f; scene.children[i].rotation.y += 0.01f; } /* * light.position.x = Math.sin( time ); * light.position.z = Math.cos( time ); * light.position.y = 0.5; * light.position.normalize(); */ renderer.render(scene, camera); }; #endregion #region requestFullscreen Native.Document.body.ondblclick += delegate { if (IsDisposed) { return; } // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.Document.body.requestFullscreen(); }; #endregion }