// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://alteredqualia.com/three/examples/webgl_cars.html // http://alteredqualia.com/xg/examples/animation_physics_terrain.html // https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea // Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P // https://github.com/dotnet/roslyn/issues/98 //Icon image is missing. //At least one new-style screenshot or video is required. //Small tile image is missing. //Please select a Primary Category for your item. //Language is not selected. // 640x400 // 128x128 // 440x280 public Application(IApp page) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128 Console.WriteLine("enter WebGLHZBlendCharacter"); #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { Console.WriteLine("invoke TheServerWithAppWindow.Invoke"); ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text); return; } #endregion { TexturesImages ref0; } // http://www.realitymeltdown.com/WebGL3/character-controller.html // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127 //Native.css Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; //Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46 // used by, for? var clock = new THREE.Clock(); //var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 }; var scene = new THREE.Scene(); var skyScene = new THREE.Scene(); scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; renderer.domElement.AttachToDocument(); // this will mess up // three.OrbitControls.js // onMouseMove //new IStyle(renderer.domElement) //{ // position = IStyle.PositionEnum.absolute, // left = "0px", // top = "0px", // right = "0px", // bottom = "0px", //}; //new { }.With( // async delegate // { // await Native.window.async.onresize; // // if the reload were fast, then we could actually do that:D // Native.document.location.reload(); // } //); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; //cube.position.x = -100; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); while (true) { await Native.window.async.onframe; cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; } } ); #endregion var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); scene.add(blendMesh); var xtrue = true; // run blendMesh.setSpeed(1.0); blendMesh.showSkeleton(!xtrue); var radius = blendMesh.geometry.boundingSphere.radius; Native.document.title = new { radius }.ToString(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); camera.position.set(0.0, radius * 3, radius * 3.5); var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var controls = new THREE.OrbitControls(camera); //controls.noPan = true; //var loader = new THREE.JSONLoader(); //loader.load(new Models.ground().Content.src, // new Action<THREE.Geometry, THREE.Material[]>( // (xgeometry, materials) => // { // var ground = new THREE.Mesh(xgeometry, materials[0]); // ground.scale.set(20, 20, 20); // ground.receiveShadow = true; // ground.castShadow = true; // scene.add(ground); // } // ) // ); #region createSky var urls = new[] { new px().src, new nx().src, new py().src, new ny().src, new pz().src, new nz().src, }; var textureCube = THREE.ImageUtils.loadTextureCube(urls); dynamic shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; // We're inside the box, so make sure to render the backsides // It will typically be rendered first in the scene and without depth so anything else will be drawn in front var material = new THREE.ShaderMaterial(new { fragmentShader = shader.fragmentShader, vertexShader = shader.vertexShader, uniforms = shader.uniforms, depthWrite = false, side = THREE.BackSide }); // THREE.CubeGeometry has been renamed to THREE.BoxGeometry // The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values. var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material); //skyMesh.renderDepth = -10; skyScene.add(skyMesh); #endregion ////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height, //// new //// { //// minFilter = THREE.LinearFilter, //// magFilter = THREE.LinearFilter, //// format = THREE.RGBFormat, //// stencilBufer = false //// } ////); ////var composer = new THREE.EffectComposer(renderer, renderTarget); ////composer.addPass(new THREE.RenderPass(skyScene, skyCamera)); ////composer.addPass(new THREE.RenderPass(scene, camera)); ////#region vblur ////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader); ////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader); ////var bluriness = 6; ////// Show Details Severity Code Description Project File Line //////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183 ////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; ////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; ////(hblur.uniforms as dynamic).r.value = 0.5; ////(vblur.uniforms as dynamic).r.value = 0.5; ////vblur.renderToScreen = true; ////composer.addPass(hblur); ////composer.addPass(vblur); ////#endregion //composer.addPass(new THREE.RenderPass(scene, camera)); // #region onframe Native.window.onframe += delegate { var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); blendMesh.updateSkeletonHelper(); } controls.center.copy(blendMesh.position); controls.center.y += radius * 2.0; controls.update(); //var camOffset = camera.position.clone().sub(controls.center); //camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone(); //camera.position = controls.center.clone().add(camOffset); skyCamera.rotation.copy(camera.rotation); //composer.render(0.1); //renderer.clear(); renderer.render(skyScene, skyCamera); renderer.render(scene, camera); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); } ) ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://threejs.org/examples/#webgl_materials_cubemap_dynamic // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs // http://threejs.org/examples/#webgl_postprocessing_dof // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html" { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var clock = new THREE.Clock(); var radius = 100; var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000); camera.position.z = 200; var skyScene = new THREE.Scene(); var scene = new THREE.Scene(); //scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.sortObjects = false; renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; //var material_depth = new THREE.MeshDepthMaterial(); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List <THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); var sw = Stopwatch.StartNew(); for (var i = 1; i < 5; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 4 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 300; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); var _i = i; var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new WebGLHZBlendCharacter.Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); blendMesh.position.x = (_i + 2) % 4 * 500 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 300; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); } #endregion // maskpass // THREE.EffectComposer relies on THREE.CopyShader var composer = new THREE.EffectComposer(renderer); var renderPass = new THREE.RenderPass(scene, camera); composer.addPass(renderPass); // THREE.BokehPass relies on THREE.BokehShader var bokehPass = new THREE.BokehPass(scene, camera, new { focus = 1.0, aperture = 0.025, maxblur = 1.0, width = Native.window.Width, height = Native.window.Height }); bokehPass.renderToScreen = true; composer.addPass(bokehPass); renderer.autoClear = false; var controls = new THREE.OrbitControls(camera); Native.document.onclick += delegate { // THREE.AnimationHandler.add() has been deprecated. // how to make it work with bokah? //THREE.AnimationHandler.update(1); }; #region onframe Native.window.onframe += delegate { controls.update(); var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); //THREE.AnimationHandler.update(stepSize); } camera.position = controls.center.clone(); skyCamera.rotation.copy(camera.rotation); composer.render(0.1); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://threejs.org/examples/#webgl_materials_cubemap_dynamic // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs // http://threejs.org/examples/#webgl_postprocessing_dof // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html" { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var clock = new THREE.Clock(); var radius = 100; var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000); camera.position.z = 200; var skyScene = new THREE.Scene(); var scene = new THREE.Scene(); //scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.sortObjects = false; renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; //var material_depth = new THREE.MeshDepthMaterial(); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); var sw = Stopwatch.StartNew(); for (var i = 1; i < 5; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 4 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 300; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); var _i = i; var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new WebGLHZBlendCharacter.Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); blendMesh.position.x = (_i + 2) % 4 * 500 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 300; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); } #endregion // maskpass // THREE.EffectComposer relies on THREE.CopyShader var composer = new THREE.EffectComposer(renderer); var renderPass = new THREE.RenderPass(scene, camera); composer.addPass(renderPass); // THREE.BokehPass relies on THREE.BokehShader var bokehPass = new THREE.BokehPass(scene, camera, new { focus = 1.0, aperture = 0.025, maxblur = 1.0, width = Native.window.Width, height = Native.window.Height }); bokehPass.renderToScreen = true; composer.addPass(bokehPass); renderer.autoClear = false; var controls = new THREE.OrbitControls(camera); Native.document.onclick += delegate { // THREE.AnimationHandler.add() has been deprecated. // how to make it work with bokah? //THREE.AnimationHandler.update(1); }; #region onframe Native.window.onframe += delegate { controls.update(); var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); //THREE.AnimationHandler.update(stepSize); } camera.position = controls.center.clone(); skyCamera.rotation.copy(camera.rotation); composer.render(0.1); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); }
// http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html // http://alteredqualia.com/three/examples/webgl_cars.html // http://alteredqualia.com/xg/examples/animation_physics_terrain.html // https://chrome.google.com/webstore/detail/webglhzblendcharacter/cgnjcccfcjhdnbfgjgllglbhfcgndmea // Could not connect to the feed specified at 'http://my.jsc-solutions.net/nuget'. P // https://github.com/dotnet/roslyn/issues/98 //Icon image is missing. //At least one new-style screenshot or video is required. //Small tile image is missing. //Please select a Primary Category for your item. //Language is not selected. // 640x400 // 128x128 // 440x280 public Application(IApp page) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150128 Console.WriteLine("enter WebGLHZBlendCharacter"); #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { Console.WriteLine("invoke TheServerWithAppWindow.Invoke"); ChromeTCPServer.TheServerWithAppWindow.Invoke(AppSource.Text); return; } #endregion { TexturesImages ref0; } // http://www.realitymeltdown.com/WebGL3/character-controller.html // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201501/20150127 //Native.css Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; //Error CS0246 The type or namespace name 'THREE' could not be found(are you missing a using directive or an assembly reference?) WebGLHZBlendCharacter Application.cs 46 // used by, for? var clock = new THREE.Clock(); //var keys = new { LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, A = 65, S = 83, D = 68, W = 87 }; var scene = new THREE.Scene(); var skyScene = new THREE.Scene(); scene.fog = new THREE.Fog(0xA26D41, 1000, 20000); //scene.add(new THREE.AmbientLight(0xaaaaaa)); scene.add(new THREE.AmbientLight(0xffffff)); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; //xlight.shadowCameraVisible = true; scene.add(light); var renderer = new THREE.WebGLRenderer(new { antialias = true, alpha = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.autoClear = false; renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; renderer.domElement.AttachToDocument(); // this will mess up // three.OrbitControls.js // onMouseMove //new IStyle(renderer.domElement) //{ // position = IStyle.PositionEnum.absolute, // left = "0px", // top = "0px", // right = "0px", // bottom = "0px", //}; //new { }.With( // async delegate // { // await Native.window.async.onresize; // // if the reload were fast, then we could actually do that:D // Native.document.location.reload(); // } //); #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. var planeGeometry = new THREE.PlaneGeometry(1000, 1000); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(100, 100, 100); scene.add(parent); } var random = new Random(); var meshArray = new List <THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); for (var i = 1; i < 100; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 2 * 500 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 400; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); } #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; //cube.position.x = -100; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); while (true) { await Native.window.async.onframe; cube.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; } } ); #endregion var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); scene.add(blendMesh); var xtrue = true; // run blendMesh.setSpeed(1.0); blendMesh.showSkeleton(!xtrue); var radius = blendMesh.geometry.boundingSphere.radius; Native.document.title = new { radius }.ToString(); var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); camera.position.set(0.0, radius * 3, radius * 3.5); var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000); skyCamera.position.set(0.0, radius * 3, radius * 3.5); var controls = new THREE.OrbitControls(camera); //controls.noPan = true; //var loader = new THREE.JSONLoader(); //loader.load(new Models.ground().Content.src, // new Action<THREE.Geometry, THREE.Material[]>( // (xgeometry, materials) => // { // var ground = new THREE.Mesh(xgeometry, materials[0]); // ground.scale.set(20, 20, 20); // ground.receiveShadow = true; // ground.castShadow = true; // scene.add(ground); // } // ) // ); #region createSky var urls = new[] { new px().src, new nx().src, new py().src, new ny().src, new pz().src, new nz().src, }; var textureCube = THREE.ImageUtils.loadTextureCube(urls); dynamic shader = THREE.ShaderLib["cube"]; shader.uniforms["tCube"].value = textureCube; // We're inside the box, so make sure to render the backsides // It will typically be rendered first in the scene and without depth so anything else will be drawn in front var material = new THREE.ShaderMaterial(new { fragmentShader = shader.fragmentShader, vertexShader = shader.vertexShader, uniforms = shader.uniforms, depthWrite = false, side = THREE.BackSide }); // THREE.CubeGeometry has been renamed to THREE.BoxGeometry // The box dimension size doesn't matter that much when the camera is in the center. Experiment with the values. var skyMesh = new THREE.Mesh(new THREE.CubeGeometry(10000, 10000, 10000, 1, 1, 1), material); //skyMesh.renderDepth = -10; skyScene.add(skyMesh); #endregion ////var renderTarget = new THREE.WebGLRenderTarget((int)Native.window.Width, (int)Native.window.Height, //// new //// { //// minFilter = THREE.LinearFilter, //// magFilter = THREE.LinearFilter, //// format = THREE.RGBFormat, //// stencilBufer = false //// } ////); ////var composer = new THREE.EffectComposer(renderer, renderTarget); ////composer.addPass(new THREE.RenderPass(skyScene, skyCamera)); ////composer.addPass(new THREE.RenderPass(scene, camera)); ////#region vblur ////var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader); ////var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader); ////var bluriness = 6; ////// Show Details Severity Code Description Project File Line //////Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs 183 ////(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width; ////(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height; ////(hblur.uniforms as dynamic).r.value = 0.5; ////(vblur.uniforms as dynamic).r.value = 0.5; ////vblur.renderToScreen = true; ////composer.addPass(hblur); ////composer.addPass(vblur); ////#endregion //composer.addPass(new THREE.RenderPass(scene, camera)); // #region onframe Native.window.onframe += delegate { var scale = 1.0; var delta = clock.getDelta(); var stepSize = delta * scale; if (stepSize > 0) { //characterController.update(stepSize, scale); //gui.setSpeed(blendMesh.speed); THREE.AnimationHandler.update(stepSize); blendMesh.updateSkeletonHelper(); } controls.center.copy(blendMesh.position); controls.center.y += radius * 2.0; controls.update(); //var camOffset = camera.position.clone().sub(controls.center); //camOffset.normalize().multiplyScalar(750); camera.position = controls.center.clone(); //camera.position = controls.center.clone().add(camOffset); skyCamera.rotation.copy(camera.rotation); //composer.render(0.1); //renderer.clear(); renderer.render(skyScene, skyCamera); renderer.render(scene, camera); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); } ) ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://stackoverflow.com/questions/29048161/how-to-export-a-three-js-scene-into-a-360-texture-for-photosphere Native.body.style.background = "black"; Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); // https://github.com/turban/photosphere/blob/gh-pages/stolanuten.html var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer(); renderer.setSize(Native.window.Width, Native.window.Height); // the thing you attach to dom renderer.domElement.AttachToDocument(); // Z:\jsc.svn\examples\javascript\audio\synergy\MovingMusicByBorismus\Application.cs var sphere = new THREE.Mesh( new THREE.SphereGeometry(100, 20, 20), new THREE.MeshBasicMaterial( new { //20150608_165300.jpg //map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets.stolanuten().src) map = THREE.ImageUtils.loadTexture(new HTML.Images.FromAssets._20150608_165300().src) } ) ); sphere.scale.x = -1; sphere.AttachTo(scene); var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 1000); camera.position.x = 0.1; var controls = new THREE.OrbitControls(camera, renderer.domElement); Native.window.onframe += delegate { controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; Native.window.onresize += delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; // http://www.visualstudio.com/en-us/news/vs2015-vs }
// no animation no more? /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page = null) { // 20150527 i see a red blob. broken? var sw = Stopwatch.StartNew(); // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLMD2MorphtargetExample\WebGLMD2MorphtargetExample\Application.cs Console.WriteLine("before three"); // fails with gallery? why? //Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); Console.WriteLine("InitializeContent"); // http://oos.moxiecode.com/js_webgl/md5_test/ var oldTime = 0L; var cameraTarget = new THREE.Vector3 { x = 0, y = 300, z = 0 }; var positionVector = new THREE.Vector3(); var lookVector = new THREE.Vector3(); var lastframe = 0; var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 1000, 5000); var camera = new THREE.PerspectiveCamera(50, Native.window.aspect, 1, 10000); camera.position.z = 800; camera.position.y = 100; camera.lookAt(scene.position); scene.add(camera); // floor var plane = new THREE.PlaneGeometry(10000, 10000, 50, 50); var floorMaterial = new THREE.MeshBasicMaterial(new { wireframe = true, color = 0x333333 }); var floor = new THREE.Mesh(plane, floorMaterial); floor.rotation.x = -Math.PI / 2; scene.add(floor); // renderer var renderer = new THREE.WebGLRenderer(new { antialias = true }); //renderer.setClearColorHex(0x000000); renderer.domElement.AttachToDocument(); // 0200001f WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2 // script: error JSC1000: unsupported flow detected, try to simplify. //Assembly V:\WebGLBossHarvesterByOutsideOfSociety.Application.exe //DeclaringType WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2, //OwnerMethod <.ctor > b__5 //Offset 005b // did the problem just dissapear? var controls = new THREE.OrbitControls(camera, renderer.domElement); #region harvester_md5mesh new THREE.JSONLoader().load( new WebGLBossHarvesterByOutsideOfSociety.Models.harvester_md5mesh().Content.src, (Action<dynamic>) (geometry => { Console.WriteLine("geometry ready!"); //console.log("Number of bones: "+geometry.bones.length); var material = new THREE.MeshBasicMaterial(new { color = 0xffffff, wireframe = true, opacity = 0.25, transparent = true, skinning = true }); object geometry_object = geometry; var skin = new THREE.SkinnedMesh(geometry_object, material); scene.add(skin); object geometry_animation = geometry.animation; //THREE.AnimationHandler.add(geometry_animation); //var animation = new THREE.Animation(skin, "walk1"); //animation.play(); skin.rotation.x = -Math.PI / 2; skin.rotation.z = -Math.PI / 2; // view-source:http://threejs.org/examples/webgl_animation_skinning_morph.html var boneArray = new Dictionary<int, THREE.Mesh>(); var boneContainer = new THREE.Object3D(); boneContainer.rotation.x = -Math.PI / 2; boneContainer.rotation.z = -Math.PI / 2; scene.add(boneContainer); var index = 0; var pmaterial = new THREE.MeshPhongMaterial(new { color = 0xff0000 }); //for (var b = 1; b != skin.bones.Length; b++) //{ // var bone = skin.bones[b]; // var nc = bone.children.Length; // for (var c = 0; c != nc; c++) // { // var child = bone.children[c]; // var size = Math.Min(child.position.length() * 0.05, 8); // var cylinder = new THREE.CylinderGeometry(size, 0.1, child.position.length(), 6); // // ERROR: Matrix's .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code. // cylinder.applyMatrix( // new THREE.Matrix4().makeRotationFromEuler( // new THREE.Euler(Math.PI / 2, 0, 0) // ) // ); // cylinder.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0, 0, 0.5 * child.position.length()))); // var mesh = new THREE.Mesh(cylinder, pmaterial); // boneArray[child.id] = mesh; // boneContainer.add(mesh); // } //} #region render Native.window.onframe += delegate { Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null); var time = Date_now(); double delta = time - oldTime; if (oldTime == 0) { delta = 1000 / 60.0; } oldTime = time; THREE.AnimationHandler.update(delta / 1000.0); // does not exist? //for (var b = 1; b != skin.bones.Length; b++) //{ // var bone = skin.bones[b]; // var nc = bone.children.Length; // for (var c = 0; c != nc; c++) // { // var child = bone.children[c]; // var child_bone = (THREE.Bone)(object)child; // var id = child.id; // var mesh = boneArray[id]; // positionVector.getPositionFromMatrix(child_bone.skinMatrix); // mesh.position.copy(positionVector); // var child_parent_bone = (THREE.Bone)(object)child.parent; // lookVector.getPositionFromMatrix(child_parent_bone.skinMatrix); // mesh.lookAt(lookVector); // } //} boneContainer.position.z = skin.position.z; //var frame = (int)Math.Floor(animation.currentTime * 24.0); var frame = (int)Math.Floor(sw.ElapsedMilliseconds * 24.0); if (frame >= 0 && lastframe > frame) { skin.position.z += 304.799987793; // got that from the root bone, total movement of one walk cycle } lastframe = frame; var speed = delta * 0.131; cameraTarget.z += speed; if (skin.position.z > floor.position.z + 1000.0) { floor.position.z += 1000.0; }; //camera.position.x = 800.0 * Math.Sin(time / 3000.0); //camera.position.z = cameraTarget.z + 800.0 * Math.Cos(time / 3000.0); //camera.lookAt(cameraTarget); controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; #endregion } ) ); #endregion //var harvester_src = new WebGLBossHarvesterByOutsideOfSociety.Models.harvester().Content.src; //Console.WriteLine("before harvester " + new { harvester_src }); //loader.load(harvester_src, harvesterLoaded); // lights var pointLight = new THREE.PointLight(0xffffff, 1.0, 0); pointLight.AttachTo(camera); #region AtResize Action AtResize = delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion Console.WriteLine("renderer ready!"); //#region onmousedown //Native.document.onmousedown += // e => // { // if (e.MouseButton == IEvent.MouseButtonEnum.Middle) // { // if (Native.document.pointerLockElement == Native.document.body) // { // // cant requestFullscreen while pointerLockElement // Console.WriteLine("exitPointerLock"); // Native.document.exitPointerLock(); // //Native.document.exitFullscreen(); // return; // } // Console.WriteLine("requestFullscreen"); // //Native.document.body.requestFullscreen(); // Native.document.body.requestPointerLock(); // return; // } // }; //#endregion #region ZeProperties var ze = new ZeProperties(); ze.Show(); ze.treeView1.Nodes.Clear(); ze.Add(() => renderer); ze.Add(() => controls); ze.Add(() => scene); ze.Left = 0; #endregion }
/// <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) { Native.body.style.overflow = IStyle.OverflowEnum.hidden; // https://3dwarehouse.sketchup.com/model.html?id=e78dca4863e8572d86ea4fa6bd93bc43 // https://3dwarehouse.sketchup.com/model.html?id=38d1045b8de1cf12b08e958a32ef3184 var oo = new List<THREE.Object3D>(); #region scene var window = Native.window; // scene var scene = new THREE.Scene(); //var ambient = new THREE.AmbientLight(0x101030); //// addTrace? //scene.add(ambient); // should jsc package c# source code along here for code lense like peeking? new THREE.AmbientLight(0x101030).AttachTo(scene); var lightOffset = new THREE.Vector3(0, 1000, 1000.0); // why is idl showing 110? var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 1.0); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.3; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; light.AttachTo(scene); { var planeGeometry = new THREE.CubeGeometry(512, 512, 1); var plane = new THREE.Mesh( planeGeometry, material: new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); plane.receiveShadow = true; var ZeFloor = new THREE.Object3D(); plane.AttachTo(ZeFloor); ZeFloor.rotation.x = -Math.PI / 2; ZeFloor.scale.set(10, 10, 10); ZeFloor.AttachTo(scene); } var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.Width, window.Height); renderer.domElement.AttachToDocument(); renderer.domElement.style.SetLocation(0, 0); renderer.shadowMapEnabled = true; renderer.shadowMapType = THREE.PCFSoftShadowMap; //var mouseX = 0; //var mouseY = 0; //var st = new Stopwatch(); //st.Start(); //Native.window.document.onmousemove += // e => // { // mouseX = e.CursorX - Native.window.Width / 2; // mouseY = e.CursorY - Native.window.Height / 2; // }; var camera = new THREE.PerspectiveCamera( //40, 20, //10, Native.window.aspect, 2, // how far out do we want to zoom? 200000 //9000 ); camera.position.set(-1200, 800, -3200); camera.AttachTo(scene); var controls = new THREE.OrbitControls(camera, renderer.domElement); Native.window.onframe += delegate { //oo.WithEach( // x => // x.rotation.y = (st.ElapsedMilliseconds + mouseX * 100) * 0.00001 //); //camera.position.x += (mouseX - camera.position.x) * .05; //camera.position.y += (-mouseY - camera.position.y) * .05; //camera.lookAt(scene.position); controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; Native.window.onresize += delegate { camera.aspect = window.aspect; camera.updateProjectionMatrix(); renderer.setSize(window.Width, window.Height); }; #endregion #region Comanche new Comanche().Source.Task.ContinueWithResult( Comanche => { Comanche.position.y = 200; //dae.position.z = 280; Comanche.AttachTo(scene); //scene.add(dae); oo.Add(Comanche); // wont do it //dae.castShadow = true; // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); //helper.update(); //// If you want a visible bounding box //scene.add(helper); Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // the rotors? Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); Comanche.scale.set(0.5, 0.5, 0.5); //helper.scale.set(0.5, 0.5, 0.5); var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { //dae.children[0].children[0].children.Last().al //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; //rotation.y = sw.ElapsedMilliseconds * 0.01; Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001; //dae.children[0].children[0].children.Last().app }; } ); #endregion //#region ZeProperties //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; //#endregion //f.treeView1.Nodes.Add("controls : " + typeof(THREE.OrbitControls)).Tag = controls; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // 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) { // https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed #region ChromeTCPServer dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { #region AtFormCreated FormStyler.AtFormCreated = ss => { ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // this is working? var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget()); }; #endregion chrome.Notification.DefaultTitle = "Heat Zeeker"; chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text, AtFormCreated: FormStyler.AtFormCreated ); return; } #endregion Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // jsc, add THREE // ... ok. // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs // this is not isometric. // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 var camera = new THREE.OrthographicCamera( Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2 , // if we change these values what will change? -1000, 1000 ); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; var scene = new THREE.Scene(); // Grid var size = 600; var step = 50; Func <double> random = new Random().NextDouble; // how do I add a new ground box? { var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2); var material = new THREE.MeshLambertMaterial(new { color = 0xB27D51 // , shading = THREE.FlatShading, overdraw = 0.5 }); { var cube = new THREE.Mesh(geometry, material); // why cant we get the shadows?? cube.receiveShadow = true; cube.scale.y = Math.Floor(random() * 2 + 1); cube.position.x = 0; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.y = -2; cube.position.z = 0; scene.add(cube); } } { var geometry = new THREE.Geometry(); for (var i = -size; i <= size; i += step) { ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size)); ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size)); } var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 }); var line = new THREE.Line(geometry, material, mode: THREE.LinePieces); scene.add(line); } var interactiveObjects = new List <THREE.Object3D>(); #region Cubes { for (var i = 0; i < 8; i++) { new HZBunker().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZWaterTower().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); // http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows // http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZCannon().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; cube.rotation.y = random() * Math.PI * 2; scene.add(cube); interactiveObjects.Add(cube); } ); } } #endregion // we need expression evaluator with intellisense for live debugging sessions #region Lights var ambientLight = new THREE.AmbientLight((int)(random() * 0x10)); scene.add(ambientLight); // can we get our shadows? { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } #endregion //var renderer = new THREE.CanvasRenderer(); var renderer = new THREE.WebGLRenderer(); renderer.shadowMapEnabled = true; // background-color: #B27D51; renderer.setClearColor(0xB27D51); //renderer.setSize( // Native.window.Width , // Native.window.Height * 10 // ); renderer.setSize(); renderer.domElement.AttachToDocument(); Native.window.onresize += delegate { camera.left = Native.window.Width / -2; camera.right = Native.window.Width / 2; camera.top = Native.window.Height / 2; camera.bottom = Native.window.Height / -2; camera.updateProjectionMatrix(); renderer.setSize(); }; //window.addEventListener( 'resize', onWindowResize, false ); //#region Comanche //new Comanche().Source.Task.ContinueWithResult( // Comanche => // { // Comanche.position.y = 200; // //dae.position.z = 280; // Comanche.AttachTo(scene); // //scene.add(dae); // //oo.Add(Comanche); // // wont do it // //dae.castShadow = true; // // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d // //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); // //helper.update(); // //// If you want a visible bounding box // //scene.add(helper); // Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // // the rotors? // Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); // Comanche.scale.set(0.5, 0.5, 0.5); // //helper.scale.set(0.5, 0.5, 0.5); // var sw = Stopwatch.StartNew(); // Native.window.onframe += delegate // { // //dae.children[0].children[0].children.Last().al // //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; // //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; // //rotation.y = sw.ElapsedMilliseconds * 0.01; // Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001; // //dae.children[0].children[0].children.Last().app // }; // } //); //#endregion //#region ee //// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs //// can we restile the window as the pin window in IDE? //var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual }; //var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee); ////ee.AutoSize = AutoSizeMode. ////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height); //ee.ClientSize = new System.Drawing.Size(200, 24); //ee.Show(); ////ee_camera_y. //ee_camera_y.TextChanged += delegate //{ // camera.position.y = double.Parse(ee_camera_y.Text); //}; //#endregion var s = Stopwatch.StartNew(); var controls = new THREE.OrbitControls(camera, renderer.domElement); // http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js // var effect = new THREE.OculusRiftEffect( //renderer, new //{ // worldScale = 100, // //HMD // } //); // effect.setSize(1920, 1080); Native.window.onframe += e => { // jsc, when can we have the edit and continue already? //var timer = s.ElapsedMilliseconds * 0.1; //var timer = s.ElapsedMilliseconds * 0.0001; //camera.position.x = Math.Cos(timer) * 200; //camera.position.z = Math.Sin(timer) * 200; // camera.position.z = 200; //camera.position.y = 100; //camera.position.y = Math.Sin(timer * 0.1) * 200; controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); //effect.render(scene, camera); }; //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; // view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html //var mouse2D = new THREE.Vector3(0, 10000, 0.5); //renderer.domElement.onclick += // e => // { // e.preventDefault(); // mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1; // mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1; // var vector = new THREE.Vector3( // (e.CursorX / (double)Native.window.Width) * 2 - 1, // -(e.CursorY / (double)Native.window.Height) * 2 + 1, // 0.5); // // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs // var projector = new THREE.Projector(); // projector.unprojectVector(vector, camera); // // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast // // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray // // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html // // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera // // use picking ray since it's an orthographic camera // // doesnt fkin work ??? // //var raycaster = projector.pickingRay(vector, camera); // var raycaster = projector.pickingRay(mouse2D.clone(), camera); // //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); // var intersects = raycaster.intersectObjects(interactiveObjects.ToArray()); // // https://github.com/mrdoob/three.js/issues/599 // Native.document.title = new { intersects.Length }.ToString(); // }; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed #region ChromeTCPServer dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { #region AtFormCreated FormStyler.AtFormCreated = ss => { ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // this is working? var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget()); }; #endregion chrome.Notification.DefaultTitle = "Heat Zeeker"; chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text, AtFormCreated: FormStyler.AtFormCreated ); return; } #endregion Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // jsc, add THREE // ... ok. // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs // this is not isometric. // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 var camera = new THREE.OrthographicCamera( Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2 , // if we change these values what will change? -1000, 1000 ); camera.position.x = 200; camera.position.y = 100; camera.position.z = 200; var scene = new THREE.Scene(); // Grid var size = 600; var step = 50; Func<double> random = new Random().NextDouble; // how do I add a new ground box? { var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2); var material = new THREE.MeshLambertMaterial(new { color = 0xB27D51 // , shading = THREE.FlatShading, overdraw = 0.5 }); { var cube = new THREE.Mesh(geometry, material); // why cant we get the shadows?? cube.receiveShadow = true; cube.scale.y = Math.Floor(random() * 2 + 1); cube.position.x = 0; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.y = -2; cube.position.z = 0; scene.add(cube); } } { var geometry = new THREE.Geometry(); for (var i = -size; i <= size; i += step) { ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size)); ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size)); } var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 }); var line = new THREE.Line(geometry, material, mode: THREE.LinePieces); scene.add(line); } var interactiveObjects = new List<THREE.Object3D>(); #region Cubes { for (var i = 0; i < 8; i++) { new HZBunker().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZWaterTower().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); // http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows // http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; scene.add(cube); interactiveObjects.Add(cube); } ); new HZCannon().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 2.0; cube.scale.y = 2.0; cube.scale.z = 2.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; cube.rotation.y = random() * Math.PI * 2; scene.add(cube); interactiveObjects.Add(cube); } ); } } #endregion // we need expression evaluator with intellisense for live debugging sessions #region Lights var ambientLight = new THREE.AmbientLight((int)(random() * 0x10)); scene.add(ambientLight); // can we get our shadows? { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } { var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5); directionalLight.position.x = random() - 0.5; directionalLight.position.y = 400; directionalLight.position.z = random() - 0.5; directionalLight.position.normalize(); scene.add(directionalLight); } #endregion //var renderer = new THREE.CanvasRenderer(); var renderer = new THREE.WebGLRenderer(); renderer.shadowMapEnabled = true; // background-color: #B27D51; renderer.setClearColor(0xB27D51); //renderer.setSize( // Native.window.Width , // Native.window.Height * 10 // ); renderer.setSize(); renderer.domElement.AttachToDocument(); Native.window.onresize += delegate { camera.left = Native.window.Width / -2; camera.right = Native.window.Width / 2; camera.top = Native.window.Height / 2; camera.bottom = Native.window.Height / -2; camera.updateProjectionMatrix(); renderer.setSize(); }; //window.addEventListener( 'resize', onWindowResize, false ); //#region Comanche //new Comanche().Source.Task.ContinueWithResult( // Comanche => // { // Comanche.position.y = 200; // //dae.position.z = 280; // Comanche.AttachTo(scene); // //scene.add(dae); // //oo.Add(Comanche); // // wont do it // //dae.castShadow = true; // // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d // //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000); // //helper.update(); // //// If you want a visible bounding box // //scene.add(helper); // Comanche.children[0].children[0].children.WithEach(x => x.castShadow = true); // // the rotors? // Comanche.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); // Comanche.scale.set(0.5, 0.5, 0.5); // //helper.scale.set(0.5, 0.5, 0.5); // var sw = Stopwatch.StartNew(); // Native.window.onframe += delegate // { // //dae.children[0].children[0].children.Last().al // //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; // //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; // //rotation.y = sw.ElapsedMilliseconds * 0.01; // Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001; // //dae.children[0].children[0].children.Last().app // }; // } //); //#endregion //#region ee //// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs //// can we restile the window as the pin window in IDE? //var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual }; //var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee); ////ee.AutoSize = AutoSizeMode. ////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height); //ee.ClientSize = new System.Drawing.Size(200, 24); //ee.Show(); ////ee_camera_y. //ee_camera_y.TextChanged += delegate //{ // camera.position.y = double.Parse(ee_camera_y.Text); //}; //#endregion var s = Stopwatch.StartNew(); var controls = new THREE.OrbitControls(camera, renderer.domElement); // http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js // var effect = new THREE.OculusRiftEffect( //renderer, new //{ // worldScale = 100, // //HMD // } //); // effect.setSize(1920, 1080); Native.window.onframe += e => { // jsc, when can we have the edit and continue already? //var timer = s.ElapsedMilliseconds * 0.1; //var timer = s.ElapsedMilliseconds * 0.0001; //camera.position.x = Math.Cos(timer) * 200; //camera.position.z = Math.Sin(timer) * 200; // camera.position.z = 200; //camera.position.y = 100; //camera.position.y = Math.Sin(timer * 0.1) * 200; controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); //effect.render(scene, camera); }; //var ze = new ZeProperties(); //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); ////ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; // view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html //var mouse2D = new THREE.Vector3(0, 10000, 0.5); //renderer.domElement.onclick += // e => // { // e.preventDefault(); // mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1; // mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1; // var vector = new THREE.Vector3( // (e.CursorX / (double)Native.window.Width) * 2 - 1, // -(e.CursorY / (double)Native.window.Height) * 2 + 1, // 0.5); // // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs // var projector = new THREE.Projector(); // projector.unprojectVector(vector, camera); // // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast // // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray // // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html // // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera // // use picking ray since it's an orthographic camera // // doesnt fkin work ??? // //var raycaster = projector.pickingRay(vector, camera); // var raycaster = projector.pickingRay(mouse2D.clone(), camera); // //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); // var intersects = raycaster.intersectObjects(interactiveObjects.ToArray()); // // https://github.com/mrdoob/three.js/issues/599 // Native.document.title = new { intersects.Length }.ToString(); // }; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // X:\jsc.svn\examples\javascript\CanvasMarchinAntsExperiment\CanvasMarchinAntsExperiment\Application.cs // http://mattdesl.svbtle.com/drawing-lines-is-hard Native.body.Clear(); Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // http://threejs.org/examples/webgl_lines_dashed.html var objects = new List<THREE.Line>(); var camera = new THREE.PerspectiveCamera(60, Native.window.aspect, 1, 200); camera.position.z = 150; var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x111111, 150, 200); var root = new THREE.Object3D(); var subdivisions = 6; var recursion = 1; var points = hilbert3D(new THREE.Vector3(), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7); Console.WriteLine( new { points.Length } ); #region spline var spline = new THREE.Spline(points); var geometrySpline = new THREE.Geometry(); for (var i = 0; i < points.Length * subdivisions; i++) { var index = (double)i / (points.Length * subdivisions); var position = spline.getPoint(index); geometrySpline.vertices[i] = new THREE.Vector3(position.x, position.y, position.z); Console.WriteLine( new { i, index, position.x, position.y, position.z } ); } #endregion var geometryCube = cube(50); geometryCube.computeLineDistances(); geometrySpline.computeLineDistances(); { var ogeometrySpline = new THREE.Line(geometrySpline, new THREE.LineDashedMaterial( new { color = 0xffffff, dashSize = 1, gapSize = 0.5 } ), THREE.LineStrip); objects.Add(ogeometrySpline); scene.add(ogeometrySpline); ogeometrySpline.AttachTo(scene); } { var ogeometryCube = new THREE.Line(geometryCube, new THREE.LineDashedMaterial( new { color = 0xffaa00, dashSize = 3, gapSize = 1, linewidth = 2 } ), THREE.LinePieces); objects.Add(ogeometryCube); ogeometryCube.AttachTo(scene); } { var geometry = new THREE.Geometry { vertices = new[] { new THREE.Vector3(0, 0, 0), new THREE.Vector3(100, 0, 0) } }; var oline = new THREE.Line(geometry, new THREE.LineDashedMaterial( new { color = 0x00aaff, dashSize = 3, gapSize = 3, linewidth = 20 } ), THREE.LinePieces); objects.Add(oline); //scene.add(o); oline.AttachTo(scene); } var renderer = new THREE.WebGLRenderer(new { antialias = true }); renderer.setClearColor(0x111111); //renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( Native.window.Width, Native.window.Height ); renderer.domElement.AttachToDocument(); var controls = new THREE.OrbitControls(camera, renderer.domElement); var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { //var time = sw.ElapsedMilliseconds * 0.001; //for (var i = 0; i < objects.Count; i++) //{ // var o = objects[i]; // //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1); // o.rotation.x = 0.25 * time; // o.rotation.y = 0.25 * time; //} controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; //var ze = new ZeProperties //{ // //() => renderer //}; //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // why are the trucks black? // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae // what will happen if we resync THREE version from 70 to? Native.document.title = new { THREE.REVISION }.ToString(); var oo = new List <THREE.Object3D>(); #region scene var window = Native.window; var camera = new THREE.PerspectiveCamera( 45, window.aspect, 1, 2000 ); camera.position.z = 400; // scene var scene = new THREE.Scene(); //var ambient = new THREE.AmbientLight(0x101030); var ambient = new THREE.AmbientLight(0x808080); scene.add(ambient); var directionalLight = new THREE.DirectionalLight(0xffeedd, 0.7); directionalLight.position.set(0, 0, 1); scene.add(directionalLight); // WebGLRenderer preserveDrawingBuffer var renderer = new THREE.WebGLRenderer( new { preserveDrawingBuffer = true } ); // https://github.com/mrdoob/three.js/issues/3836 renderer.setClearColor(0xfffff, 1); renderer.setSize(window.Width, window.Height); renderer.domElement.AttachToDocument(); renderer.domElement.style.SetLocation(0, 0); this.canvas = (IHTMLCanvas)renderer.domElement; var mouseX = 0; var mouseY = 0; var st = new Stopwatch(); st.Start(); var controls = new THREE.OrbitControls(camera, renderer.domElement); Native.window.onframe += delegate { renderer.clear(); //camera.aspect = window.aspect; //camera.aspect = canvas.clientWidth / (double)canvas.clientHeight; //camera.aspect = canvas.aspect; oo.WithEach( x => x.rotation.y = st.ElapsedMilliseconds * 0.0001 ); controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; Native.window.onresize += delegate { if (canvas.parentNode == Native.document.body) { renderer.setSize(window.Width, window.Height); } }; #endregion new truck().Source.Task.ContinueWithResult( dae => { //dae.scale.x = 30; //dae.scale.y = 30; //dae.scale.z = 30; dae.position.z = 65; dae.scale.x = 10; dae.scale.y = 10; dae.scale.z = 10; dae.position.y = -80; scene.add(dae); oo.Add(dae); } ); //var ref0 = "assets/WebGLColladaExperiment/HZCannon_capture_009_04032013_192834.png"; //new HZCannon().Source.Task.ContinueWithResult( // dae => // { // //dae.scale.x = 30; // //dae.scale.y = 30; // //dae.scale.z = 30; // dae.castShadow = true; // dae.receiveShadow = true; // dae.scale.x = 3; // dae.scale.y = 3; // dae.scale.z = 3; // dae.position.y = -80; // scene.add(dae); // oo.Add(dae); // } //); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // why are the trucks black? // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131110-dae // what will happen if we resync THREE version from 70 to? Native.document.title = new { THREE.REVISION }.ToString(); var oo = new List<THREE.Object3D>(); #region scene var window = Native.window; var camera = new THREE.PerspectiveCamera( 45, window.aspect, 1, 2000 ); camera.position.z = 400; // scene var scene = new THREE.Scene(); //var ambient = new THREE.AmbientLight(0x101030); var ambient = new THREE.AmbientLight(0x808080); scene.add(ambient); var directionalLight = new THREE.DirectionalLight(0xffeedd, 0.7); directionalLight.position.set(0, 0, 1); scene.add(directionalLight); // WebGLRenderer preserveDrawingBuffer var renderer = new THREE.WebGLRenderer( new { preserveDrawingBuffer = true } ); // https://github.com/mrdoob/three.js/issues/3836 renderer.setClearColor(0xfffff, 1); renderer.setSize(window.Width, window.Height); renderer.domElement.AttachToDocument(); renderer.domElement.style.SetLocation(0, 0); this.canvas = (IHTMLCanvas)renderer.domElement; var mouseX = 0; var mouseY = 0; var st = new Stopwatch(); st.Start(); var controls = new THREE.OrbitControls(camera, renderer.domElement); Native.window.onframe += delegate { renderer.clear(); //camera.aspect = window.aspect; //camera.aspect = canvas.clientWidth / (double)canvas.clientHeight; //camera.aspect = canvas.aspect; oo.WithEach( x => x.rotation.y = st.ElapsedMilliseconds * 0.0001 ); controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; Native.window.onresize += delegate { if (canvas.parentNode == Native.document.body) { renderer.setSize(window.Width, window.Height); } }; #endregion new truck().Source.Task.ContinueWithResult( dae => { //dae.scale.x = 30; //dae.scale.y = 30; //dae.scale.z = 30; dae.position.z = 65; dae.scale.x = 10; dae.scale.y = 10; dae.scale.z = 10; dae.position.y = -80; scene.add(dae); oo.Add(dae); } ); //var ref0 = "assets/WebGLColladaExperiment/HZCannon_capture_009_04032013_192834.png"; //new HZCannon().Source.Task.ContinueWithResult( // dae => // { // //dae.scale.x = 30; // //dae.scale.y = 30; // //dae.scale.z = 30; // dae.castShadow = true; // dae.receiveShadow = true; // dae.scale.x = 3; // dae.scale.y = 3; // dae.scale.z = 3; // dae.position.y = -80; // scene.add(dae); // oo.Add(dae); // } //); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // X:\jsc.svn\examples\javascript\CanvasMarchinAntsExperiment\CanvasMarchinAntsExperiment\Application.cs // http://mattdesl.svbtle.com/drawing-lines-is-hard Native.body.Clear(); Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // http://threejs.org/examples/webgl_lines_dashed.html var objects = new List <THREE.Line>(); var camera = new THREE.PerspectiveCamera(60, Native.window.aspect, 1, 200); camera.position.z = 150; var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x111111, 150, 200); var root = new THREE.Object3D(); var subdivisions = 6; var recursion = 1; var points = hilbert3D(new THREE.Vector3(), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7); Console.WriteLine( new { points.Length } ); #region spline var spline = new THREE.Spline(points); var geometrySpline = new THREE.Geometry(); for (var i = 0; i < points.Length * subdivisions; i++) { var index = (double)i / (points.Length * subdivisions); var position = spline.getPoint(index); geometrySpline.vertices[i] = new THREE.Vector3(position.x, position.y, position.z); Console.WriteLine( new { i, index, position.x, position.y, position.z } ); } #endregion var geometryCube = cube(50); geometryCube.computeLineDistances(); geometrySpline.computeLineDistances(); { var ogeometrySpline = new THREE.Line(geometrySpline, new THREE.LineDashedMaterial( new { color = 0xffffff, dashSize = 1, gapSize = 0.5 } ), THREE.LineStrip); objects.Add(ogeometrySpline); scene.add(ogeometrySpline); ogeometrySpline.AttachTo(scene); } { var ogeometryCube = new THREE.Line(geometryCube, new THREE.LineDashedMaterial( new { color = 0xffaa00, dashSize = 3, gapSize = 1, linewidth = 2 } ), THREE.LinePieces); objects.Add(ogeometryCube); ogeometryCube.AttachTo(scene); } { var geometry = new THREE.Geometry { vertices = new[] { new THREE.Vector3(0, 0, 0), new THREE.Vector3(100, 0, 0) } }; var oline = new THREE.Line(geometry, new THREE.LineDashedMaterial( new { color = 0x00aaff, dashSize = 3, gapSize = 3, linewidth = 20 } ), THREE.LinePieces); objects.Add(oline); //scene.add(o); oline.AttachTo(scene); } var renderer = new THREE.WebGLRenderer(new { antialias = true }); renderer.setClearColor(0x111111); //renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( Native.window.Width, Native.window.Height ); renderer.domElement.AttachToDocument(); var controls = new THREE.OrbitControls(camera, renderer.domElement); var sw = Stopwatch.StartNew(); Native.window.onframe += delegate { //var time = sw.ElapsedMilliseconds * 0.001; //for (var i = 0; i < objects.Count; i++) //{ // var o = objects[i]; // //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1); // o.rotation.x = 0.25 * time; // o.rotation.y = 0.25 * time; //} controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; //var ze = new ZeProperties //{ // //() => renderer //}; //ze.Show(); //ze.treeView1.Nodes.Clear(); //ze.Add(() => renderer); //ze.Add(() => controls); //ze.Add(() => scene); //ze.Left = 0; }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20140815/webglcannonphysicsengine // http://youtu.be/Lo1IU8UAutE // 60hz 2160 4K! // The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre. // C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/" //1533 KB/s(3865902 bytes in 2.461s) //C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png" //1556 KB/s(2714294 bytes in 1.703s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png" // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809 // the eye nor the display will be able to do any stereo // until tech is near matrix capability. 2019? // cubemap can be used for all long range scenes // http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera // subst /D b: // subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web // subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\bin\Debug\staging\ChromeStereoLightAnimation.Application\web // what if we want to do subst in another winstat or session? // ColladaLoader: Empty or non-existing file (assets/ChromeStereoLightAnimation/S6Edge.dae) /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://stemkoski.github.io/Three.js/Shadow.html #if AsWEBSERVER #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // if we run as a server. we can open up on android. //chrome.Notification.DefaultTitle = "Nexus7"; //chrome.Notification.DefaultIconUrl = new x128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text //, AtFormCreated: FormStyler.AtFormCreated //AtFormConstructor: // f => // { // //arg[0] is typeof System.Int32 // //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)] // // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs // f.BackColor = System.Drawing.Color.FromArgb(0xA26D41); // } ); return; } #endregion #else #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? //chrome.runtime.UpdateAvailable += delegate //{ // new chrome.Notification(title: "UpdateAvailable"); //}; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "ChromeStereoLightAnimation"); // https://developer.chrome.com/apps/app_window#type-CreateWindowOptions var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: new { alwaysOnTop = true, visibleOnAllWorkspaces = true } ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion #endif Native.body.Clear(); Native.body.style.margin = "0px"; Native.body.style.padding = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; // Severity Code Description Project File Line //Error CS0201 Only assignment, call, increment, decrement, and new object expressions can be used as a statement ChromeStereoLightAnimation Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeStereoLightAnimation\ChromeStereoLightAnimation\Application.cs 187 //new Action<int>( var camera0 = default(THREE.PerspectiveCamera); foreach (var y in from eyeid in new[] { 0, 1 } select (Action) delegate { var scene = new THREE.Scene(); var floorTexture = THREE.ImageUtils.loadTexture( new HTML.Images.FromAssets.checkerboard().src //"images/checkerboard.jpg" ); #region function init() // SCENE // CAMERA float SCREEN_WIDTH = Native.window.Width / 2; //float SCREEN_WIDTH = Native.screen.width / 2; float SCREEN_HEIGHT = Native.window.Height; var VIEW_ANGLE = 45; float ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT; var NEAR = 0.1; var FAR = 20000; // RENDERER // WebGLDeferredRenderer var renderer = new THREE.WebGLRenderer(new { antialias = true }); //renderer.setSize((int)SCREEN_WIDTH, (int)SCREEN_HEIGHT); renderer.domElement.AttachToDocument(); //renderer.domElement.style.SetLocation(Native.window.Width / 2 * (1 - eyeid), 0); // EVENTS // CONTROLS // STATS // LIGHT //var light = new THREE.PointLight(0xffffff); //light.position.set(0,250,0); //scene.add(light); //////////// // CUSTOM // //////////// // must enable shadows on the renderer renderer.shadowMapEnabled = true; // SKYBOX/FOG var skyBoxGeometry = new THREE.CubeGeometry(10000, 10000, 10000); var skyBoxMaterial = new THREE.MeshBasicMaterial(new { color = 0x9999ff, side = THREE.BackSide }); var skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial); // scene.add(skyBox); scene.fog = new THREE.FogExp2(0x9999ff, 0.00025); // "shadow cameras" show the light source and direction // spotlight #1 -- yellow, dark shadow var spotlight = new THREE.SpotLight(0xffff00); spotlight.position.set(-60, 150, -30); spotlight.shadowCameraVisible = true; spotlight.shadowDarkness = 0.95; spotlight.intensity = 2; // must enable shadow casting ability for the light spotlight.castShadow = true; scene.add(spotlight); // spotlight #2 -- red, light shadow var spotlight2 = new THREE.SpotLight(0xff0000); //var spotlight2 = new THREE.SpotLight(0xffff00); spotlight2.position.set(60, 150, -60); scene.add(spotlight2); spotlight2.shadowCameraVisible = true; spotlight2.shadowDarkness = 0.70; spotlight2.intensity = 2; spotlight2.castShadow = true; // THREE.WebGLProgram: gl.getProgramInfoLog() Pixel shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16). for (int i = 0; i < 8; i++) { // spotlight #3 blue var spotlight3 = new THREE.SpotLight(0x0000ff); //var spotlight3 = new THREE.SpotLight(0x00ffff); spotlight3.position.set(150 * i, 80, -100); //spotlight3.shadowCameraVisible = true; spotlight3.shadowDarkness = 0.95; spotlight3.intensity = 2; spotlight3.castShadow = true; scene.add(spotlight3); // change the direction this spotlight is facing var lightTarget = new THREE.Object3D(); lightTarget.position.set(150 * i, 10, -100); scene.add(lightTarget); spotlight3.target = lightTarget; } // cube: mesh to cast shadows #region castShadow var cubeGeometry = new THREE.CubeGeometry(50, 50, 50); var cubeMaterial = new THREE.MeshLambertMaterial(new { color = 0x888888 }); var cube0 = new THREE.Mesh(cubeGeometry, cubeMaterial); //cube.position.set(0, 50, 0); cube0.position.set(0, 100, 0); // Note that the mesh is flagged to cast shadows cube0.castShadow = true; scene.add(cube0); // floor: mesh to receive shadows // public static ImageUtilsType ImageUtils; //var floorTexture = new THREE.ImageUtils.loadTexture("images/checkerboard.jpg"); floorTexture.wrapS = THREE.RepeatWrapping; floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set(10, 10); #endregion // Note the change to Lambert material. #region receiveShadow var floorMaterial = new THREE.MeshLambertMaterial(new { map = floorTexture, side = THREE.DoubleSide }); //var floorGeometry = new THREE.PlaneGeometry(1000 * 8, 1000 * 8, 100, 100); var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 100, 100); for (int i = 0; i < 8; i++) { var floor0 = new THREE.Mesh(floorGeometry, floorMaterial); floor0.position.y = -0.5; floor0.position.x = 1000 * i; floor0.rotation.x = Math.PI / 2; // Note the mesh is flagged to receive shadows floor0.receiveShadow = true; scene.add(floor0); } #endregion // create "light-ball" meshes var sphereGeometry = new THREE.SphereGeometry(10, 16, 8); var darkMaterial = new THREE.MeshBasicMaterial(new { color = 0x000000 }); { var wireframeMaterial = new THREE.MeshBasicMaterial( new { color = 0xffff00, wireframe = true, transparent = true }); var shape = THREE.SceneUtils.createMultiMaterialObject( sphereGeometry, new[] { darkMaterial, wireframeMaterial }); shape.position = spotlight.position; scene.add(shape); } { var wireframeMaterial = new THREE.MeshBasicMaterial( new { color = 0xff0000, wireframe = true, transparent = true }); var shape = THREE.SceneUtils.createMultiMaterialObject( sphereGeometry, new[] { darkMaterial, wireframeMaterial }); shape.position = spotlight2.position; scene.add(shape); } //{ // var wireframeMaterial = new THREE.MeshBasicMaterial( // new { color = 0x0000ff, wireframe = true, transparent = true }); // var shape = THREE.SceneUtils.createMultiMaterialObject( // sphereGeometry, new[] { darkMaterial, wireframeMaterial }); // shape.position = spotlight3.position; // scene.add(shape); //} #endregion var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); scene.add(camera); camera.position.set(0, 150, 400); camera.lookAt(scene.position); if (eyeid == 0) { camera0 = camera; var controls = new THREE.OrbitControls(camera0, renderer.domElement); //var controls = new THREE.OrbitControls(camera0, Native.document.body); Native.window.onframe += delegate { renderer.render(scene, camera0); controls.update(); //stats.update(); }; } else { Native.window.onframe += delegate { camera.rotation.set(camera0.rotation.x, camera0.rotation.y, camera0.rotation.z); camera.position.set(camera0.position.x, camera0.position.y, camera0.position.z); // lets not add any stereo effect. as we may need to run in 360 mono mode anyway to gain speed? //camera.translateX() // scene is unique to renderer!!!!! // we are doing everything twice for now. renderer.render(scene, camera); //controls.update(); //stats.update(); }; } #region onresize new { }.With( async delegate { do { // allow webview to behave in S6 multiview mode //SCREEN_WIDTH = Native.screen.width / 2; SCREEN_WIDTH = Native.window.Width / 2; //camera.aspect = Native.window.aspect; camera.aspect = SCREEN_WIDTH / Native.window.Height; camera.updateProjectionMatrix(); //renderer0.setSize(Native.window.Width / 2, Native.window.Height); renderer.setSize((int)SCREEN_WIDTH, Native.window.Height); //renderer0.domElement.style.SetLocation(Native.window.Width / 2 * eyeid, 0); renderer.domElement.style.SetLocation((int)SCREEN_WIDTH * (1 - eyeid), 0); } while (await Native.window.async.onresize); }); #endregion } ) y(); Console.WriteLine("do you see it?"); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs // http://threejs.org/examples/#webgl_postprocessing_dof // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html" Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000); camera.position.z = 200; var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.sortObjects = false; //var material_depth = new THREE.MeshDepthMaterial(); 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); //var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading }; // red vs yellow var parameters = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading }; var cubeMaterial = new THREE.MeshBasicMaterial(parameters); var geo = new THREE.SphereGeometry(1, 20, 10); var xgrid = 14; var ygrid = 9; var zgrid = 14; var nobjects = xgrid * ygrid * zgrid; var c = 0; //var s = 0.25; var s = 60; for (var i = 0; i < xgrid; i++) { for (var j = 0; j < ygrid; j++) { for (var k = 0; k < zgrid; k++) { var mesh = new THREE.Mesh(geo, cubeMaterial); var x = 200 * (i - xgrid / 2); var y = 200 * (j - ygrid / 2); var z = 200 * (k - zgrid / 2); mesh.position.set(x, y, z); mesh.scale.set(s, s, s); mesh.matrixAutoUpdate = false; mesh.updateMatrix(); scene.add(mesh); //objects.push(mesh); c++; } } } //scene.matrixAutoUpdate = false; var renderPass = new THREE.RenderPass(scene, camera); // THREE.BokehPass relies on THREE.BokehShader var bokehPass = new THREE.BokehPass(scene, camera, new { focus = 1.0, aperture = 0.025, maxblur = 1.0, width = Native.window.Width, height = Native.window.Height }); bokehPass.renderToScreen = true; // maskpass // THREE.EffectComposer relies on THREE.CopyShader var composer = new THREE.EffectComposer(renderer); composer.addPass(renderPass); composer.addPass(bokehPass); renderer.autoClear = false; var effectController = new { focus = 1.0, aperture = 0.025, maxblur = 1.0 }; //var matChanger = function() { // postprocessing.bokeh.uniforms["focus"].value = effectController.focus; // postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture; // postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur; // }; var controls = new THREE.OrbitControls(camera); #region onframe Native.window.onframe += delegate { controls.update(); camera.position = controls.center.clone(); composer.render(0.1); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs // http://threejs.org/examples/#webgl_postprocessing_dof // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html" Native.body.style.margin = "0px"; Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); var camera = new THREE.PerspectiveCamera(70, Native.window.aspect, 1, 3000); camera.position.z = 200; var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer(new { antialias = false }); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachToDocument(); renderer.sortObjects = false; //var material_depth = new THREE.MeshDepthMaterial(); 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); //var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading }; // red vs yellow var parameters = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading }; var cubeMaterial = new THREE.MeshBasicMaterial(parameters); var geo = new THREE.SphereGeometry(1, 20, 10); var xgrid = 14; var ygrid = 9; var zgrid = 14; var nobjects = xgrid * ygrid * zgrid; var c = 0; //var s = 0.25; var s = 60; for (var i = 0; i < xgrid; i++) for (var j = 0; j < ygrid; j++) for (var k = 0; k < zgrid; k++) { var mesh = new THREE.Mesh(geo, cubeMaterial); var x = 200 * (i - xgrid / 2); var y = 200 * (j - ygrid / 2); var z = 200 * (k - zgrid / 2); mesh.position.set(x, y, z); mesh.scale.set(s, s, s); mesh.matrixAutoUpdate = false; mesh.updateMatrix(); scene.add(mesh); //objects.push(mesh); c++; } //scene.matrixAutoUpdate = false; var renderPass = new THREE.RenderPass(scene, camera); // THREE.BokehPass relies on THREE.BokehShader var bokehPass = new THREE.BokehPass(scene, camera, new { focus = 1.0, aperture = 0.025, maxblur = 1.0, width = Native.window.Width, height = Native.window.Height }); bokehPass.renderToScreen = true; // maskpass // THREE.EffectComposer relies on THREE.CopyShader var composer = new THREE.EffectComposer(renderer); composer.addPass(renderPass); composer.addPass(bokehPass); renderer.autoClear = false; var effectController = new { focus = 1.0, aperture = 0.025, maxblur = 1.0 }; //var matChanger = function() { // postprocessing.bokeh.uniforms["focus"].value = effectController.focus; // postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture; // postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur; // }; var controls = new THREE.OrbitControls(camera); #region onframe Native.window.onframe += delegate { controls.update(); camera.position = controls.center.clone(); composer.render(0.1); }; #endregion new { }.With( async delegate { //while (true) do { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); // convert to bool? } while (await Native.window.async.onresize); //} while (await Native.window.async.onresize != null); } ); }