// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706 // subst b: r:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\bin\Debug\staging\GLSLShaderToyPip.Application\web /// <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) { // the idea of this exammple // is to look at how multiple shaders can be linked to work together. // we need two shaders // first we could run them as separate programs in pip mode // selected by the host/javascript // then repeat the same experiment, but have the shader do the pip in a single program // later shader code could be nugeted // lets have a copy of // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyQuadraticBezierByMattdesl\ChromeShaderToyQuadraticBezierByMattdesl\Shaders\Program.frag // locally should we need to modify it.. // can we change colors? // https://www.shadertoy.com/view/lsSGRz #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? chrome.runtime.UpdateAvailable += delegate { new chrome.Notification(title: "UpdateAvailable"); }; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "ChromeUDPSendAsync"); var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options: null ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion new { }.With( async delegate //02000047 <module>.SHA1111132814b0387cee18e0fe5efe63eb881cfd505@901285072 //02000048 GLSLShaderToyPip.Application+<AttachToDocument>d__1+<MoveNext>06000020 //script: error JSC1000: //error: // statement cannot be a load instruction(or is it a bug?) // [0x0000] // ldarg.0 +1 -0 //public static async void AttachToDocument() //public async void AttachToDocument() { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; var gl = new WebGLRenderingContext(alpha: true); #region GPU process was unable to boot if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag. \n WebGL: Unavailable.\n GPU process was unable to boot. \n restart chrome.", // chrome sends us to about:blank? //new IHTMLAnchor { // target = "_blank", // href = "about:gpu", innerText = "about:gpu", // // http://tirania.org/blog/archive/2009/Jul-27-1.html // //onclick += de //} //.With(a => { a.onclick += e => { e.preventDefault(); Native.window.open("about:gpu"); }; } ) }.AttachToDocument(); return; } #endregion var c = gl.canvas.AttachToDocument(); #region oncontextlost gl.oncontextlost += e => { //[12144:10496:0311 / 120850:ERROR: gpu_watchdog_thread.cc(314)] : The GPU process hung. Terminating after 10000 ms. // GpuProcessHostUIShim: The GPU process crashed! gl.canvas.Orphanize(); new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 @"Rats! WebGL hit a snag. oncontextlost. The GPU process hung. Terminating. check chrome://gpu for log messages. do we have a stack trace? " + new { e.statusMessage } , // chrome sends us to about:blank? //new IHTMLAnchor { // target = "_blank", // href = "about:gpu", innerText = "about:gpu", // // http://tirania.org/blog/archive/2009/Jul-27-1.html // //onclick += de //} //.With(a => { a.onclick += e => { e.preventDefault(); Native.window.open("about:gpu"); }; } ) }.AttachToDocument(); }; #endregion #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Math.Min(300, 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 = c.width / 2; var mMousePosY = 0; c.onmousedown += ev => { mMouseOriX = ev.CursorX; mMouseOriY = ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; ev.CaptureMouse(); }; c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX = ev.CursorX; mMousePosY = c.height - ev.CursorY; } }; c.onmouseup += ev => { mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; #endregion var quadVBO = ShaderToy.createQuadVBO(gl); var pass1 = new ShaderToy.EffectPass( gl: gl, precission: ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, quadVBO: quadVBO ); pass1.MakeHeader_Image(); var frag1 = new GLSLShaderToyPip.Shaders.TheColorGradientFragmentShader(); pass1.NewShader_Image(frag1); var pass0 = new ShaderToy.EffectPass( gl: gl, precission: ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, quadVBO: quadVBO ); pass0.MakeHeader_Image(); var frag0 = new GLSLShaderToyPip.Shaders.ChromeShaderToyQuadraticBezierByMattdeslFragmentShader(); //var frag = new GLSLShaderToyPip.Shaders.TheColorGradientFragmentShader(); pass0.NewShader_Image(frag0); if (pass0.xCreateShader.mProgram == null) { gl.Orphanize(); return; } new { }.With( async delegate { do { Native.document.body.style.backgroundColor = "cyan"; await Task.Delay(500); Native.document.body.style.backgroundColor = "yellow"; await Task.Delay(500); } while (await Native.window.async.onframe); } ); // https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext #region Paint_Image Paint_ImageDelegate Paint_Image = (mProgram, time, mouseOriX, mouseOriY, mousePosX, mousePosY) => { var viewportxres = gl.canvas.width; var viewportyres = gl.canvas.height; #region Paint_Image //new IHTMLPre { "enter Paint_Image" }.AttachToDocument(); // http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.viewport(0, 0, viewportxres, viewportyres); // alpha to zero will only hide the pixel if blending is enabled. gl.useProgram(mProgram); // uniform4fv var mouse = new[] { mousePosX, mousePosY, mouseOriX, mouseOriY }; 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, viewportxres, viewportyres, 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); //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 l1 = (uint)gl.getAttribLocation(mProgram, "pos"); gl.bindBuffer(gl.ARRAY_BUFFER, quadVBO); gl.vertexAttribPointer(l1, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(l1); gl.drawArrays(gl.TRIANGLES, 0, 6); // first frame is now visible gl.disableVertexAttribArray(l1); #endregion //mFrame++; }; #endregion var sw = Stopwatch.StartNew(); do { pass1.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, //zoom: 0.5f zoom: mMousePosX / (float)c.width ); // what does it do? gl.flush(); } while (await Native.window.async.onframe); } ); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706 // subst b: r:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\bin\Debug\staging\GLSLShaderToyPip.Application\web /// <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) { // the idea of this exammple // is to look at how multiple shaders can be linked to work together. // we need two shaders // first we could run them as separate programs in pip mode // selected by the host/javascript // then repeat the same experiment, but have the shader do the pip in a single program // later shader code could be nugeted // lets have a copy of // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyQuadraticBezierByMattdesl\ChromeShaderToyQuadraticBezierByMattdesl\Shaders\Program.frag // locally should we need to modify it.. // can we change colors? // https://www.shadertoy.com/view/lsSGRz #region += Launched chrome.app.window dynamic self = Native.self; dynamic self_chrome = self.chrome; object self_chrome_socket = self_chrome.socket; if (self_chrome_socket != null) { if (!(Native.window.opener == null && Native.window.parent == Native.window.self)) { Console.WriteLine("chrome.app.window.create, is that you?"); // pass thru } else { // should jsc send a copresence udp message? chrome.runtime.UpdateAvailable += delegate { new chrome.Notification(title: "UpdateAvailable"); }; chrome.app.runtime.Launched += async delegate { // 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }} Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href }); new chrome.Notification(title: "ChromeUDPSendAsync"); var xappwindow = await chrome.app.window.create( Native.document.location.pathname, options : null ); //xappwindow.setAlwaysOnTop xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion new { }.With( async delegate //02000047 <module>.SHA1111132814b0387cee18e0fe5efe63eb881cfd505@901285072 //02000048 GLSLShaderToyPip.Application+<AttachToDocument>d__1+<MoveNext>06000020 //script: error JSC1000: //error: // statement cannot be a load instruction(or is it a bug?) // [0x0000] // ldarg.0 +1 -0 //public static async void AttachToDocument() //public async void AttachToDocument() { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; var gl = new WebGLRenderingContext(alpha: true); #region GPU process was unable to boot if (gl == null) { new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 "Rats! WebGL hit a snag. \n WebGL: Unavailable.\n GPU process was unable to boot. \n restart chrome.", // chrome sends us to about:blank? //new IHTMLAnchor { // target = "_blank", // href = "about:gpu", innerText = "about:gpu", // // http://tirania.org/blog/archive/2009/Jul-27-1.html // //onclick += de //} //.With(a => { a.onclick += e => { e.preventDefault(); Native.window.open("about:gpu"); }; } ) }.AttachToDocument(); return; } #endregion var c = gl.canvas.AttachToDocument(); #region oncontextlost gl.oncontextlost += e => { //[12144:10496:0311 / 120850:ERROR: gpu_watchdog_thread.cc(314)] : The GPU process hung. Terminating after 10000 ms. // GpuProcessHostUIShim: The GPU process crashed! gl.canvas.Orphanize(); new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 @"Rats! WebGL hit a snag. oncontextlost. The GPU process hung. Terminating. check chrome://gpu for log messages. do we have a stack trace? " + new { e.statusMessage }, // chrome sends us to about:blank? //new IHTMLAnchor { // target = "_blank", // href = "about:gpu", innerText = "about:gpu", // // http://tirania.org/blog/archive/2009/Jul-27-1.html // //onclick += de //} //.With(a => { a.onclick += e => { e.preventDefault(); Native.window.open("about:gpu"); }; } ) }.AttachToDocument(); }; #endregion #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; c.height = Math.Min(300, 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 = c.width / 2; var mMousePosY = 0; c.onmousedown += ev => { mMouseOriX = ev.CursorX; mMouseOriY = ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; ev.CaptureMouse(); }; c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX = ev.CursorX; mMousePosY = c.height - ev.CursorY; } }; c.onmouseup += ev => { mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; #endregion var quadVBO = ShaderToy.createQuadVBO(gl); var pass1 = new ShaderToy.EffectPass( gl: gl, precission: ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, quadVBO: quadVBO ); pass1.MakeHeader_Image(); var frag1 = new GLSLShaderToyPip.Shaders.TheColorGradientFragmentShader(); pass1.NewShader_Image(frag1); var pass0 = new ShaderToy.EffectPass( gl: gl, precission: ShaderToy.DetermineShaderPrecission(gl), supportDerivatives: gl.getExtension("OES_standard_derivatives") != null, quadVBO: quadVBO ); pass0.MakeHeader_Image(); var frag0 = new GLSLShaderToyPip.Shaders.ChromeShaderToyQuadraticBezierByMattdeslFragmentShader(); //var frag = new GLSLShaderToyPip.Shaders.TheColorGradientFragmentShader(); pass0.NewShader_Image(frag0); if (pass0.xCreateShader.mProgram == null) { gl.Orphanize(); return; } new { }.With( async delegate { do { Native.document.body.style.backgroundColor = "cyan"; await Task.Delay(500); Native.document.body.style.backgroundColor = "yellow"; await Task.Delay(500); } while (await Native.window.async.onframe); } ); // https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext #region Paint_Image Paint_ImageDelegate Paint_Image = (mProgram, time, mouseOriX, mouseOriY, mousePosX, mousePosY) => { var viewportxres = gl.canvas.width; var viewportyres = gl.canvas.height; #region Paint_Image //new IHTMLPre { "enter Paint_Image" }.AttachToDocument(); // http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); gl.viewport(0, 0, viewportxres, viewportyres); // alpha to zero will only hide the pixel if blending is enabled. gl.useProgram(mProgram); // uniform4fv var mouse = new[] { mousePosX, mousePosY, mouseOriX, mouseOriY }; 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, viewportxres, viewportyres, 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); } //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 l1 = (uint)gl.getAttribLocation(mProgram, "pos"); gl.bindBuffer(gl.ARRAY_BUFFER, quadVBO); gl.vertexAttribPointer(l1, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(l1); gl.drawArrays(gl.TRIANGLES, 0, 6); // first frame is now visible gl.disableVertexAttribArray(l1); #endregion //mFrame++; }; #endregion var sw = Stopwatch.StartNew(); do { pass1.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, zoom: 1.0f ); pass0.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY, //zoom: 0.5f zoom: mMousePosX / (float)c.width ); // what does it do? gl.flush(); }while (await Native.window.async.onframe); } ); }