// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150912/x360mountains // ls sdcard/oculus/360photos/ // "X:\vr\0000.png" // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\0000.png" /sdcard/oculus/360photos/ // 2649 KB/s (1085134 bytes in 0.400s) // "X:\vr\tr.png" // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\tr.png" /sdcard/oculus/360photos/ // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\code.png" /sdcard/oculus/360photos/ // R:\util\android-sdk-windows\platform-tools\adb.exe push "X:\vr\cone2.png" /sdcard/oculus/360photos/ // "X:\vr\code.png" // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150906/roomscanningeffectbyrosme // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150816/iss // https://www.youtube.com/watch?v=UWiq-qgedws // https://www.youtube.com/watch?v=TwRSOEG-Gx4 // http://youtu.be/Lo1IU8UAutE // 60hz 2160 4K! // The equirectangular projection was used in map creation since it was invented around 100 A.D. by Marinus of Tyre. // C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hzsky.png" "/sdcard/oculus/360photos/" //1533 KB/s(3865902 bytes in 2.461s) //C:\Users\Arvo> "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe1.png" //1556 KB/s(2714294 bytes in 1.703s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\hz2048c3840x2160.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globe2.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape360globe1\0000.png" "/sdcard/oculus/360photos/tape360globenight.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0000.png" "/sdcard/oculus/360photos/tape360iss.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360iss\0230.png" "/sdcard/oculus/360photos/tape360iss0230.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\sh1\0000.png" "/sdcard/oculus/360photos/sh1.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "R:\vr\tape360columns\0000.png" "/sdcard/oculus/360photos/tape360columns.png" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\edge.png" "/sdcard/oculus/360photos/tape360columns.png" // 4041 KB/s (3248448 bytes in 0.785s) // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\terrain.png" "/sdcard/oculus/360photos/" // could we udp our 360 image from webgl to vr yet? // "R:\vr\tape360iss\0230.png" // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome360hz // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809 // the eye nor the display will be able to do any stereo // until tech is near matrix capability. 2019? // cubemap can be used for all long range scenes // http://www.imdb.com/title/tt0112111/?ref_=nv_sr_1 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150808/cubemapcamera // subst /D b: // subst b: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web // subst a: z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\x360mountains\x360mountains\bin\Debug\staging\x360mountains.Application\web // what if we want to do subst in another winstat or session? // ColladaLoader: Empty or non-existing file (assets/x360mountains/S6Edge.dae) /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { //FormStyler.AtFormCreated = //s => //{ // s.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; // //var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(s.Context.GetHTMLTarget()); // var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDragWithShadow().AttachTo(s.Context.GetHTMLTarget()); // s.Context.GetHTMLTarget().style.backgroundColor = "#efefef"; // //s.Context.GetHTMLTarget().style.backgroundColor = "#A26D41"; //}; #if AsWEBSERVER #region += Launched chrome.app.window // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { // if we run as a server. we can open up on android. //chrome.Notification.DefaultTitle = "Nexus7"; //chrome.Notification.DefaultIconUrl = new x128().src; ChromeTCPServer.TheServerWithStyledForm.Invoke( AppSource.Text //, AtFormCreated: FormStyler.AtFormCreated //AtFormConstructor: // f => // { // //arg[0] is typeof System.Int32 // //script: error JSC1000: No implementation found for this native method, please implement [static System.Drawing.Color.FromArgb(System.Int32)] // // X:\jsc.svn\examples\javascript\forms\Test\TestFromArgb\TestFromArgb\ApplicationControl.cs // f.BackColor = System.Drawing.Color.FromArgb(0xA26D41); // } ); return; } #endregion #else #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? //chrome.runtime.UpdateAvailable += delegate //{ // new chrome.Notification(title: "UpdateAvailable"); //}; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "x360mountains"); // https://developer.chrome.com/apps/app_window#type-CreateWindowOptions var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: new { alwaysOnTop = true, visibleOnAllWorkspaces = true } ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion #endif //var vs0 = new TraceConeWithCRTByKlk.Shaders.Program360FragmentShader(); //var vs0 = new FaceEdgeVertexByPaniq.Shaders.Program360FragmentShader(); var vs0 = new ChromeShaderToyMountainsByHoskins.Shaders.Program360FragmentShader(); // onframe need syncs to enable GC! var vsync = default(TaskCompletionSource<object>); Func<bool> vsyncReady = delegate { if (vsync != null) if (vsync.Task.IsCompleted) return true; return false; }; // crash //int cubefacesizeMAX = 2048 * 2; // 6 faces, ? // not responding... //int cubefacesizeMAX = 2048 * 2; // 6 faces, ? int cubefacesizeMAX = 2048; // 6 faces, ? //int cubefacesizeMAX = 1024; // 6 faces, ? int cubefacesize = cubefacesizeMAX; // 6 faces, ? //int cubefacesize = 1024; // 6 faces, ? // "X:\vr\tape1\0000x2048.png" // for 60hz render we may want to use float camera percision, not available for ui. // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x2048.png" "/sdcard/oculus/360photos/" // "x:\util\android-sdk-windows\platform-tools\adb.exe" push "X:\vr\tape1\0000x128.png" "/sdcard/oculus/360photos/" // force laptop into preview. when can we have a button for it? //if (Environment.ProcessorCount < 8) // cubefacesize = 64; // 6 faces, ? // fast gif? //cubefacesize = 128; // 6 faces, ? //cubefacesize = 512; // 6 faces, ? // [GroupMarkerNotSet(crbug.com / 242999)!:247F0809] //RENDER WARNING: texture bound to texture unit 0 is not renderable.It maybe non-power-of-2 and have incompatible texture filtering. // can we keep fast fps yet highp? // can we choose this on runtime? designtime wants fast fps, yet for end product we want highdef on our render farm? //const int cubefacesize = 128; // 6 faces, ? //var cubecameraoffsetx = 256; var cubecameraoffsetx = 400; //var uizoom = 0.1; //var uizoom = cubefacesize / 128f; var uizoom = 128f / cubefacesize; Native.css.style.backgroundColor = "blue"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); (Native.body.style as dynamic).webkitUserSelect = "text"; //return; // Earth params //var radius = 0.5; //var radius = 1024; //var radius = 2048; //var radius = 512; //var radius = 256; //var radius = 400; // can we have not fly beyond moon too much? //var radius = 500; var radius = 480; //var segments = 32; var segments = 128 * 2; //var rotation = 6; //const int size = 128; //const int size = 256; // 6 faces, 12KB //const int size = 512; // 6 faces, ? // WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. //const int size = 720; // 6 faces, ? //const int size = 1024; // 6 faces, ? //const int cubefacesize = 1024; // 6 faces, ? // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( chrome-extension://aemlnmcokphbneegoefdckonejmknohh/assets/x360mountains/anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs.jpg ) var far = 0xffffff; new IHTMLPre { new { Environment.ProcessorCount, cubefacesize } }.AttachToDocument(); //new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument(); var sw = Stopwatch.StartNew(); var oo = new List<THREE.Object3D>(); var window = Native.window; // what about physics and that portal rendering? // if we are running as a chrome web server, we may also be opened as android ndk webview app //var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: window.aspect, near: 1, far: 2000); // once we update source // save the source // manually recompile //cameraPX.position.z = 400; //// the camera should be close enough for the object to float off the FOV of PX //cameraPX.position.z = 200; // scene // can we make the 3D object orbit around us ? // and // stream it to vr? var scene = new THREE.Scene(); // since our cube camera is somewhat a fixed thing // would it be easier to move mountains to come to us? // once we change code would chrome app be able to let VR know that a new view is available? var sceneg = new THREE.Group(); sceneg.AttachTo(scene); // fly up? //sceneg.translateZ(-1024); // rotate the world, as the skybox then matches what we have on filesystem scene.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); // yet for headtracking we shall rotate camera //sceneg.position.set(0, 0, -1024); //sceneg.position.set(0, -1024, 0); //scene.add(new THREE.AmbientLight(0x333333)); //scene.add(new THREE.AmbientLight(0xffffff)); //scene.add(new THREE.AmbientLight(0xaaaaaa)); //scene.add(new THREE.AmbientLight(0xcccccc)); //scene.add(new THREE.AmbientLight(0xeeeeee)); scene.add(new THREE.AmbientLight(0xffffff)); //var light = new THREE.DirectionalLight(0xffffff, 1); //// sun should be beyond moon ////light.position.set(-5 * virtualDistance, -3 * virtualDistance, -5 * virtualDistance); ////light.position.set(-15 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); //// where shall the light source be to see half planet? //light.position.set(-1 * virtualDistance, -1 * virtualDistance, -15 * virtualDistance); //scene.add(light); //var lightX = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightX" }.AttachToDocument(); //var lightY = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightY" }.AttachToDocument(); //var lightZ = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -60, max = 60, valueAsNumber = 0, title = "lightZ" }.AttachToDocument(); //new IHTMLHorizontalRule { }.AttachToDocument(); // whats WebGLRenderTargetCube do? // WebGLRenderer preserveDrawingBuffer var renderer0 = new THREE.WebGLRenderer( new { //antialias = true, //alpha = true, preserveDrawingBuffer = true } ); // https://github.com/mrdoob/three.js/issues/3836 // the construct. white bg //renderer0.setClearColor(0xfffff, 1); renderer0.setClearColor(0x0, 1); //renderer.setSize(window.Width, window.Height); renderer0.setSize(cubefacesize, cubefacesize); //renderer0.domElement.AttachToDocument(); //rendererPX.domElement.style.SetLocation(0, 0); //renderer0.domElement.style.SetLocation(4, 4); // top // http://stackoverflow.com/questions/27612524/can-multiple-webglrenderers-render-the-same-scene // need a place to show the cubemap face to GUI // how does the stereo OTOY do it? // https://www.opengl.org/wiki/Sampler_(GLSL) // http://www.richardssoftware.net/Home/Post/25 // [+X, –X, +Y, –Y, +Z, –Z] fa // move up //camera.position.set(-1200, 800, 1200); //var cameraoffset = new THREE.Vector3(0, 15, 0); // can we aniamte it? //var cameraoffset = new THREE.Vector3(0, 800, 1200); // can we have linear animation fromcenter of the map to the edge and back? // then do the flat earth sun orbit? var cameraoffset = new THREE.Vector3( // left? -512, // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1024, //1200 0 // can we hover top of the map? ); // original vieworigin //var cameraoffset = new THREE.Vector3(-1200, 800, 1200); var bottomRotate100 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -314, max = 314, valueAsNumber = 0, title = "bottomRotate" }.AttachToDocument(); var maxfps = 60; //var maxlengthseconds = 60; var maxlengthseconds = 120; var maxframes = maxlengthseconds * maxfps; // whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk? var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = maxframes, valueAsNumber = 137, title = "frameIDslider" }.AttachToDocument(); frameIDslider.onchange += delegate { frameIDslider.title = "frameIDslider " + frameIDslider.valueAsNumber; }; //var vs0 = new ChromeShaderToyRelentlessBySrtuss.Shaders.ProgramFragmentShader(); //var vs0 = new TraceConeWithCRTByKlk.Shaders.ProgramFragmentShader(); // left IHTMLCanvas shader0canvasPZ = null; // locCameraTargetOffset to look left? #region shader0canvasPZ new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader0canvasPZ = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f); // left? //forward=normalize(float3(0.0 , 0.0 ,1.0)); }; Native.window.onframe += delegate { // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // front IHTMLCanvas shader1canvasPX = null; #region shader1canvasPX new { }.With( async delegate { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); var gl0 = new WebGLRenderingContext(alpha: true); shader1canvasPX = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; c0.style.SetLocation(720, 8); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); pass0.ProgramSelected += mProgram => { // off by 45deg__ // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f); // fixup //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, -1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 0.0f); // front //forward=normalize(float3(1.0 , 0.0 ,0.0)); }; var sw0 = Stopwatch.StartNew(); Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // back IHTMLCanvas shader1canvasNX = null; #region shader1canvasNX new { }.With( async delegate { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); var gl0 = new WebGLRenderingContext(alpha: true); shader1canvasNX = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; c0.style.SetLocation(720, 8); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); pass0.ProgramSelected += mProgram => { // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, 1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0.0f); // back //forward=normalize(float3(-1.0 , 0.0 ,0.0)); }; var sw0 = Stopwatch.StartNew(); Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // right IHTMLCanvas shader2canvasNZ = null; // locCameraTargetOffset to look right? #region shader2canvasNZ new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader2canvasNZ = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 1.0f, 0, 1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, -1.0f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.0f, 0, 1.0f); // right //forward=normalize(float3(0.0 , 0.0 ,-1.0)); }; Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // bottom IHTMLCanvas shader2canvasNY = null; // locCameraTargetOffset to look bottom? #region shader2canvasNY new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader2canvasNY = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? // 45deg off?? // front //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f); // left //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, -1, 0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0); }; Native.window.onframe += delegate { // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion // top IHTMLCanvas shader2canvasPY = null; // locCameraTargetOffset to look right? #region shader2canvasPY new { }.With( async delegate { //return; Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; // https://sites.google.com/a/jsc-solutions.net/work/x3 //var vs0 = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader(); //var vs0 = new x2001SpaceStationByOtavio.Shaders.ProgramFragmentShader(); //var vs0 = new Xor3DAlienLandByXor.Shaders.ProgramFragmentShader(); //var vs0 = new RoomScanningEffectByRosme.Shaders.ProgramFragmentShader(); // now we have an empty shell // which tostrings to the glsl code for gpu // and if we were to initialize // enable intellisense //var vs0i = (RoomScanningEffectByRosme.Shaders.__ProgramFragmentUniforms)(object)vs0; // script: error JSC1000: No implementation found for this native method, please implement [static ScriptCoreLib.GLSL.Shader.vec3(System.Single, System.Single, System.Single)] // b.__this._vs0i_5__2.uCameraTargetOffset = new ctor$aQ8ABjj5gzW_aEh4Cmq2oMg(1, 0, 0); // 270ms ReferenceError: ctor$aQ8ABjj5gzW_aEh4Cmq2oMg is not defined // wishful thinking eh //vec3 uCameraTargetOffset = vec3(0.0f, 0.0f, -1.0f); //vs0i.uCameraTargetOffset = new ScriptCoreLib.GLSL.vec3(1.0f, 0.0f, 0.0f); // this would mean the program was selected and uniform was uploaded to gpu var gl0 = new WebGLRenderingContext(alpha: true); shader2canvasPY = gl0.canvas; var c0 = gl0.canvas.AttachToDocument(); //c0.style.SetSize(460, 237); //c0.width = 460; //c0.height = 237; //c0.style.SetSize((int)uizoom * 3, (int)uizoom * 3); c0.style.SetSize(128, 128); c0.width = cubefacesize; c0.height = cubefacesize; //c0.style.SetLocation(720, 8); c0.style.SetLocation(800, 360); var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( null, gl0, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl0), supportDerivatives: gl0.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(vs0); var sw0 = Stopwatch.StartNew(); pass0.ProgramSelected += mProgram => { // ldflda? // 45deg off?? // front //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 0, -1.0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, .1f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0f); // left //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1.0f, 0, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -.0001f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, -1f, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.01f, -1, 0.01f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0.001f, 1, 0f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, 1, -0.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, -0.0001f); var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, 0, -1, 0.0001f); //var l3 = gl0.getUniformLocation(mProgram, "uCameraTargetOffset"); if (l3 != null) gl0.uniform3f(l3, .0001f, -1, 0); }; Native.window.onframe += delegate { //d = a[0].CS___8__locals1.vsync != null; //e = a[0].CS___8__locals1.vsync.kAcABp_b1ITCbIktNs3el5Q().dgQABqwxMjO1zVAJb5WXKA(); // let render man know.. // let render man know.. if (vsyncReady()) return; // 1800 is 30sec is 30 000 // frameIDslider? //var fps60 = frameIDslider * 1000 / 60.0f; var fps60 = frameIDslider * (1 / 60.0f); pass0.Paint_Image( fps60, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); // what does it do? // need redux build.. gl0.flush(); //await u.animate.async.@checked; }; } ); #endregion new IHTMLHorizontalRule { }.AttachToDocument(); var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "camerax" }.AttachToDocument(); // up. whats the most high a rocket can go 120km? new IHTMLHorizontalRule { }.AttachToDocument(); // how high is the bunker? var cameray = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 2048 * 4, valueAsNumber = 0, title = "cameray" }.AttachToDocument(); new IHTMLBreak { }.AttachToDocument(); var camerayHigh = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = cameray.max, max = 1024 * 256, valueAsNumber = cameray.max, title = "cameray" }.AttachToDocument(); new IHTMLHorizontalRule { }.AttachToDocument(); var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0 - 2048 * 4, max = 0 + 2048 * 4, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); // for render server var fcamerax = 0.0; var fcameray = 0.0; var fcameraz = 0.0; //while (await camerax.async.onchange) //cameray.onchange += delegate //{ // if (cameray.valueAsNumber < cameray.max) // camerayHigh.valueAsNumber = camerayHigh.min; //}; camerayHigh.onmousedown += delegate { //if (camerayHigh.valueAsNumber > camerayHigh.min) cameray.valueAsNumber = cameray.max; }; Action applycameraoffset = delegate { // make sure UI and gpu sync up var cy = cameray; if (cameray.valueAsNumber < cameray.max) camerayHigh.valueAsNumber = camerayHigh.min; if (camerayHigh.valueAsNumber > camerayHigh.min) cameray.valueAsNumber = cameray.max; if (cameray.valueAsNumber == cameray.max) cy = camerayHigh; cameraoffset = new THREE.Vector3( // left? 1.0 * (camerax + fcamerax), // height? //0, //1600, //1024, // if the camera is in the center, would we need to move the scene? // we have to move the camera. as we move the scene the lights are messed up //2014, 1.0 * (cy + fcameray), //1200 1.0 * (cameraz + fcameraz) // can we hover top of the map? ); }; #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraNY.position.copy(new THREE.Vector3(0, 0, 0)); cameraNY.lookAt(new THREE.Vector3(0, -1, 0)); cameraNY.position.add(cameraoffset); }; //cameraNY.lookAt(new THREE.Vector3(0, 1, 0)); var canvasNY = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2); canvasNY.canvas.title = "NY"; canvasNY.canvas.AttachToDocument(); canvasNY.canvas.style.transformOrigin = "0 0"; // roslyn! canvasNY.canvas.style.transform = $"scale({uizoom})"; var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraPY.position.copy(new THREE.Vector3(0, 0, 0)); cameraPY.lookAt(new THREE.Vector3(0, 1, 0)); cameraPY.position.add(cameraoffset); }; //cameraPY.lookAt(new THREE.Vector3(0, -1, 0)); var canvasPY = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPY.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 0); canvasPY.canvas.title = "PY"; canvasPY.canvas.AttachToDocument(); canvasPY.canvas.style.transformOrigin = "0 0"; canvasPY.canvas.style.transform = $"scale({uizoom})"; #endregion // transpose xz? #region x var cameraNX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraNX.position.copy(new THREE.Vector3(0, 0, 0)); cameraNX.lookAt(new THREE.Vector3(0, 0, 1)); cameraNX.position.add(cameraoffset); }; //cameraNX.lookAt(new THREE.Vector3(0, 0, -1)); //cameraNX.lookAt(new THREE.Vector3(-1, 0, 0)); //cameraNX.lookAt(new THREE.Vector3(1, 0, 0)); var canvasNX = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 2, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasNX.canvas.title = "NX"; canvasNX.canvas.AttachToDocument(); canvasNX.canvas.style.transformOrigin = "0 0"; canvasNX.canvas.style.transform = $"scale({uizoom})"; var cameraPX = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); applycameraoffset += delegate { cameraPX.position.copy(new THREE.Vector3(0, 0, 0)); cameraPX.lookAt(new THREE.Vector3(0, 0, -1)); cameraPX.position.add(cameraoffset); }; //cameraPX.lookAt(new THREE.Vector3(0, 0, 1)); //cameraPX.lookAt(new THREE.Vector3(1, 0, 0)); //cameraPX.lookAt(new THREE.Vector3(-1, 0, 0)); var canvasPX = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPX.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasPX.canvas.title = "PX"; canvasPX.canvas.AttachToDocument(); canvasPX.canvas.style.transformOrigin = "0 0"; canvasPX.canvas.style.transform = $"scale({uizoom})"; #endregion #region z var cameraNZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); //cameraNZ.lookAt(new THREE.Vector3(0, 0, -1)); applycameraoffset += delegate { cameraNZ.position.copy(new THREE.Vector3(0, 0, 0)); cameraNZ.lookAt(new THREE.Vector3(1, 0, 0)); cameraNZ.position.add(cameraoffset); }; //cameraNX.lookAt(new THREE.Vector3(-1, 0, 0)); //cameraNZ.lookAt(new THREE.Vector3(0, 0, 1)); var canvasNZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasNZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 3, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasNZ.canvas.title = "NZ"; canvasNZ.canvas.AttachToDocument(); canvasNZ.canvas.style.transformOrigin = "0 0"; canvasNZ.canvas.style.transform = $"scale({uizoom})"; var cameraPZ = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); //cameraPZ.lookAt(new THREE.Vector3(1, 0, 0)); applycameraoffset += delegate { cameraPZ.position.copy(new THREE.Vector3(0, 0, 0)); cameraPZ.lookAt(new THREE.Vector3(-1, 0, 0)); cameraPZ.position.add(cameraoffset); }; //cameraPZ.lookAt(new THREE.Vector3(0, 0, 1)); //cameraPZ.lookAt(new THREE.Vector3(0, 0, -1)); var canvasPZ = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPZ.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 1); canvasPZ.canvas.title = "PZ"; canvasPZ.canvas.AttachToDocument(); canvasPZ.canvas.style.transformOrigin = "0 0"; canvasPZ.canvas.style.transform = $"scale({uizoom})"; #endregion // c++ alias locals would be nice.. var canvas0 = (IHTMLCanvas)renderer0.domElement; var old = new { CursorX = 0, CursorY = 0 }; var st = new Stopwatch(); st.Start(); //canvas0.css.active.style.cursor = IStyle.CursorEnum.move; // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs // THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(78,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll // THREE.WebGLProgram: gl.getProgramInfoLog() (79,3-98): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll // http://www.roadtovr.com/youtube-confirms-stereo-3d-360-video-support-coming-soon/ // https://www.youtube.com/watch?v=D-Wl9jAB45Q #region spherical var gl = new WebGLRenderingContext(alpha: true, preserveDrawingBuffer: true); var c = gl.canvas.AttachToDocument(); // 3840x2160 //c.style.SetSize(3840, 2160); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150722/360-youtube c.width = 3840; c.height = 2160; //c.width = 3840 * 2; //c.height = 2160 * 2; //c.width = 3840; //c.height = 2160; // 1,777777777777778 // https://www.youtube.com/watch?v=fTfJwzRsE-w //c.width = 7580; //c.height = 3840; //1,973958333333333 //7580 // 3840 // wont work //c.width = 8192; //c.height = 4096; // this has the wrong aspect? //c.width = 6466; //c.height = 3232; new IHTMLPre { new { c.width, c.height } }.AttachToDocument(); //6466x3232 //var suizoom = 720f / c.height; //var suizoom = 360f / c.height; var suizoom = 480f / c.width; c.style.transformOrigin = "0 0"; c.style.transform = $"scale({suizoom})"; //c.style.backgroundColor = "yellow"; c.style.position = IStyle.PositionEnum.absolute; c.style.SetLocation(8 + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 3); var pass = new CubeToEquirectangular.Library.ShaderToy.EffectPass( null, gl, precission: CubeToEquirectangular.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, callback: null, obj: null, forceMuted: false, forcePaused: false, //quadVBO: Library.ShaderToy.createQuadVBO(gl, right: 0, top: 0), outputGainNode: null ); // how shall we upload our textures? // can we reference GLSL.samplerCube yet? //pass.mInputs[0] = new samplerCube { }; pass.mInputs[0] = new CubeToEquirectangular.Library.ShaderToy.samplerCube { }; pass.MakeHeader_Image(); var vs = new Shaders.ProgramFragmentShader(); pass.NewShader_Image(vs); #endregion //var frame0 = new HTML.Images.FromAssets.tiles_regrid().AttachToDocument(); var frame0 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets.galaxy_starfield150FOV().AttachToDocument(); //var xor = new HTML.Images.FromAssets.Orion360_test_image_8192x4096().AttachToDocument(); //var xor = new HTML.Images.FromAssets._2_no_clouds_4k().AttachToDocument(); //var frame0 = new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().AttachToDocument(); // 270px //xor.style.height = ""; frame0.style.height = "270px"; frame0.style.width = "480px"; frame0.style.SetLocation( 8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 + 16, 8 + (int)(uizoom * cubefacesize + 8) * 3); #region DirectoryEntry var dir = default(DirectoryEntry); int files2count = 0; new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); var dir2r = dir.createReader(); var files2 = await dir2r.readFileEntries(); files2count = files2.Count(); if (files2count > 0) { new IHTMLPre { new { files2count } }.AttachToDocument(); } }; frame0.style.cursor = IStyle.CursorEnum.pointer; frame0.title = "save frame"; frame0.onclick += delegate { // http://paulbourke.net/papers/vsmm2006/vsmm2006.pdf // A method of creating synthetic stereoscopic panoramic images that can be implemented //in most rendering packages has been presented. If single panoramic pairs can be created //then stereoscopic panoramic movies are equally possible giving rise to the prospect of //movies where the viewer can interact with, at least with regard to what they choose to look //at.These images can be projected so as to engage the two features of the human visual //system that assist is giving us a sense of immersion, the feeling of “being there”. That is, //imagery that contains parallax information as captured from two horizontally separated eye //positions (stereopsis)and imagery that fills our peripheral vision.The details that define //how the two panoramic images should be created in rendering packages are provided, in //particular, how to precisely configure the virtual cameras and control the distance to zero //parallax. // grab a frame if (dir == null) { // not exporting to file system? var f0 = new IHTMLImage { src = gl.canvas.toDataURL() }; //var f0 = (IHTMLImage)gl.canvas; //var f0 = (IHTMLImage)gl.canvas; //var base64 = gl.canvas.toDataURL(); //frame0.src = base64; frame0.src = f0.src; // 7MB! return; } // // --------------------------- //IrfanView //--------------------------- //Warning ! //The file: "X:\vr\tape1\0001.jpg" is a PNG file with incorrect extension ! //Rename ? //--------------------------- //Yes No //--------------------------- // haha this will render the thumbnail. //dir.WriteAllBytes("0000.png", frame0); //dir.WriteAllBytes("0000.png", gl.canvas); var glsw = Stopwatch.StartNew(); dir.WriteAllBytes("0000.png", gl); new IHTMLPre { new { glsw.ElapsedMilliseconds } }.AttachToDocument(); // {{ ElapsedMilliseconds = 1548 }} // 3.7MB // 3840x2160 }; #endregion #region render 60hz 30sec new IHTMLButton { $"render {maxfps}hz {maxlengthseconds}sec" }.AttachToDocument().onclick += async e => { e.Element.disabled = true; var total = Stopwatch.StartNew(); var status = "rendering... " + new { dir }; new IHTMLPre { () => status }.AttachToDocument(); if (dir == null) { //dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); } total.Restart(); vsync = new TaskCompletionSource<object>(); await vsync.Task; status = "rendering... vsync"; //var frameid = 0; //frameIDslider.valueAsNumber = -1; frameIDslider.valueAsNumber = files2count - 1; goto beforeframe; // parallax offset? await_nextframe: var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".png"; status = "rendering... " + new { filename }; vsync = new TaskCompletionSource<object>(); await vsync.Task; // frame0 has been rendered var swcapture = Stopwatch.StartNew(); status = "WriteAllBytes... " + new { filename }; //await Native.window.async.onframe; // https://code.google.com/p/chromium/issues/detail?id=404301 if (dir != null) await dir.WriteAllBytes(filename, gl); //await dir.WriteAllBytes(filename, gl.canvas); status = "WriteAllBytes... done " + new { fcamerax, filename, swcapture.ElapsedMilliseconds }; status = "rdy " + new { filename, fcamerax }; //await Native.window.async.onframe; // design mode v render mode if (cubefacesize < cubefacesizeMAX) frameIDslider.valueAsNumber += 15; else frameIDslider.valueAsNumber++; beforeframe: // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); // fcamerax = radius * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); // speed? S6 slow motion? // this is really slow. if we do x4x2 =x8 // https://www.youtube.com/watch?v=r76ULW16Ib8 //fcamerax += 16 * (1.0 / 60.0); // some shaders need to know where the camera is looking from. can we tell them? //fcamerax = 2.2 * Math.Sin(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcameraz = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); //// up //fcameray = 4.4 * Math.Cos(Math.PI * (frameIDslider.valueAsNumber - (60 * 30 / 2f)) / (60 * 30 / 2f)); // cameraz.valueAsNumber = (int)(cameraz.max * Math.Sin(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f))); // up //fcameray = 128 * Math.Cos(Math.PI * (frameid - (60 * 30 / 2f)) / (60 * 30 / 2f)); //fcamerax += (1.0 / 60.0); //fcamerax += (1.0 / 60.0) * 120; // 60hz 30sec if (frameIDslider.valueAsNumber < maxframes) { // Blob GC? either this helms or the that we made a Blob static. //await Task.Delay(11); await Task.Delay(33); // gc at 260 happened twice? goto await_nextframe; } total.Stop(); status = "all done " + new { frameid = frameIDslider.valueAsNumber, total.ElapsedMilliseconds }; vsync = default(TaskCompletionSource<object>); // http://stackoverflow.com/questions/22899333/delete-javascript-blobs e.Element.disabled = false; }; #endregion // "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj" // asus will hang // https://3dwarehouse.sketchup.com/model.html?id=fb7a0448d940e575edc01389f336fb0a // can we get one frame into vr? // cube: mesh to cast shadows //{ // var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); // var floor2 = new THREE.Mesh(planeGeometry0, // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) // new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000 }) // ); // floor2.position.set(0, 0, -cubefacesize / 2); // floor2.AttachTo(scene); //} //{ // var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); // var floor2 = new THREE.Mesh(planeGeometry0, // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) // //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) // new THREE.MeshPhongMaterial(new { ambient = 0x0000ff, color = 0x0000ff }) // ); // floor2.position.set(-cubefacesize / 2, 0, 0); // floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); // floor2.AttachTo(scene); //} // front? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader1canvasPX) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, //color = 0x00ff00 }) ); //floor2.position.set(0, 0, -cubefacesize * 0.55); floor2.position.set(-cubefacesize * 0.5, 0, 0); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); floor2.AttachTo(scene); } // left? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader0canvasPZ) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0xff0000, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); floor2.position.set(0, 0, cubefacesize * 0.5); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); floor2.AttachTo(scene); } // right? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader2canvasNZ) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); floor2.position.set(0, 0, -cubefacesize * 0.5); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); floor2.AttachTo(scene); } // back? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader1canvasNX) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, //color = 0x00ff00 }) ); floor2.position.set(cubefacesize * 0.5, 0, 0); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); floor2.AttachTo(scene); } // bottom? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader2canvasNY) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); //floor2.position.set(cubefacesize * 0.5, 0, 0); //floor2.position.set(-cubefacesize * 0.5, 0, 0); floor2.position.set(0, -cubefacesize * 0.5, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); applycameraoffset += delegate { floor2.rotation.set(0, 0, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI ); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI); floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI + bottomRotate100 * 0.01f); }; floor2.AttachTo(scene); } // top? { //var tex0 = new THREE.Texture { image = new moon(), needsUpdate = true }; //var tex0 = new THREE.Texture(new moon()); //var tex0 = new THREE.Texture(new moon()) { needsUpdate = true }; var tex0 = new THREE.Texture(shader2canvasPY) { needsUpdate = true }; applycameraoffset += delegate { tex0.needsUpdate = true; }; var planeGeometry0 = new THREE.PlaneGeometry(cubefacesize, cubefacesize, 8, 8); var floor2 = new THREE.Mesh(planeGeometry0, //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xff0000, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshPhongMaterial(new { ambient = 0xff0000, color = 0xff0000, specular = 0xff0000 }) new THREE.MeshPhongMaterial( new { map = tex0, //ambient = 0x00ff00, // can we color mark it? //color = 0x00ff00 }) ); //floor2.position.set(0, -cubefacesize * 0.5, 0); //floor2.position.set(cubefacesize * 0.5, 0, 0); //floor2.position.set(-cubefacesize * 0.5, 0, 0); floor2.position.set(0, cubefacesize * 0.5, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); applycameraoffset += delegate { floor2.rotation.set(0, 0, 0); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2); floor2.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI / 2); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI ); //floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), Math.PI); floor2.rotateOnAxis(new THREE.Vector3(0, 0, 1), bottomRotate100 * 0.01f); }; floor2.AttachTo(scene); } // X:\jsc.svn\examples\javascript\chrome\apps\ChromeEarth\ChromeEarth\Application.cs // X:\jsc.svn\examples\javascript\canvas\ConvertBlackToAlpha\ConvertBlackToAlpha\Application.cs // hidden for alpha AppWindows //#if FBACKGROUND #region galaxy_starfield new THREE.Texture().With( async s => { var i = new HTML.Images.FromAssets.galaxy_starfield(); //var i = new HTML.Images.FromAssets.galaxy_starfield150FOV(); var bytes = await i.async.bytes; //for (int ii = 0; ii < bytes.Length; ii += 4) //{ // bytes[ii + 3] = (byte)(bytes[ii + 0]); // bytes[ii + 0] = 0xff; // bytes[ii + 1] = 0xff; // bytes[ii + 2] = 0xff; //} var cc = new CanvasRenderingContext2D(i.width, i.height); cc.bytes = bytes; s.image = cc; s.needsUpdate = true; var stars_material = new THREE.MeshBasicMaterial( new { //map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src), map = s, side = THREE.BackSide, transparent = true }); var stars = new THREE.Mesh( new THREE.SphereGeometry(far * 0.9, 64, 64), stars_material ); // http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity //(stars_material as dynamic).opacity = 0.5; scene.add(stars); } ); #endregion new { }.With( delegate { //dae.position.y = -80; //dae.AttachTo(sceneg); //scene.add(dae); //oo.Add(dae); //var rdysw = Stopwatch.StartNew(); //Console.WriteLine() // view-source:http://threejs.org/examples/webgl_multiple_canvases_circle.html // https://threejsdoc.appspot.com/doc/three.js/src.source/extras/cameras/CubeCamera.js.html Native.window.onframe += e => { // let render man know.. // let render man know.. if (vsyncReady()) return; //if (pause) return; //if (pause.@checked) // return; // can we float out of frame? // haha. a bit too flickery. //dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.01) * 50.0; //dae.position.x = Math.Sin(e.delay.ElapsedMilliseconds * 0.001) * 190.0; //globesphere.position.y = Math.Sin(fcamerax * 0.001) * 90.0; //clouds.position.y = Math.Cos(fcamerax * 0.001) * 90.0; //sphere.rotation.y += speed; //clouds.rotation.y += speed; // manual rebuild? // red compiler notifies laptop chrome of pending update // app reloads applycameraoffset(); renderer0.clear(); //rendererPY.clear(); //cameraPX.aspect = canvasPX.aspect; //cameraPX.updateProjectionMatrix(); // um what does this do? //cameraPX.position.z += (z - cameraPX.position.z) * e.delay.ElapsedMilliseconds / 200.0; // mousewheel allos the camera to move closer // once we see the frame in vr, can we udp sync vr tracking back to laptop? //this.targetPX.x += 1; //this.targetNX.x -= 1; //this.targetPY.y += 1; //this.targetNY.y -= 1; //this.targetPZ.z += 1; //this.targetNZ.z -= 1; // how does the 360 or shadertoy want our cubemaps? // and then rotate right? // how can we render cubemap? #region x // upside down? // are we ready? renderer0.render(scene, cameraPX); canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNX); canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region z renderer0.render(scene, cameraPZ); canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNZ); canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region y renderer0.render(scene, cameraPY); //canvasPY.save(); //canvasPY.translate(0, size); //canvasPY.rotate((float)(-Math.PI / 2)); canvasPY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); //canvasPY.restore(); renderer0.render(scene, cameraNY); //canvasNY.save(); //canvasNY.translate(size, 0); //canvasNY.rotate((float)(Math.PI / 2)); canvasNY.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); //canvasNY.restore(); // ? #endregion //renderer0.render(scene, cameraPX); //rendererPY.render(scene, cameraPY); // at this point we should be able to render the sphere texture //public const uint TEXTURE_CUBE_MAP_POSITIVE_X = 34069; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_X = 34070; //public const uint TEXTURE_CUBE_MAP_POSITIVE_Y = 34071; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072; //public const uint TEXTURE_CUBE_MAP_POSITIVE_Z = 34073; //public const uint TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074; //var cube0 = new IHTMLImage[] { // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_px(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nx(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_py(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_ny(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_pz(), // new CSS3DPanoramaByHumus.HTML.Images.FromAssets.humus_nz() //}; new[] { canvasPX, canvasNX, canvasPY, canvasNY, canvasPZ, canvasNZ }.WithEachIndex( (img, index) => { gl.bindTexture(gl.TEXTURE_CUBE_MAP, pass.tex); //gl.pixelStorei(gl.UNPACK_FLIP_X_WEBGL, false); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // http://stackoverflow.com/questions/15364517/pixelstoreigl-unpack-flip-y-webgl-true // https://msdn.microsoft.com/en-us/library/dn302429(v=vs.85).aspx //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0); //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img.canvas); } ); // could do dynamic resolution- fog of war or fog of FOV. where up to 150deg field of vision is encouragedm, not 360 pass.Paint_Image( 0, 0, 0, 0, 0 //, // gl_FragCoord // cannot be scaled, and can be referenced directly. // need another way to scale //zoom: 0.3f ); //paintsw.Stop(); // what does it do? gl.flush(); // let render man know.. if (vsync != null) if (!vsync.Task.IsCompleted) vsync.SetResult(null); }; } ); Console.WriteLine("do you see it?"); }
// seems like switching to iframe, // does not keep parent responsive. // framerate is also shared between iframe and parent. // and reload may cause continuty issues // gpu reload seems to be tab based.. // even having multiple tabs, will kill webgl on both when crashed // having two ips wont help either. // so the true multishader // https://www.khronos.org/webgl/public-mailing-list/archives/1104/msg00041.php // http://www.anandtech.com/show/9124/amd-dives-deep-on-asynchronous-shading // https://code.google.com/p/chromium/issues/detail?id=249391 // http://toji.github.io/shader-perf/ // https://plus.google.com/+BrandonJonesToji/posts/4ERHkicC5Ny // or can we atleast move the program link time? // the only performance gain we could get is to batch link all shaders, keep responsive ui and then wait for it to complete. // await delayed shaders? // so it is rather useless until iframe has its own gpu blocking chain... // is there a way to ask if the deffered link or comple is ready? static void doprograms() { Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // Severity Code Description Project File Line Source //Error Metadata file 'Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\bin\Debug\ChromeShaderToyPrograms.exe' could not be found WebGLIFrameBuffer Z:\jsc.svn\examples\javascript\WebGL\WebGLIFrameBuffer\CSC Build var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag.", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); return; } Native.body.style.backgroundColor = "blue"; gl.oncontextlost += delegate { Native.body.style.backgroundColor = "red"; // reload? }; //gl.canvas.async.oncont var combo = new IHTMLSelect().AttachToDocument(); combo.style.position = IStyle.PositionEnum.absolute; combo.style.left = "0px"; combo.style.top = "0px"; //combo.style.right = "0px"; combo.style.width = "100%"; combo.style.backgroundColor = "rgba(255,255,255,0.5)"; //combo.style.backgroundColor = "rgba(255,255,0,0.5)"; //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))"; combo.style.border = "0px solid transparent"; combo.style.fontSize = "large"; combo.style.paddingLeft = "1em"; combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana; combo.style.cursor = IStyle.CursorEnum.pointer; //var mAudioContext = new AudioContext(); var c = gl.canvas.AttachToDocument(); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); }while (await Native.window.async.onresize); } ); #endregion #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; //mMouseOriY = ev.CursorY; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; // why aint it canvas? //ev.Element //ev.CaptureMouse(); // using ? ev.Element.requestPointerLock(); await ev.Element.async.onmouseup; Native.document.exitPointerLock(); mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; //c.ontouchmove += c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; c.onmousewheel += ev => { ev.preventDefault(); ev.stopPropagation(); mMousePosY += 3 * ev.WheelDirection; }; #endregion // http://www.wufoo.com/html5/attributes/05-list.html // http://www.w3schools.com/tags/att_input_list.asp //uiauto.datalist1.EnsureID(); //uiauto.search.list = uiauto.datalist1.id; //uiauto.datalist1.id = "datalist1"; //uiauto.search.list = "datalist1"; //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument(); var sw = Stopwatch.StartNew(); new IHTMLOption { value = "", innerText = $"{ChromeShaderToyPrograms.References.programs.Count} shaders available" }.AttachTo(combo); // should bind the selection to uri and reload if gpu crashes. #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1em", top = "2em", bottom = "1em", padding = "4em" }; next.onclick += delegate { var n = combo.selectedIndex + 1; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion ChromeShaderToyColumns.Library.ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice ChromeShaderToyPrograms.References.programs.Keys.WithEachIndex( async(key, index) => { var text = (1 + index) + " of " + ChromeShaderToyPrograms.References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // we are about to create 100 objects. does it have any impact to UI? var frag = ChromeShaderToyPrograms.References.programs[key](); var len = frag.ToString().Length; option.innerText = text + " " + new { //frame, //load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; // cant we get it if we manually set it? await option.async.onselect; await Native.window.async.onframe; var load = Stopwatch.StartNew(); var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( gl: gl, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(frag); load.Stop(); new { }.With( async delegate { while (await option.async.ondeselect) { pip = pass0; await option.async.onselect; } } ); var framesInSecond = 0; var theSecond = Stopwatch.StartNew(); var frame = 0; do { frame++; framesInSecond++; if (theSecond.ElapsedMilliseconds >= 1000) { //option.innerText = key + new { frame }; option.innerText = text + " " + new { //frame, framesInSecond, load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; framesInSecond = 0; //theSecond.Restart(); theSecond = Stopwatch.StartNew(); } // can we scale? pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); if (pip != null) { // can we scale? pip.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 0.10f ); } // what does it do? gl.flush(); // wither we are selected or we are pip? await option.async.selected; }while (await Native.window.async.onframe); } ); }
// seems like switching to iframe, // does not keep parent responsive. // framerate is also shared between iframe and parent. // and reload may cause continuty issues // gpu reload seems to be tab based.. // even having multiple tabs, will kill webgl on both when crashed // having two ips wont help either. // so the true multishader // https://www.khronos.org/webgl/public-mailing-list/archives/1104/msg00041.php // http://www.anandtech.com/show/9124/amd-dives-deep-on-asynchronous-shading // https://code.google.com/p/chromium/issues/detail?id=249391 // http://toji.github.io/shader-perf/ // https://plus.google.com/+BrandonJonesToji/posts/4ERHkicC5Ny // or can we atleast move the program link time? // the only performance gain we could get is to batch link all shaders, keep responsive ui and then wait for it to complete. // await delayed shaders? // so it is rather useless until iframe has its own gpu blocking chain... // is there a way to ask if the deffered link or comple is ready? static void doprograms() { Native.body.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // Severity Code Description Project File Line Source //Error Metadata file 'Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms\bin\Debug\ChromeShaderToyPrograms.exe' could not be found WebGLIFrameBuffer Z:\jsc.svn\examples\javascript\WebGL\WebGLIFrameBuffer\CSC Build var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag.", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); return; } Native.body.style.backgroundColor = "blue"; gl.oncontextlost += delegate { Native.body.style.backgroundColor = "red"; // reload? }; //gl.canvas.async.oncont var combo = new IHTMLSelect().AttachToDocument(); combo.style.position = IStyle.PositionEnum.absolute; combo.style.left = "0px"; combo.style.top = "0px"; //combo.style.right = "0px"; combo.style.width = "100%"; combo.style.backgroundColor = "rgba(255,255,255,0.5)"; //combo.style.backgroundColor = "rgba(255,255,0,0.5)"; //combo.style.background = "linear-gradient(to bottom, rgba(255,255,255,0.5 0%,rgba(255,255,255,0.0 100%))"; combo.style.border = "0px solid transparent"; combo.style.fontSize = "large"; combo.style.paddingLeft = "1em"; combo.style.fontFamily = IStyle.FontFamilyEnum.Verdana; combo.style.cursor = IStyle.CursorEnum.pointer; //var mAudioContext = new AudioContext(); var c = gl.canvas.AttachToDocument(); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); } while (await Native.window.async.onresize); } ); #endregion #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; //mMouseOriY = ev.CursorY; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; // why aint it canvas? //ev.Element //ev.CaptureMouse(); // using ? ev.Element.requestPointerLock(); await ev.Element.async.onmouseup; Native.document.exitPointerLock(); mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; //c.ontouchmove += c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; c.onmousewheel += ev => { ev.preventDefault(); ev.stopPropagation(); mMousePosY += 3 * ev.WheelDirection; }; #endregion // http://www.wufoo.com/html5/attributes/05-list.html // http://www.w3schools.com/tags/att_input_list.asp //uiauto.datalist1.EnsureID(); //uiauto.search.list = uiauto.datalist1.id; //uiauto.datalist1.id = "datalist1"; //uiauto.search.list = "datalist1"; //new IHTMLPre { new { uiauto.search.list, uiauto.datalist1.id } }.AttachToDocument(); var sw = Stopwatch.StartNew(); new IHTMLOption { value = "", innerText = $"{ChromeShaderToyPrograms.References.programs.Count} shaders available" }.AttachTo(combo); // should bind the selection to uri and reload if gpu crashes. #region can we have a next button? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150807/shadertoy new IHTMLButton { "next" }.AttachToDocument().With( next => { new IStyle(next) { position = IStyle.PositionEnum.absolute, right = "1em", top = "2em", bottom = "1em", padding = "4em" }; next.onclick += delegate { var n = combo.selectedIndex + 1; Console.WriteLine(new { n }); combo.selectedIndex = n; }; } ); #endregion ChromeShaderToyColumns.Library.ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice ChromeShaderToyPrograms.References.programs.Keys.WithEachIndex( async (key, index) => { var text = (1 + index) + " of " + ChromeShaderToyPrograms.References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // we are about to create 100 objects. does it have any impact to UI? var frag = ChromeShaderToyPrograms.References.programs[key](); var len = frag.ToString().Length; option.innerText = text + " " + new { //frame, //load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware //fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; // cant we get it if we manually set it? await option.async.onselect; await Native.window.async.onframe; var load = Stopwatch.StartNew(); var pass0 = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( gl: gl, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass0.MakeHeader_Image(); pass0.NewShader_Image(frag); load.Stop(); new { }.With( async delegate { while (await option.async.ondeselect) { pip = pass0; await option.async.onselect; } } ); var framesInSecond = 0; var theSecond = Stopwatch.StartNew(); var frame = 0; do { frame++; framesInSecond++; if (theSecond.ElapsedMilliseconds >= 1000) { //option.innerText = key + new { frame }; option.innerText = text + " " + new { //frame, framesInSecond, load = load.ElapsedMilliseconds + "ms ", frag = len + "bytes ", // a telemetry to track while running on actual hardware fragGPU = pass0.xCreateShader.fsTranslatedShaderSource.Length + " bytes" }; framesInSecond = 0; //theSecond.Restart(); theSecond = Stopwatch.StartNew(); } // can we scale? pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); if (pip != null) { // can we scale? pip.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 0.10f ); } // what does it do? gl.flush(); // wither we are selected or we are pip? await option.async.selected; } while (await Native.window.async.onframe); } ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IDefault page = null) { #region += Launched chrome.app.window //Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' ChromeWebGLFrameBufferToSquare X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeWebGLFrameBufferToSquare\ChromeWebGLFrameBufferToSquare\Application.cs 51 dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? chrome.runtime.UpdateAvailable += delegate { new chrome.Notification(title: "UpdateAvailable"); }; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "ChromeUDPSendAsync"); var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: null ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion //Z:\jsc.svn\examples\javascript\WebGLLesson01\WebGLLesson01\Application.cs(48,13): error CS0121: The call is ambiguous between the following methods or properties: // 'ScriptCoreLib.Extensions.LinqExtensions.With<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>(ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript, System.Action<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>)' and // 'ScriptCoreLib.Extensions.LinqExtensions.With<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>(ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript, System.Action<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>)' // works for IE11 //var size = 512; //var size = 256; //var size = 96; // size wont matter? always rendered var size = 16; var rttFramebuffer_width = 128; var rttFramebuffer_height = 128; var gl = new WebGLRenderingContext(); var canvas = gl.canvas.AttachToDocument(); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; canvas.style.SetLocation(0, 0, size, size); canvas.width = size; canvas.height = size; var gl_viewportWidth = size; var gl_viewportHeight = size; #region createShader // dont we have a better api already? Func<ScriptCoreLib.GLSL.Shader, WebGLShader> createShader = (src) => { var shader = gl.createShader(src); // verify if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) == null) { Native.window.alert("error in SHADER:\n" + gl.getShaderInfoLog(shader)); throw new InvalidOperationException("shader failed"); return null; } return shader; }; #endregion var vs = createShader(new GeometryVertexShader()); var fs = createShader(new GeometryFragmentShader()); var shaderProgram = new WebGLProgram(gl); gl.attachShader(shaderProgram, vs); gl.attachShader(shaderProgram, fs); gl.linkProgram(shaderProgram); var mvMatrix = glMatrix.mat4.create(); var pMatrix = glMatrix.mat4.create(); var vec3aVertexPositionBuffer = new WebGLBuffer(gl); var vec2aTextureCoordBuffer = new WebGLBuffer(gl); gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f); gl.enable(gl.DEPTH_TEST); #region initTextureFramebuffer var xWebGLFramebuffer = new WebGLFramebuffer(gl); gl.bindFramebuffer(gl.FRAMEBUFFER, xWebGLFramebuffer); // generateMipmap: level 0 not power of 2 or not all the same size //var rttFramebuffer_width = canvas.width; // WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size var xWebGLTexture = new WebGLTexture(gl); gl.bindTexture(gl.TEXTURE_2D, xWebGLTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR_MIPMAP_NEAREST); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer_width, rttFramebuffer_height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.generateMipmap(gl.TEXTURE_2D); var xWebGLRenderbuffer = new WebGLRenderbuffer(gl); gl.bindRenderbuffer(gl.RENDERBUFFER, xWebGLRenderbuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer_width, rttFramebuffer_height); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, xWebGLTexture, 0); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, xWebGLRenderbuffer); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindRenderbuffer(gl.RENDERBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); #endregion var pass = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass( gl: gl, precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null ); pass.MakeHeader_Image(); pass.NewShader_Image( new ChromeShaderToyColumns.Shaders.ProgramFragmentShader() ); var sw = Stopwatch.StartNew(); var vbo = new WebGLBuffer(gl); Native.window.onframe += e => { // can we run it in VR as HUD? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706 #region FRAMEBUFFER gl.bindFramebuffer(gl.FRAMEBUFFER, xWebGLFramebuffer); //// http://stackoverflow.com/questions/20362023/webgl-why-does-transparent-canvas-show-clearcolor-color-component-when-alpha-is gl.clearColor(1, 1, 0, 1.0f); gl.viewport(0, 0, rttFramebuffer_width, rttFramebuffer_height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); #region Paint_Image ChromeShaderToyColumns.Library.ShaderToy.EffectPass.Paint_ImageDelegate Paint_Image = (time, mouseOriX, mouseOriY, mousePosX, mousePosY, zoom) => { var mProgram = pass.xCreateShader.mProgram; var xres = rttFramebuffer_width; var yres = rttFramebuffer_height; #region Paint_Image //new IHTMLPre { "enter Paint_Image" }.AttachToDocument(); // this is enough to do pip to bottom left, no need to adjust vertex positions even? //gl.viewport(0, 0, (int)xres, (int)yres); // useProgram: program not valid gl.useProgram(mProgram); // uniform4fv var mouse = new[] { mousePosX, mousePosY, mouseOriX, mouseOriY }; // X:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\Application.cs //gl.getUniformLocation(mProgram, "fZoom").With(fZoom => gl.uniform1f(fZoom, zoom)); var l2 = gl.getUniformLocation(mProgram, "iGlobalTime"); if (l2 != null) gl.uniform1f(l2, time); var l3 = gl.getUniformLocation(mProgram, "iResolution"); if (l3 != null) gl.uniform3f(l3, xres, yres, 1.0f); var l4 = gl.getUniformLocation(mProgram, "iMouse"); if (l4 != null) gl.uniform4fv(l4, mouse); //var l7 = gl.getUniformLocation(this.mProgram, "iDate"); if (l7 != null) gl.uniform4fv(l7, dates); //var l9 = gl.getUniformLocation(this.mProgram, "iSampleRate"); if (l9 != null) gl.uniform1f(l9, this.mSampleRate); var ich0 = gl.getUniformLocation(mProgram, "iChannel0"); if (ich0 != null) gl.uniform1i(ich0, 0); var ich1 = gl.getUniformLocation(mProgram, "iChannel1"); if (ich1 != null) gl.uniform1i(ich1, 1); var ich2 = gl.getUniformLocation(mProgram, "iChannel2"); if (ich2 != null) gl.uniform1i(ich2, 2); var ich3 = gl.getUniformLocation(mProgram, "iChannel3"); if (ich3 != null) gl.uniform1i(ich3, 3); // what if there are other textures too? // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeWebGLFrameBuffer\ChromeWebGLFrameBuffer\Application.cs //for (var i = 0; i < mInputs.Length; i++) //{ // var inp = mInputs[i]; // gl.activeTexture((uint)(gl.TEXTURE0 + i)); // if (inp == null) // { // gl.bindTexture(gl.TEXTURE_2D, null); // } //} var times = new[] { 0.0f, 0.0f, 0.0f, 0.0f }; var l5 = gl.getUniformLocation(mProgram, "iChannelTime"); if (l5 != null) gl.uniform1fv(l5, times); var resos = new float[12] { 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f }; var l8 = gl.getUniformLocation(mProgram, "iChannelResolution"); if (l8 != null) gl.uniform3fv(l8, resos); // using ? var vec2pos = (uint)gl.getAttribLocation(mProgram, "pos"); //gl.bindBuffer(gl.ARRAY_BUFFER, quadVBO); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); #region vertices float left = -1.0f; // y reversed? float bottom = -1.0f; float right = 1.0f; float top = 1.0f; var fvertices = new float[] { // left top left, bottom, // right top //right, -1.0f, right, bottom, // left bottom left, top, // right top //right, -1.0f, right, bottom, // right bottom //right, 1.0f, right, top, // left bottom left,top }; var vertices = new Float32Array(fvertices); #endregion gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.vertexAttribPointer(vec2pos, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vec2pos); // GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to render with no buffer attached to enabled attribute 1 gl.drawArrays(gl.TRIANGLES, 0, 6); // first frame is now visible gl.disableVertexAttribArray(vec2pos); gl.bindBuffer(gl.ARRAY_BUFFER, null); #endregion //mFrame++; }; #endregion Paint_Image( sw.ElapsedMilliseconds / 1000.0f, 0, 0, 0, 0 ); gl.flush(); //// INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size gl.bindTexture(gl.TEXTURE_2D, xWebGLTexture); gl.generateMipmap(gl.TEXTURE_2D); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); #endregion gl.clearColor(0, 0, 1, 1.0f); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); glMatrix.mat4.perspective(45f, (float)gl_viewportWidth / (float)gl_viewportHeight, 0.1f, 120.0f, pMatrix); glMatrix.mat4.identity(mvMatrix); glMatrix.mat4.translate(mvMatrix, new float[] { -1.5f + (f)Math.Cos( sw.ElapsedMilliseconds //slow it down *0.001f ) , 0.0f, -15.0f }); //glMatrix.mat4.translate(mvMatrix, new float[] { 3.0f, 0.0f, 0.0f }); gl.useProgram(shaderProgram); // X:\jsc.svn\examples\javascript\WebGL\WebGLLesson05\WebGLLesson05\Application.cs gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uPMatrix"), false, pMatrix); gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uMVMatrix"), false, mvMatrix); // GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1 for (int ihalf = 0; ihalf < 2; ihalf++) { #region vec2aTextureCoord var vec2aTextureCoord = gl.getAttribLocation(shaderProgram, "aTextureCoord"); gl.bindBuffer(gl.ARRAY_BUFFER, vec2aTextureCoordBuffer); // http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-part-6_25.html var textureCoords = new float[]{ // Front face 0.0f, 0.0f, 0.0f, -1.0f, -1.0f, -1.0f, -1.0f, 0.0f, }; if (ihalf % 2 == 0) { textureCoords = new[]{ 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, }; } gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW); gl.vertexAttribPointer((uint)vec2aTextureCoord, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray((uint)vec2aTextureCoord); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, xWebGLTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.NEAREST); gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0); #endregion #region aVertexPosition var vec3aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.bindBuffer(gl.ARRAY_BUFFER, vec3aVertexPositionBuffer); var rsize = 4f; var vec3vertices = new[]{ rsize, rsize, 0.0f, rsize, -rsize, 0.0f, -rsize, -rsize, 0.0f, //-4.0f, -4.0f, 0.0f, //-4, 4f, 0.0f, //4.0f, 4.0f, 0.0f, }; if (ihalf % 2 == 0) { vec3vertices = new[]{ -rsize, -rsize, 0.0f, -rsize, rsize, 0.0f, rsize, rsize, 0.0f, }; } gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3vertices), gl.STATIC_DRAW); gl.vertexAttribPointer((uint)vec3aVertexPosition, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray((uint)vec3aVertexPosition); #endregion var vec3vertices_numItems = vec3vertices.Length / 3; //gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.Length / 3); gl.drawArrays(gl.TRIANGLE_STRIP, 0, vec3vertices_numItems); } }; #region AtResize Action AtResize = delegate { gl_viewportWidth = Native.window.Width; gl_viewportHeight = Native.window.Height; canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight); canvas.width = gl_viewportWidth; canvas.height = gl_viewportHeight; }; Native.window.onresize += e => { AtResize(); }; AtResize(); #endregion }