internal void rotate(Float32Array mvMatrix, float p, float[] p_2) { throw new NotImplementedException(); }
public static WebGLBuffer createQuadVBO(gl gl , float left = -1.0f // y reversed? , float bottom = -1.0f , float right = 1.0f , float top = 1.0f ) { // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150311 //enter createQuadVBO { { i = 0, value = null } } //enter createQuadVBO { { i = 1, value = null } } //enter createQuadVBO { { i = 2, value = 1 } } //enter createQuadVBO { { i = 3, value = null } } //enter createQuadVBO { { i = 4, value = null } } //enter createQuadVBO { { i = 5, value = null } } //enter createQuadVBO { { i = 6, value = 1 } } //enter createQuadVBO { { i = 7, value = null } } //enter createQuadVBO { { i = 8, value = 1 } } //enter createQuadVBO { { i = 9, value = null } } //enter createQuadVBO { { i = 10, value = null } } //enter createQuadVBO { { i = 11, value = null } } 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 }; //new IHTMLPre { "enter createQuadVBO" }.AttachToDocument(); //for (int i = 0; i < fvertices.Length; i++) //{ // var value = fvertices[i]; // new IHTMLPre { "enter createQuadVBO " + new { i, value } }.AttachToDocument(); //} // new Buffer? var vbo = new WebGLBuffer(gl); //var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); var vertices = new Float32Array(fvertices); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); return vbo; }
public void perspective(float p, float p_2, float p_3, float p_4, Float32Array pMatrix) { throw new NotImplementedException(); }
internal void set(Float32Array mvMatrix, Float32Array copy) { throw new NotImplementedException(); }
public void scale(Float32Array mvMatrix, float[] p) { throw new NotImplementedException(); }
public void identity(Float32Array mvMatrix) { throw new NotImplementedException(); }
// https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201511/20151111/udp // subst b: s:\jsc.svn\examples\javascript\chrome\apps\ChromeUDPFloats\ChromeUDPFloats\bin\Debug\staging\ChromeUDPFloats.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) { // 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 IHTMLButton { "update pending... update available. click to reload.." }.AttachToDocument().onclick += delegate { // can we get an udp signal from the compiler when the app is out of date, when the update is pending? chrome.runtime.reload(); }; Action<chrome.NetworkInterface> listen = async nic => { var status = new IHTMLPre { new { nic.address } }.AttachToDocument(); var buffer = new IHTMLPre { }.AttachToDocument(); // Z:\jsc.svn\examples\javascript\chrome\hybrid\HybridHopToUDPChromeApp\Application.cs var uu = new UdpClient(40014); //args.mouse = "awaiting vertexTransform at " + nic + " :40014"; // z:\jsc.svn\examples\java\android\forms\FormsUDPJoinGroup\FormsUDPJoinGroup\ApplicationControl.cs // X:\jsc.svn\examples\java\android\LANBroadcastListener\LANBroadcastListener\ApplicationActivity.cs //uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3"), nic); uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3")); while (true) { var x = await uu.ReceiveAsync(); // did we jump to ui thread? //Console.WriteLine("ReceiveAsync done " + Encoding.UTF8.GetString(x.Buffer)); //args.vertexTransform = x.Buffer; buffer.innerText = new { x.Buffer.Length }.ToString(); // cam we get also some floats? // https://www.khronos.org/registry/typedarray/specs/latest/ float[] f = new Float32Array(new Uint8ClampedArray(x.Buffer).buffer); if (f.Length >= 16) for (int i = 0; i < 16; i++) { var fi = f[i]; new IHTMLDiv { new { i, fi } }.AttachTo(buffer); } //new Float32Array() } }; new { }.With( async delegate { // 2012 wont like nested async methods.. var n = await chrome.socket.getNetworkList(); // Z:\jsc.svn\examples\javascript\chrome\hybrid\HybridHopToUDPChromeApp\Application.cs //var n24 = n.Where(x => x.prefixLength == 24).ToArray(); foreach (var x in n) { if (x.prefixLength == 24) listen(x); } } ); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // x:\jsc.svn\examples\javascript\chrome\apps\chromeudpsendasync\chromeudpsendasync\application.cs // reload on idle? // edit and continue over udp? // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150306/udp #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.setAlwaysOnTop(true); xappwindow.show(); await xappwindow.contentWindow.async.onload; Console.WriteLine("chrome.app.window loaded!"); }; return; } } #endregion // X:\jsc.svn\examples\javascript\chrome\apps\ChromeNetworkInterfaces\ChromeNetworkInterfaces\Application.cs //{{ Length = 4 }} //{{ prefixLength = 64, name = {D7020941-742E-4570-93B2-C0372D3D870F}, address = fe80::88c0:f0a:9ccf:cba0 }} //{{ prefixLength = 24, name = {D7020941-742E-4570-93B2-C0372D3D870F}, address = 192.168.43.28 }} //{{ prefixLength = 64, name = {A8657A4E-8BFA-41CC-87BE-6847E33E1A81}, address = 2001:0:9d38:6abd:20a6:2815:3f57:d4e3 }} //{{ prefixLength = 64, name = {A8657A4E-8BFA-41CC-87BE-6847E33E1A81}, address = fe80::20a6:2815:3f57:d4e3 }} var c = new CanvasRenderingContext2D(800, 400); c.canvas.style.border = "1px solid blue"; c.canvas.AttachToDocument(); c.canvas.style.SetLocation(0, 0); Native.document.body.style.marginTop = "400px"; new IHTMLButton { "clear" }.AttachToDocument().onclick += delegate { c.clearRect(0, 0, 800, 400); }; Action begin = delegate { c.beginPath(); c.moveTo(0, 0); }; // ok his app needs to run as a chrome app. new { }.With( async delegate { (Native.document.body.style as dynamic).webkitUserSelect = "auto"; Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto; new IHTMLButton { "update pending... update available. click to reload.." }.AttachToDocument().onclick += delegate { // can we get an udp signal from the compiler when the app is out of date, when the update is pending? chrome.runtime.reload(); }; var n = await chrome.socket.getNetworkList(); // Z:\jsc.svn\examples\javascript\chrome\hybrid\HybridHopToUDPChromeApp\Application.cs var n24 = n.Where(x => x.prefixLength == 24).ToArray(); n24.WithEach( async nic => { // wifi? lan? var status = new IHTMLPre { new { nic.name, nic.address } }.AttachToDocument(); var buffer = new IHTMLPre { }.AttachToDocument(); // Z:\jsc.svn\examples\javascript\chrome\hybrid\HybridHopToUDPChromeApp\Application.cs //var uu = new UdpClient(40014); var uu = new UdpClient(40094); //args.mouse = "awaiting vertexTransform at " + nic + " :40014"; // X:\jsc.svn\examples\java\android\forms\FormsUDPJoinGroup\FormsUDPJoinGroup\ApplicationControl.cs // X:\jsc.svn\examples\java\android\LANBroadcastListener\LANBroadcastListener\ApplicationActivity.cs //uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3"), nic); uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3")); while (true) { var ux = await uu.ReceiveAsync(); // did we jump to ui thread? //Console.WriteLine("ReceiveAsync done " + Encoding.UTF8.GetString(x.Buffer)); //args.vertexTransform = x.Buffer; buffer.innerText = new { ux.Buffer.Length }.ToString(); // cam we get also some floats? // https://www.khronos.org/registry/typedarray/specs/latest/ float[] f = new Float32Array(new Uint8ClampedArray(ux.Buffer).buffer); // pen x, y, pressure if (f.Length >= 3) { for (int i = 0; i < 3; i++) { var fi = f[i]; new IHTMLDiv { new { i, fi } }.AttachTo(buffer); } var x = f[0]; var y = f[1]; var pressure = f[2]; begin(); c.lineWidth = 1 + (pressure / 255.0 * 7); if (pressure > 0) c.strokeStyle = "blue"; else c.strokeStyle = "rgba(0,0,255,0.25)"; c.lineTo((int)(x * 0.1), 400 - (int)(y * 0.1)); //c.lineTo(e.OffsetX, e.OffsetY); //c.lineTo(e.movementX, e.movementY); c.stroke(); begin = delegate { c.beginPath(); c.moveTo((int)(x * 0.1), 400 - (int)(y * 0.1)); }; } //new Float32Array() } } ); } ); }
public void draw(f tilt, f spin, bool twinkle, Action mvPushMatrix, Action mvPopMatrix, Float32Array mvMatrix, Action drawStar, WebGLUniformLocation shaderProgram_colorUniform, WebGLRenderingContext gl) { #region degToRad Func<float, float> degToRad = (degrees) => { return degrees * (f)Math.PI / 180f; }; #endregion mvPushMatrix(); // Move to the star's position glMatrix.mat4.rotate(mvMatrix, degToRad(this.angle), new f[] { 0.0f, 1.0f, 0.0f }); glMatrix.mat4.translate(mvMatrix, new f[] { this.dist, 0.0f, 0.0f }); // Rotate back so that the star is facing the viewer glMatrix.mat4.rotate(mvMatrix, degToRad(-this.angle), new f[] { 0.0f, 1.0f, 0.0f }); glMatrix.mat4.rotate(mvMatrix, degToRad(-tilt), new f[] { 1.0f, 0.0f, 0.0f }); //if (twinkle) { // // Draw a non-rotating star in the alternate "twinkling" color // gl.uniform3f(shaderProgram_colorUniform, this.twinkleR, this.twinkleG, this.twinkleB); // drawStar(); //} // All stars spin around the Z axis at the same rate glMatrix.mat4.rotate(mvMatrix, degToRad(spin), new f[] { 0.0f, 0.0f, 1.0f }); // Draw the star in its main color gl.uniform3f(shaderProgram_colorUniform, this.r, this.g, this.b); drawStar(); mvPopMatrix(); }
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150719/chromeudpwindwheel /// <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) { #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"); // 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 // X:\jsc.svn\examples\javascript\WorkerMD5Experiment\WorkerMD5Experiment\Application.cs // "C:\Users\Arvo\AppData\Local\Google\Chrome SxS\Application\chrome.exe - es3.lnk" var size = 600; 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; // can AssetLibrary create a special type // and define the variables // for it we need to parse glsl? // if we dont parse the code yet, // do we parse the macros and fields neogh already to do that? // Geometry var shaderProgram = gl.createProgram( new WebGLWindWheel.Shaders.GeometryVertexShader(), new WebGLWindWheel.Shaders.GeometryFragmentShader() ); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram); var shaderProgram_vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray((uint)shaderProgram_vertexPositionAttribute); // new in lesson 02 var shaderProgram_vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); gl.enableVertexAttribArray((uint)shaderProgram_vertexColorAttribute); var shaderProgram_pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); var shaderProgram_mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); // https://hacks.mozilla.org/2014/10/introducing-simd-js/ // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix/mat4.js // http://www.i-programmer.info/news/167-javascript/8578-chrome-to-support-simdjs.html // https://code.google.com/p/v8/issues/detail?id=2228 //var SIMD_mat4 = new System.Numerics.Matrix4x4(); //var SIMD_mat4s = new Stack<System.Numerics.Matrix4x4>(); // can we convert this code to NDK friendly non GC library? // for gearVR 90FOV and cardboard wearality 150FOV #region __mat4 var __mat4 = new { // X:\jsc.svn\examples\javascript\Test\TestFloatArray\TestFloatArray\Application.cs // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/20150706/20150708 // generic in the sens of caller choosing is the return type a new struct or out ref? perspective = new Func<float[], float, float, float, float, float[]>( (that, fovy, aspect, near, far) => { var f = 1.0f / (float)Math.Tan(fovy / 2f); var nf = 1f / (near - far); that[0] = f / aspect; that[1] = 0; that[2] = 0; that[3] = 0; that[4] = 0; that[5] = f; that[6] = 0; that[7] = 0; that[8] = 0; that[9] = 0; that[10] = (far + near) * nf; that[11] = -1; that[12] = 0; that[13] = 0; that[14] = (2 * far * near) * nf; that[15] = 0; return that; }), // reset content of mat4 identity = new Func<float[], float[]>( that => { //Array.Copy() //var xx =&that; var xx = new float[] { 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, }; //is this the best way to update array contents? xx.CopyTo(that, 0); return xx; } ), create = new Func<float[]>( () => //new mat4() new float[] { 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, } ), #region not used? clone = new Func<float[], float[]>( smat4 => //new mat4() new float[] { smat4[0], smat4[1], smat4[2], smat4[3], smat4[4], smat4[5], smat4[6], smat4[7], smat4[8], smat4[9], smat4[10], smat4[11], smat4[12], smat4[13], smat4[14], smat4[15], } ) #endregion , // X:\jsc.svn\examples\java\android\vr\OVRWindWheelNDK\OVRWindWheelNDK\References\VrApi.ovrMatrix4f.cs translate = new Func<float[], float[], float[], float[]>( (float[] that, float[] output, float[] xyz) => { float xx = xyz[0], y = xyz[1], z = xyz[2]; if (output == that) { that[12] = output[0] * xx + output[4] * y + output[8] * z + output[12]; that[13] = output[1] * xx + output[5] * y + output[9] * z + output[13]; that[14] = output[2] * xx + output[6] * y + output[10] * z + output[14]; that[15] = output[3] * xx + output[7] * y + output[11] * z + output[15]; return that; } float a00, a01, a02, a03, a10, a11, a12, a13, a20, a21, a22, a23; a00 = output[0]; a01 = output[1]; a02 = output[2]; a03 = output[3]; a10 = output[4]; a11 = output[5]; a12 = output[6]; a13 = output[7]; a20 = output[8]; a21 = output[9]; a22 = output[10]; a23 = output[11]; that[0] = a00; that[1] = a01; that[2] = a02; that[3] = a03; that[4] = a10; that[5] = a11; that[6] = a12; that[7] = a13; that[8] = a20; that[9] = a21; that[10] = a22; that[11] = a23; that[12] = a00 * xx + a10 * y + a20 * z + output[12]; that[13] = a01 * xx + a11 * y + a21 * z + output[13]; that[14] = a02 * xx + a12 * y + a22 * z + output[14]; that[15] = a03 * xx + a13 * y + a23 * z + output[15]; return that; } ), rotate = new Func<float[], float[], float, float[], float[]>( (that, a, rad, axis) => { float x = axis[0], y = axis[1], z = axis[2]; float len = (float)Math.Sqrt(x * x + y * y + z * z), s, c, t, a00, a01, a02, a03, a10, a11, a12, a13, a20, a21, a22, a23, b00, b01, b02, b10, b11, b12, b20, b21, b22; if (Math.Abs(len) < float.Epsilon) return that; len = 1f / len; x *= len; y *= len; z *= len; s = (float)Math.Sin(rad); c = (float)Math.Cos(rad); t = 1 - c; a00 = a[0]; a01 = a[1]; a02 = a[2]; a03 = a[3]; a10 = a[4]; a11 = a[5]; a12 = a[6]; a13 = a[7]; a20 = a[8]; a21 = a[9]; a22 = a[10]; a23 = a[11]; // Construct the elements of the rotation matrix b00 = x * x * t + c; b01 = y * x * t + z * s; b02 = z * x * t - y * s; b10 = x * y * t - z * s; b11 = y * y * t + c; b12 = z * y * t + x * s; b20 = x * z * t + y * s; b21 = y * z * t - x * s; b22 = z * z * t + c; // Perform rotation-specific matrix multiplication that[0] = a00 * b00 + a10 * b01 + a20 * b02; that[1] = a01 * b00 + a11 * b01 + a21 * b02; that[2] = a02 * b00 + a12 * b01 + a22 * b02; that[3] = a03 * b00 + a13 * b01 + a23 * b02; that[4] = a00 * b10 + a10 * b11 + a20 * b12; that[5] = a01 * b10 + a11 * b11 + a21 * b12; that[6] = a02 * b10 + a12 * b11 + a22 * b12; that[7] = a03 * b10 + a13 * b11 + a23 * b12; that[8] = a00 * b20 + a10 * b21 + a20 * b22; that[9] = a01 * b20 + a11 * b21 + a21 * b22; that[10] = a02 * b20 + a12 * b21 + a22 * b22; that[11] = a03 * b20 + a13 * b21 + a23 * b22; if (a != that) { // If the source and destination differ, copy the unchanged last row that[12] = a[12]; that[13] = a[13]; that[14] = a[14]; that[15] = a[15]; } return that; } ) }; #endregion // set to identity var mvMatrix = __mat4.create(); var mvMatrixStack = new Stack<float[]>(); // set to perspective var pMatrix = __mat4.create(); #region new in lesson 03 // how would this translate to non GC, NDK? Action mvPushMatrix = delegate { var copy = __mat4.create(); mvMatrix.CopyTo(copy, 0); //glMatrix.mat4.set(mvMatrix, copy); mvMatrixStack.Push(copy); }; Action mvPopMatrix = delegate { mvMatrix = mvMatrixStack.Pop(); }; #endregion #region setMatrixUniforms Action setMatrixUniforms = delegate { gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix); gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix); }; #endregion #region init buffers #region cube var cubeVertexPositionBuffer = new WebGLBuffer(gl); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); //var cubesize = 1.0f * 0.05f; //var cubesize = 1.0f * 0.1f; var cubesize = 16 / 128f; //var cubesize = 1.0f; var vertices = new[]{ // Front face -cubesize, -cubesize, cubesize, cubesize, -cubesize, cubesize, cubesize, cubesize, cubesize, -cubesize, cubesize, cubesize, // Back face -cubesize, -cubesize, -cubesize, -cubesize, cubesize, -cubesize, cubesize, cubesize, -cubesize, cubesize, -cubesize, -cubesize, // Top face -cubesize, cubesize, -cubesize, -cubesize, cubesize, cubesize, cubesize, cubesize, cubesize, cubesize, cubesize, -cubesize, // Bottom face -cubesize, -cubesize, -cubesize, cubesize, -cubesize, -cubesize, cubesize, -cubesize, cubesize, -cubesize, -cubesize, cubesize, // Right face cubesize, -cubesize, -cubesize, cubesize, cubesize, -cubesize, cubesize, cubesize, cubesize, cubesize, -cubesize, cubesize, // Left face -cubesize, -cubesize, -cubesize, -cubesize, -cubesize, cubesize, -cubesize, cubesize, cubesize, -cubesize, cubesize, -cubesize }; gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var cubeVertexPositionBuffer_itemSize = 3; var cubeVertexPositionBuffer_numItems = 6 * 6; var squareVertexColorBuffer = new WebGLBuffer(gl); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); // 216, 191, 18 var colors = new[]{ 1.0f, 0.6f, 0.0f, 1.0f, // Front face 1.0f, 0.6f, 0.0f, 1.0f, // Front face 1.0f, 0.6f, 0.0f, 1.0f, // Front face 1.0f, 0.6f, 0.0f, 1.0f, // Front face 0.8f, 0.4f, 0.0f, 1.0f, // Back face 0.8f, 0.4f, 0.0f, 1.0f, // Back face 0.8f, 0.4f, 0.0f, 1.0f, // Back face 0.8f, 0.4f, 0.0f, 1.0f, // Back face 0.9f, 0.5f, 0.0f, 1.0f, // Top face 0.9f, 0.5f, 0.0f, 1.0f, // Top face 0.9f, 0.5f, 0.0f, 1.0f, // Top face 0.9f, 0.5f, 0.0f, 1.0f, // Top face 1.0f, 0.5f, 0.0f, 1.0f, // Bottom face 1.0f, 0.5f, 0.0f, 1.0f, // Bottom face 1.0f, 0.5f, 0.0f, 1.0f, // Bottom face 1.0f, 0.5f, 0.0f, 1.0f, // Bottom face 1.0f, 0.8f, 0.0f, 1.0f, // Right face 1.0f, 0.8f, 0.0f, 1.0f, // Right face 1.0f, 0.8f, 0.0f, 1.0f, // Right face 1.0f, 0.8f, 0.0f, 1.0f, // Right face 1.0f, 0.8f, 0.0f, 1.0f, // Left face 1.0f, 0.8f, 0.0f, 1.0f, // Left face 1.0f, 0.8f, 0.0f, 1.0f, // Left face 1.0f, 0.8f, 0.0f, 1.0f // Left face }; gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); var cubeVertexColorBuffer_itemSize = 4; var cubeVertexColorBuffer_numItems = 24; // ELEMENT_ARRAY_BUFFER : WebGLBuffer? // drawElements var cubeVertexIndexBuffer = new WebGLBuffer(gl); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); //var cubeVertexIndices = new UInt16[]{ var cubeVertexIndices = new byte[]{ 0, 1, 2, 0, 2, 3, // Front face 4, 5, 6, 4, 6, 7, // Back face 8, 9, 10, 8, 10, 11, // Top face 12, 13, 14, 12, 14, 15, // Bottom face 16, 17, 18, 16, 18, 19, // Right face 20, 21, 22, 20, 22, 23 // Left face }; // ushort[]? //gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndices, gl.STATIC_DRAW); var cubeVertexIndexBuffer_itemSize = 1; var cubeVertexIndexBuffer_numItems = 36; #endregion #endregion gl.clearColor(0.0f, 0.0f, 0.0f, alpha: 1.0f); gl.enable(gl.DEPTH_TEST); var rWindDelta = 0.1f; var rCubeDelta = 1.0f; var rCube = 0f; var rWind = 0f; var lastTime = 0L; Action animate = delegate { var timeNow = new IDate().getTime(); if (lastTime != 0) { var elapsed = timeNow - lastTime; rCube -= ((75 * elapsed) / 1000.0f) * rCubeDelta; rWind -= ((75 * elapsed) / 1000.0f) * rWindDelta; } lastTime = timeNow; }; #region degToRad Func<float, float> degToRad = (degrees) => { return degrees * (float)Math.PI / 180f; }; #endregion #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 #region ui to vr var keys_ad = 0; var keys_ws = 0; var keys_c = 0; var mousebutton = 0; var mousewheel = 0; var mx = 0; var my = 0; #endregion canvas.tabIndex = 1; #region onkeydown canvas.onkeydown += async e => { var A = e.KeyCode == 65; var D = e.KeyCode == 68; if (A || D) { keys_ad = e.KeyCode; //Native.document.title = new { e.CursorX, e.CursorY }.ToString(); //wasd.innerText = new { e.KeyCode, ad = keys_ad, ws = keys_ws }.ToString(); while ((await canvas.async.onkeyup).KeyCode != e.KeyCode) ; //var ee = await div.async.onkeyup; keys_ad = 0; //wasd.innerText = new { e.KeyCode, ad = keys_ad, ws = keys_ws }.ToString(); return; } // CS // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150704 if (e.KeyCode == 67) { keys_c = e.KeyCode; //Native.document.title = new { e.CursorX, e.CursorY }.ToString(); //wasd.innerText = new { e.KeyCode, keys_ad, keys_ws, keys_c }.ToString(); while ((await canvas.async.onkeyup).KeyCode != e.KeyCode) ; //var ee = await div.async.onkeyup; keys_c = 0; //wasd.innerText = new { e.KeyCode, keys_ad, keys_ws, keys_c }.ToString(); return; } { keys_ws = e.KeyCode; //Native.document.title = new { e.CursorX, e.CursorY }.ToString(); //wasd.innerText = new { e.KeyCode, ad = keys_ad, ws = keys_ws }.ToString(); while ((await canvas.async.onkeyup).KeyCode != e.KeyCode) ; //var ee = await div.async.onkeyup; keys_ws = 0; //wasd.innerText = new { e.KeyCode, ad = keys_ad, ws = keys_ws }.ToString(); } }; #endregion #region onmousemove canvas.onmousewheel += e => { // since we are a chrome app. is chrome sending us wheel delta too? mousewheel += e.WheelDirection; }; canvas.onmousemove += e => { // we could tilt the svg cursor // like we do on heat zeeker:D mx += e.movementX; my += e.movementY; //Native.document.title = new { e.CursorX, e.CursorY }.ToString(); //xy.innerText = new { x, y }.ToString(); }; canvas.onmousedown += async e => { // wont work for RemoteApp users tho mousebutton = (int)e.MouseButton; // await ? canvas.requestPointerLock(); //e.CaptureMouse(); var ee = await canvas.async.onmouseup; //var ee = await div.async.ondblclick; if (ee.MouseButton == IEvent.MouseButtonEnum.Right) Native.document.exitPointerLock(); mousebutton = 0; }; #endregion var vertexTransform = new float[0]; new { }.With( async delegate { var n = await chrome.socket.getNetworkList(); var n24 = n.Where(nn => nn.prefixLength == 24).ToArray(); n24.WithEach( async nic => { var port = new Random().Next(16000, 40000); var socket = new UdpClient(); socket.Client.Bind( //new IPEndPoint(IPAddress.Any, port: 40000) new IPEndPoint(IPAddress.Parse(nic.address), port) ); // this will eat too much memory? //div.ownerDocument.defaultView.onframe += canvas.onframe += delegate { // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150704 var nmessage = mx + ":" + my + ":" + keys_ad + ":" + keys_ws + ":" + keys_c + ":" + mousebutton + ":" + mousewheel; var data = Encoding.UTF8.GetBytes(nmessage); //creates a variable b of type byte //new IHTMLPre { "about to send... " + new { data.Length } }.AttachToDocument(); // X:\jsc.svn\examples\javascript\chrome\apps\ChromeUDPNotification\ChromeUDPNotification\Application.cs socket.Send( data, data.Length, hostname: "239.1.2.3", port: 41814 ); }; var uu = new UdpClient(40014); uu.JoinMulticastGroup(IPAddress.Parse("239.1.2.3")); while (true) { var xx = await uu.ReceiveAsync(); // did we jump to ui thread? // https://www.khronos.org/registry/typedarray/specs/latest/ vertexTransform = new Float32Array(new Uint8ClampedArray(xx.Buffer).buffer); } } ); } ); var sw = Stopwatch.StartNew(); Native.window.onframe += e => { gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); #region pMatrix __mat4.perspective( pMatrix, 90f, (float)gl_viewportWidth / (float)gl_viewportHeight, 0.1f, 100.0f ); //__mat4.rotate(pMatrix, pMatrix, (float)Math.PI + mx * 0.005f, new float[] { 0, 1f, 0f }); __mat4.rotate(pMatrix, pMatrix, mx * 0.005f, new float[] { 0, 1f, 0f }); #endregion //var cubesize = 1.0f * 0.05f; if (vertexTransform.Length == 0) { __mat4.identity(mvMatrix); __mat4.translate(mvMatrix, mvMatrix, new float[] { -1.5f, 0.0f, -3.0f }); #region windwheel mvPushMatrix(); __mat4.rotate(mvMatrix, mvMatrix, degToRad(rWind), new float[] { 0, 1f, 0f }); #region DrawFrameworkWingAtX Action<float, float> DrawFrameworkWingAtX = (WingX, WingY) => { mvPushMatrix(); __mat4.translate(mvMatrix, mvMatrix, new float[] { cubesize * WingX, cubesize * WingY, 0 }); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexPositionAttribute, cubeVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, cubeVertexPositionBuffer_numItems, gl.UNSIGNED_BYTE, 0); mvPopMatrix(); }; #endregion #region DrawWingAtX Action<int, int, float, float> DrawWingAtX = (WingX, WingSize, WingRotationMultiplier, WingRotationOffset) => { mvPushMatrix(); __mat4.translate(mvMatrix, mvMatrix, new float[] { cubesize * WingX, 0, 0 }); if (WingRotationOffset == 0) { DrawFrameworkWingAtX(0, 0); } #region DrawWingPart Action<float> DrawWingPart = PartIndex => { mvPushMatrix(); __mat4.rotate(mvMatrix, mvMatrix, degToRad(WingRotationOffset + (rCube * WingRotationMultiplier)), new float[] { 1f, 0f, 0f }); __mat4.translate(mvMatrix, mvMatrix, new float[] { 0f, cubesize * PartIndex * 2, 0 }); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexPositionAttribute, cubeVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, cubeVertexPositionBuffer_numItems, gl.UNSIGNED_BYTE, 0); mvPopMatrix(); }; #endregion #region DrawWingWithSize Action<int> DrawWingWithSize = length => { for (int i = 4; i < length; i++) { DrawWingPart(i * 1.0f); DrawWingPart(-i * 1.0f); } }; #endregion DrawWingWithSize(WingSize); mvPopMatrix(); }; #endregion var x = 8; DrawFrameworkWingAtX(x - 8, 0); for (int i = 0; i < 24; i++) { DrawFrameworkWingAtX(x - 8, -2.0f * i); } DrawWingAtX(x - 6, 0, 1f, 0); DrawWingAtX(x - 4, 0, 1f, 0); DrawWingAtX(x - 2, 0, 1f, 0); DrawWingAtX(x + 0, 16, 1f, 0); DrawWingAtX(x + 0, 16, 1f, 30); DrawWingAtX(x + 0, 16, 1f, 60); DrawWingAtX(x + 0, 16, 1f, 90); DrawWingAtX(x + 0, 16, 1f, 120); DrawWingAtX(x + 0, 16, 1f, 150); DrawWingAtX(x + 2, 0, 1f, 0); DrawWingAtX(x + 4, 0, 1f, 0); DrawWingAtX(x + 6, 0, 1f, 0); DrawWingAtX(x + 8, 12, 0.4f, 0); DrawWingAtX(x + 8, 12, 0.4f, 60); DrawWingAtX(x + 8, 12, 0.4f, 120); DrawWingAtX(x + 8 + 2, 0, 1f, 0); DrawWingAtX(x + 8 + 4, 0, 1f, 0); DrawWingAtX(x + 8 + 6, 0, 1f, 0); DrawWingAtX(x + 16, 8, 0.3f, 0); DrawWingAtX(x + 16, 8, 0.3f, 90); mvPopMatrix(); #endregion } #region draw cube on the right to remind where we started //glMatrix.mat4.translate(mvMatrix, new float[] { 3.0f, 2.0f, 0.0f }); // how do we scale it? //mvMatrix = __mat4.create(); //mvMatrix = new float[] //{ // 1, 0, 0, 0, // 0, 1, 0, 0, // 0, 0, 1, 0, // 0, 0, 0, 1, //}; //f = new Float32Array( [1, 0, 0, 1.5, 0, 1, 0, 2, 0, 0, 1, -3, 0, 0, 0, 1]); //a[0].__mat4.identity.WRMABg6gjTWKCO_aNXgMMAA(a[0].mvMatrix); //a[0].__mat4.translate.YRMABiCCKT_aaNWnR3f4qdg(a[0].mvMatrix, a[0].mvMatrix, new Float32Array( [1.5, 2, -3])); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexPositionAttribute, cubeVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); gl.uniformMatrix4fv(shaderProgram_pMatrixUniform, false, pMatrix); // https://www.physicsforums.com/threads/what-is-the-purpose-of-the-transpose.261849/ var mvMatrix0transpose = new float[] { 9, 0, 0,0, 0, 4, 0, 0, 0, 0, 4, 0, 1.5f, 2.0f, -9.0f, 1, }; // X:\jsc.svn\examples\javascript\chrome\apps\ChromeUDPFloats\ChromeUDPFloats\Application.cs var ElementCount = vertexTransform.Length / (64 / 4); for (int ElementIndex = 0; ElementIndex < ElementCount; ElementIndex++) { var mvMatrix0 = new float[16]; for (int j = 0; j < 16; j++) { var ff = vertexTransform[j + ElementIndex * 64 / 4]; //Console.WriteLine(new { j, ff }); mvMatrix0[j] = ff; } mvMatrix0transpose = new[] { mvMatrix0[0], mvMatrix0[4], mvMatrix0[8],mvMatrix0[12], mvMatrix0[1],mvMatrix0[5],mvMatrix0[9],mvMatrix0[13], mvMatrix0[2],mvMatrix0[6],mvMatrix0[10],mvMatrix0[14], mvMatrix0[3],mvMatrix0[7],mvMatrix0[11],mvMatrix0[15] }; gl.uniformMatrix4fv(shaderProgram_mvMatrixUniform, false, mvMatrix0transpose); gl.drawElements(gl.TRIANGLES, cubeVertexPositionBuffer_numItems, gl.UNSIGNED_BYTE, 0); } #endregion animate(); }; }
/// <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 }