// X:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\Application.cs public EffectPass( AudioContext wa = null, gl gl = null, string precission = null, bool supportDerivatives = false, RefreshTexturThumbailDelegate callback = null, object obj = null, bool forceMuted = false, bool forcePaused = false, // createQuadVBO // ARRAY_BUFFER WebGLBuffer quadVBO = null, GainNode outputGainNode = null ) { //new IHTMLPre { "enter EffectPass" }.AttachToDocument(); // used by? var mFrame = 0; this.MakeHeader_Image = delegate { #region MakeHeader_Image //new IHTMLPre { "enter MakeHeader_Image" }.AttachToDocument(); var header = precission; var headerlength = 3; if (supportDerivatives) { header += "#extension GL_OES_standard_derivatives : enable\n"; headerlength++; } header += "uniform vec3 iResolution;\n" + "uniform float iGlobalTime;\n" + "uniform float iChannelTime[4];\n" + "uniform vec4 iMouse;\n" + "uniform vec4 iDate;\n" + "uniform float iSampleRate;\n" + "uniform vec3 iChannelResolution[4];\n"; // not to be used by the hosted shader, but by our code in the middle on the gpu. // gpu code injection. first take. //"uniform float fZoom;\n"; headerlength += 7; for (var i = 0; i < mInputs.Length; i++) { var inp = mInputs[i]; // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyVRCardboardGrid\ChromeShaderToyVRCardboardGrid\Application.cs //if (inp != null && inp.mInfo.mType == "cubemap") if (inp is samplerCube) { new IHTMLPre { "add MakeHeader_Image samplerCube" }.AttachToDocument(); header += "uniform samplerCube iChannel" + i + ";\n"; } else { //new IHTMLPre { "add MakeHeader_Image sampler2D" }.AttachToDocument(); header += "uniform sampler2D iChannel" + i + ";\n"; } headerlength++; } // rror CreateShader {{ infoLog = ERROR: 0:250: 'assign' : l-value required "gl_FragCoord" (can't modify gl_FragCoord) // ERROR: 0:251: 'assign' : l - value required "gl_FragCoord"(can't modify gl_FragCoord) //}} // error CreateShader {{ infoLog = ERROR: 0:253: '=' : cannot convert from 'FragCoord mediump 4-component vector of float' to 'highp 2-component vector of float' var mImagePassFooter = @" void main( void ) { vec4 color = gl_FragColor; color.a = 1.0; mainImage( color, gl_FragCoord.xy ); gl_FragColor = color; } "; #endregion this.NewShader_Image = (fs) => { #region NewShader_Image //new IHTMLPre { "enter NewShader_Image" }.AttachToDocument(); var shaderCode = fs.ToString(); // is that it? var vsSource = "attribute vec2 pos; void main() { gl_Position = vec4(pos.xy,0.0,1.0); }"; var fsSource = header + shaderCode + mImagePassFooter; this.xCreateShader = CreateShader(gl, vsSource, fsSource, false); #endregion var vbo = new WebGLBuffer(gl); #region calledby //EffectPass.Paint_Image(effect.js:724) //EffectPass.Paint(effect.js:1038) //Effect.Paint(effect.js:1247) //renderLoop2(pgWatch.js:404) //ShaderToy.startRendering(pgWatch.js:420) //watchInit(pgWatch.js:1386) //onload(Xls3WS: 78) #endregion this.Paint_Image = (time, mouseOriX, mouseOriY, mousePosX, mousePosY, zoom) => { var mProgram = xCreateShader.mProgram; var xres = gl.canvas.width * zoom; var yres = gl.canvas.height * zoom; #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); if (this.ProgramSelected != null) this.ProgramSelected(mProgram); // uniform4fv var uniform4fv_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, uniform4fv_mouse); // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\synergy\SimpleDigitalClock\SimpleDigitalClock\Application.cs // uniform vec4 iDate; // (year, month, day, time in seconds) // http://bytes.com/topic/c-sharp/answers/258829-time-elapsed-since-midnight-c var now = DateTime.Now; //var sinceMidnight = now - DateTime.Today; var sinceMidnight = now - now.Date; var uniform4fv_dates = new float[] { now.Year, now.Month, now.Day, (float)sinceMidnight.TotalSeconds }; var l7 = gl.getUniformLocation(mProgram, "iDate"); if (l7 != null) gl.uniform4fv(l7, uniform4fv_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.bufferData(gl.ARRAY_BUFFER, fvertices, 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++; }; }; }; }
// X:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\Application.cs public EffectPass( AudioContext wa = null, gl gl = null, string precission = null, bool supportDerivatives = false, RefreshTexturThumbailDelegate callback = null, object obj = null, bool forceMuted = false, bool forcePaused = false, // createQuadVBO // ARRAY_BUFFER WebGLBuffer quadVBO = null, GainNode outputGainNode = null ) { //new IHTMLPre { "enter EffectPass" }.AttachToDocument(); // used by? var mFrame = 0; // http://math.hws.edu/eck/cs424/notes2013/19_GLSL.html // http://stackoverflow.com/questions/10079368/how-would-i-do-environment-reflection-in-webgl-without-using-a-library-like-thre this.MakeHeader_Image = delegate { #region MakeHeader_Image //new IHTMLPre { "enter MakeHeader_Image" }.AttachToDocument(); var header = precission; var headerlength = 3; if (supportDerivatives) { header += "#extension GL_OES_standard_derivatives : enable\n"; headerlength++; } header += "uniform vec3 iResolution;\n" + "uniform float iGlobalTime;\n" + "uniform float iChannelTime[4];\n" + "uniform vec4 iMouse;\n" + "uniform vec4 iDate;\n" + "uniform float iSampleRate;\n" + "uniform vec3 iChannelResolution[4];\n"; // not to be used by the hosted shader, but by our code in the middle on the gpu. // gpu code injection. first take. //"uniform float fZoom;\n"; headerlength += 7; for (var i = 0; i < mInputs.Length; i++) { var inp = mInputs[i]; // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyVRCardboardGrid\ChromeShaderToyVRCardboardGrid\Application.cs //if (inp != null && inp.mInfo.mType == "cubemap") if (inp is samplerCube) { //new IHTMLPre { "add MakeHeader_Image samplerCube" }.AttachToDocument(); this.tex = new WebGLTexture(gl); // http://stackoverflow.com/questions/10079368/how-would-i-do-environment-reflection-in-webgl-without-using-a-library-like-thre // view-source:https://www.shadertoy.com/js/effect.js // um can there be only one samplerCube? gl.activeTexture(gl.TEXTURE0); //gl.enable(gl.TEXTURE_CUBE_MAP); gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); //gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, (int)gl.CLAMP_TO_EDGE); //gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, (int)gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR); //var cube0 = new IHTMLImage[] { // new HTML.Images.FromAssets.cube02_0(), // new HTML.Images.FromAssets.cube02_1(), // new HTML.Images.FromAssets.cube02_2(), // new HTML.Images.FromAssets.cube02_3(), // new HTML.Images.FromAssets.cube02_4(), // new HTML.Images.FromAssets.cube02_5() //}; //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() //}; //cube0.WithEachIndex( // (pendingimg, index) => // { // pendingimg.InvokeOnComplete( // img => // { // gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); // //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); // gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0); // gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + (uint)index, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); // new IHTMLPre { "add MakeHeader_Image samplerCube TEXTURE_CUBE_MAP_POSITIVE_X + " + new { index } }.AttachToDocument(); // if (index == 5) // { // new IHTMLPre { "add MakeHeader_Image samplerCube activeTexture " }.AttachToDocument(); // // samplerCube iChannel0; = 0 = TEXTURE0 // } // // https://code.google.com/p/opengles-book-samples/source/browse/trunk/WebGL/Chapter_9/Simple_TextureCubemap/Simple_TextureCubemap.html?r=5 // // http://stackoverflow.com/questions/31665132/gl-invalid-operation-caused-by-samplercube // // http://forum.processing.org/two/discussion/7039/samplercube-and-ambient-reflection // } // ); // } //); header += "uniform samplerCube iChannel" + i + ";\n"; } else { //new IHTMLPre { "add MakeHeader_Image sampler2D" }.AttachToDocument(); header += "uniform sampler2D iChannel" + i + ";\n"; } // dont need it? headerlength++; } // rror CreateShader {{ infoLog = ERROR: 0:250: 'assign' : l-value required "gl_FragCoord" (can't modify gl_FragCoord) // ERROR: 0:251: 'assign' : l - value required "gl_FragCoord"(can't modify gl_FragCoord) //}} // error CreateShader {{ infoLog = ERROR: 0:253: '=' : cannot convert from 'FragCoord mediump 4-component vector of float' to 'highp 2-component vector of float' var mImagePassFooter = @" void main( void ) { vec4 color = gl_FragColor; color.a = 1.0; mainImage( color, gl_FragCoord.xy ); gl_FragColor = color; } "; #endregion this.NewShader_Image = (fs) => { #region NewShader_Image //new IHTMLPre { "enter NewShader_Image" }.AttachToDocument(); var shaderCode = fs.ToString(); // is that it? var vsSource = "attribute vec2 pos; void main() { gl_Position = vec4(pos.xy,0.0,1.0); }"; var fsSource = header + shaderCode + mImagePassFooter; this.xCreateShader = CreateShader(gl, vsSource, fsSource, false); #endregion var vbo = new WebGLBuffer(gl); #region calledby //EffectPass.Paint_Image(effect.js:724) //EffectPass.Paint(effect.js:1038) //Effect.Paint(effect.js:1247) //renderLoop2(pgWatch.js:404) //ShaderToy.startRendering(pgWatch.js:420) //watchInit(pgWatch.js:1386) //onload(Xls3WS: 78) #endregion this.Paint_Image = (time, mouseOriX, mouseOriY, mousePosX, mousePosY, zoom) => { var mProgram = xCreateShader.mProgram; var xres = gl.canvas.width * zoom; var yres = gl.canvas.height * zoom; #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 uniform4fv_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, uniform4fv_mouse); // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\synergy\SimpleDigitalClock\SimpleDigitalClock\Application.cs // uniform vec4 iDate; // (year, month, day, time in seconds) // http://bytes.com/topic/c-sharp/answers/258829-time-elapsed-since-midnight-c var now = DateTime.Now; //var sinceMidnight = now - DateTime.Today; var sinceMidnight = now - now.Date; var uniform4fv_dates = new float[] { now.Year, now.Month, now.Day, (float)sinceMidnight.TotalSeconds }; var l7 = gl.getUniformLocation(mProgram, "iDate"); if (l7 != null) gl.uniform4fv(l7, uniform4fv_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 }; #endregion gl.bufferData(gl.ARRAY_BUFFER, fvertices, gl.STATIC_DRAW); gl.vertexAttribPointer(vec2pos, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(vec2pos); //var iChannel0 = gl.getUniformLocation(mProgram, "iChannel0"); // 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++; }; }; }; }