static bar initObject(WebGLRenderingContext gl, Action callback) { var data = new data { vertices = new float[] { }, indices = new ushort[] { }, uvs = new float[] { } }; createRectangle(2, data); var @object = new bar(); @object.vertex_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, @object.vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(data.vertices), gl.STATIC_DRAW); @object.index_buffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, @object.index_buffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(data.indices), gl.STATIC_DRAW); @object.texturecoord_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, @object.texturecoord_buffer); gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(data.uvs), gl.STATIC_DRAW); @object.n_elements = data.indices.Length; @object.t["texture1"] = loadTexture(gl, new texture1().src, callback); @object.t["texture2"] = loadTexture(gl, new texture2().src, callback); @object.t["texture3"] = loadTexture(gl, new texture3().src, callback); @object.t["texture4"] = loadTexture(gl, new texture4().src, callback); @object.t["texture5"] = loadTexture(gl, new texture5().src, callback); @object.t["texture6"] = loadTexture(gl, new texture6().src, callback); return(@object); }
public texReader(WebGLRenderingContext webgl, WebGLTexture texRGBA, int width, int height, bool gray = true) { this.gray = gray; this.width = width; this.height = height; var fbo = webgl.CreateFramebuffer(); WebGLFramebuffer fbold = webgl.GetParameter(webgl.FRAMEBUFFER_BINDING) as WebGLFramebuffer; webgl.BindFramebuffer(webgl.FRAMEBUFFER, fbo); webgl.FramebufferTexture2D(webgl.FRAMEBUFFER, webgl.COLOR_ATTACHMENT0, webgl.TEXTURE_2D, texRGBA, 0); var readData = new Uint8Array(this.width * this.height * 4); readData[0] = 2; webgl.ReadPixels(0, 0, this.width, this.height, webgl.RGBA, webgl.UNSIGNED_BYTE, readData); webgl.DeleteFramebuffer(fbo); webgl.BindFramebuffer(webgl.FRAMEBUFFER, fbold); if (gray) { this.data = new Uint8Array(this.width * this.height); for (var i = 0; i < width * height; i++) { this.data[i] = readData[i * 4]; } } else { this.data = readData; } }
static void Start(WebGLRenderingContext gl, TextureLoader textureLoader, ProgramManager programManager, Level level) { Action tick = () => Tick(gl, textureLoader, programManager, level); tick(); Global.SetInterval(tick, 200); }
static WebGLTexture loadTexture(WebGLRenderingContext gl, string url, Action callback) { //gl.enable(gl.TEXTURE_2D); var texture = gl.createTexture(); var image = new IHTMLImage(); Console.WriteLine("loading: " + url); image.src = url; image.InvokeOnComplete( delegate { Console.WriteLine("loaded: " + url); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR); gl.bindTexture(gl.TEXTURE_2D, null); callback(); } ); return(texture); }
public static void Init() { var div = Document.CreateElement <HTMLDivElement>("div"); div.Style.Width = "100%"; div.Style.Height = "100%"; div.Style.Position = "absolute"; div.Style.Overflow = "hidden"; var canvas = Document.CreateElement <HTMLCanvasElement>("canvas"); canvas.Style.Width = "100%"; canvas.Style.Height = "80%"; div.AppendChild(canvas); Document.Body.AppendChild(div); // Write a message to the Console Bridge.Html5.Console.Info("Welcome to Bridge.NET 2018"); //var canvas = Bridge.Html5.Document.GetElementById("renderCanvas") as HTMLCanvasElement; webgl = (WebGLRenderingContext)canvas.GetContext("webgl"); if (webgl == null) { webgl = (WebGLRenderingContext)canvas.GetContext("experimental-webgl"); } LoadRes(webgl); lighttool.Native.canvasAdapter.CreateScreenCanvas(webgl, new MyCanvasAction()); }
public static WebGLRenderingContext Create3DContext(HTMLCanvasElement canvas) { string[] names = new string[] { "webgl", "experimental-webgl", "webkit-3d", "moz-webgl" }; WebGLRenderingContext context = null; foreach (string name in names) { try { context = canvas.GetContext(name).As <WebGLRenderingContext>(); } catch { } if (context != null) { break; } } return(context); }
public spriteTexture(WebGLRenderingContext webgl, string url = null, textureformat format = textureformat.RGBA, bool mipmap = false, bool linear = true) { this.webgl = webgl; this.format = format; this.mat = new spriteMat();//ness this.mat.tex0 = this; this.mat.transparent = true; this.mat.shader = "spritedefault"; if (url == null)//不给定url 则 texture 不加载 { return; } this.texture = webgl.CreateTexture(); this.img = new Bridge.Html5.HTMLImageElement();// Image();// HTMLImageElement(); //ness this.img.Src = url; this.img.OnLoad = (e) => { if (this.disposeit) { this.img = null; return; } this._loadimg(mipmap, linear); }; }
static WebGLDebugShaders InternalConstructor(WebGLRenderingContext gl) { // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs var p = (WebGLDebugShaders)gl.getExtension("WEBGL_debug_shaders"); return p; }
static WebGLShader InternalConstructor(WebGLRenderingContext gl, uint type = WebGLRenderingContext.VERTEX_SHADER) { // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs var p = gl.createShader(type); return p; }
internal override void Init() { GL = Platform.WebGLContext; if (GL == null) { throw new CKGLException("Couldn't create WebGL 1.0 context"); } // Debug Output.WriteLine($"GraphicsBackend - WebGL 1.0 Initialized"); var attributes = GL.getContextAttributes(); Output.WriteLine($"WebGL Context - Attributes: alpha[{attributes.alpha}] premultipliedAlpha[{attributes.premultipliedAlpha}] depth[{attributes.depth}] stencil[{attributes.stencil}] antialias[{attributes.antialias}] preserveDrawingBuffer[{attributes.preserveDrawingBuffer}] failIfMajorPerformanceCaveat[{attributes.failIfMajorPerformanceCaveat}]"); Output.WriteLine($"WebGL Context - GLSL Version: {GL.getParameter(GL.SHADING_LANGUAGE_VERSION)}"); Output.WriteLine($"WebGL Context - VERSION: {GL.getParameter(GL.VERSION)}"); Output.WriteLine($"WebGL Context - VENDOR: {GL.getParameter(GL.VENDOR)}"); Output.WriteLine($"WebGL Context - RENDERER: {GL.getParameter(GL.RENDERER)}"); try { Output.WriteLine($"WebGL Context - WEBGL_debug_renderer_info.UNMASKED_VENDOR_WEBGL: {GL.getParameter(Extensions.WEBGL_debug_renderer_info.UNMASKED_VENDOR_WEBGL)}"); Output.WriteLine($"WebGL Context - WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL: {GL.getParameter(Extensions.WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL)}"); } catch { } Output.WriteLine($"WebGL Context - MaxColourAttachments: 1 (WebGL 1.0 restriction)"); Output.WriteLine($"WebGL Context - MaxCubeMapTextureSize: {GL.getParameter(GL.MAX_CUBE_MAP_TEXTURE_SIZE)}"); Output.WriteLine($"WebGL Context - MaxDrawBuffers: 1 (WebGL 1.0 restriction)"); Output.WriteLine($"WebGL Context - MaxElementIndices: undefined"); Output.WriteLine($"WebGL Context - MaxElementVertices: undefined"); Output.WriteLine($"WebGL Context - MaxRenderbufferSize: {GL.getParameter(GL.MAX_RENDERBUFFER_SIZE)}"); Output.WriteLine($"WebGL Context - MaxSamples: undefined"); Output.WriteLine($"WebGL Context - MaxTextureImageUnits: {GL.getParameter(GL.MAX_TEXTURE_IMAGE_UNITS)}"); Output.WriteLine($"WebGL Context - MaxTextureSize: {GL.getParameter(GL.MAX_TEXTURE_SIZE)}"); //Output.WriteLine($"WebGL - Extensions: \n{string.Join("\n", GL.GetSupportedExtensions())}"); }
public static TextureInfo Create(WebGLRenderingContext gl, string fileName) { var texture = gl.CreateTexture(); var textureInfo = new TextureInfo( texture: texture, width: Optional <int> .Missing, height: Optional <int> .Missing ); var image = new HTMLImageElement(); image.Src = fileName; image.OnLoad = (ev) => { textureInfo.Width = image.Width; textureInfo.Height = image.Height; gl.BindTexture(gl.TEXTURE_2D, textureInfo.Texture); gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); textureInfo.OnLoad?.Invoke(); }; return(textureInfo); }
public static WebGLRenderingContext GetWebGLRenderingContext(HTMLCanvasElement canvas) { var contextNames = new string[] { "webgl", "experimental-webgl", "webkit-3d", "moz-webgl" }; WebGLRenderingContext context = null; foreach (var name in contextNames) { try { context = canvas.GetContext(name).As <WebGLRenderingContext>(); } catch (Exception) { } if (context != null) { break; } } return(context); }
static WebGLBuffer InternalConstructor(WebGLRenderingContext gl) { // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs var p = gl.createBuffer(); return p; }
public void Render(WebGLRenderingContext gl, TextureLoader textureLoader, ProgramManager programManager) { var tileSize = TileType.GetTileSize(); var tilesInWidth = gl.Canvas.Width / tileSize.X + 1; var tilesInHeight = gl.Canvas.Height / tileSize.Y + 1; for (var y = 0; y < tilesInHeight; y++) { for (var x = 0; x < tilesInWidth; x++) { mapData.GetTile(x, y).Render(gl, textureLoader, programManager, (int)(x * tileSize.X), (int)(y * tileSize.Y)); } } /* * var gridLineColour = new RGBAColour(0.1f, 1f, 0.5f, 1.0f); * * for (var i = 0; i <= Math.Max(gl.Canvas.Width, gl.Canvas.Height); i += 64) * { * if (i <= gl.Canvas.Height) * WebGLHelpers.DrawLine(gl, programManager.Programs["prog-line"].Program, * gridLineColour, * 0, i, gl.Canvas.Width, i); * * if (i <= gl.Canvas.Width) * WebGLHelpers.DrawLine(gl, programManager.Programs["prog-line"].Program, * gridLineColour, * i, 0, i, gl.Canvas.Height); * } */ }
void compile(WebGLRenderingContext webgl) { foreach (var name in this.mapshader.Keys) { this.mapshader[name].compile(webgl); } }
public spriteCanvas(WebGLRenderingContext webgl, float width, float height) { this.webgl = webgl; this.width = width; this.height = height; this.spriteBatcher = new spriteBatcher(webgl, lighttool.shaderMgr.parserInstance());//ness }
public static spriteFont fromRaw(WebGLRenderingContext webgl, string txt, spriteTexture texture = null) { var sf = new spriteFont(webgl, null, texture); sf._parse(txt); return(sf); }
static void Render(WebGLRenderingContext gl, TextureLoader textureLoader, ProgramManager programManager, Level level) { gl.Viewport(0, 0, gl.DrawingBufferWidth, gl.DrawingBufferHeight); gl.ClearColor(0, 0, 0, 1); gl.Clear(gl.COLOR_BUFFER_BIT); level.Render(gl, textureLoader, programManager); }
public void onSurfaceCreated(GL10 arg0, globalandroid::javax.microedition.khronos.egl.EGLConfig arg1) { gl = new WebGLRenderingContext(); if (onsurface != null) { onsurface(gl); } }
public static spriteAtlas fromRaw(WebGLRenderingContext webgl, string txt, spriteTexture texture = null) { var sa = new spriteAtlas(webgl, null, texture); sa._parse(txt); return(sa); }
static WebGLTexture InternalConstructor(WebGLRenderingContext gl) { // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeWebGLFrameBuffer\ChromeWebGLFrameBuffer\Application.cs // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\Library\ShaderToy.cs var p = gl.createTexture(); return p; }
/// <summary> /// http://go.jsc-solutions.net/Uniforms Access GLSL uniforms via dynamic dispatch. /// </summary> public static dynamic Uniforms(this WebGLProgram program, WebGLRenderingContext gl) { return new WebGLDynamicUniforms { gl = gl, program = program }; }
// https://github.com/WaveEngine/WebGL.NET/issues/8 public void UIntArrayCastRegressionTest() { var gl = new WebGLRenderingContext(canvas); var array = new uint[1]; var result = gl.CastNativeArray(array); Assert.IsType <Uint32Array>(result); }
public void apply(WebGLRenderingContext gl) { EventHorizonBlazorInterop.Func <CachedEntity>( new object[] { new string[] { this.___guid, "apply" }, gl } ); }
public async ValueTask apply(WebGLRenderingContext gl) { await EventHorizonBlazorInterop.Func <CachedEntity>( new object[] { new string[] { this.___guid, "apply" }, gl } ); }
static public spriteTexture fromRaw(WebGLRenderingContext webgl, HTMLImageElement img, textureformat format = textureformat.RGBA, bool mipmap = false, bool linear = true) { var st = new spriteTexture(webgl, null, format, mipmap, linear); st.texture = webgl.CreateTexture(); st.img = img; st._loadimg(mipmap, linear); return(st); }
public void parseUrl(WebGLRenderingContext webgl, string url) { lighttool.loadTool.loadText(url, (txt, err) => { this._parser(txt); this.compile(webgl); //spriteBatcher } ); }
public void ContextAttributesTest() { var contextAttributes = new WebGLContextAttributes { Stencil = true }; var gl = new WebGLRenderingContext(canvas, contextAttributes); var incomingContextAttributes = gl.GetContextAttributes(); Assert.Equal(true, incomingContextAttributes.Stencil); }
void HandleLoadedTexture(HTMLImageElement image, WebGLRenderingContext gl) { gl.PixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.BindTexture(gl.TEXTURE_2D, this.WebGLTexture); gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); gl.GenerateMipmap(gl.TEXTURE_2D); gl.BindTexture(gl.TEXTURE_2D, null); }
public void compile(WebGLRenderingContext webgl) { this.vs = webgl.CreateShader(webgl.VERTEX_SHADER); this.fs = webgl.CreateShader(webgl.FRAGMENT_SHADER); //分别编译shader webgl.ShaderSource(this.vs, this.vscode); webgl.CompileShader(this.vs); var r1 = webgl.GetShaderParameter(this.vs, webgl.COMPILE_STATUS); if (r1.As <bool>() == false) { alert(webgl.GetShaderInfoLog(this.vs)); } // webgl.ShaderSource(this.fs, this.fscode); webgl.CompileShader(this.fs); var r2 = webgl.GetShaderParameter(this.fs, webgl.COMPILE_STATUS); if (r2.As <bool>() == false) { alert(webgl.GetShaderInfoLog(this.fs)); } //program link this.program = webgl.CreateProgram().As <WebGLProgram>(); webgl.AttachShader(this.program, this.vs); webgl.AttachShader(this.program, this.fs); webgl.LinkProgram(this.program); var r3 = webgl.GetProgramParameter(this.program, webgl.LINK_STATUS); if (r3.As <bool>() == false) { alert(webgl.GetProgramInfoLog(this.program)); } //绑定vbo和shader顶点格式,这部分应该要区分材质改变与参数改变,可以少切换一些状态 this.posPos = webgl.GetAttribLocation(this.program, "position"); this.posColor = webgl.GetAttribLocation(this.program, "color"); this.posColor2 = webgl.GetAttribLocation(this.program, "color2"); this.posUV = webgl.GetAttribLocation(this.program, "uv"); this.uniMatrix = webgl.GetUniformLocation(this.program, "matrix"); this.uniTex0 = webgl.GetUniformLocation(this.program, "tex0"); this.uniTex1 = webgl.GetUniformLocation(this.program, "tex1"); this.uniCol0 = webgl.GetUniformLocation(this.program, "col0"); this.uniCol1 = webgl.GetUniformLocation(this.program, "col1"); }
void initGL(HtmlElement canvas) { try { gl = new WebGLRenderingContext(canvas); viewportWidth = (float)canvas.Width(); viewportHeight = (float)canvas.Height(); } catch (Exception e) { } if (gl == null) { alert("Could not initialise WebGL, sorry :-("); } }
public static void DrawLine(WebGLRenderingContext gl, WebGLProgram program, RGBAColour colour, int x0, int y0, int x1, int y1) { gl.UseProgram(program); var positionCoords = new float[] { x0, y0, x1, y1 }; /* Add the components of the colour twice (one for each vertex). */ var colours = new float[] { colour.R, colour.G, colour.B, colour.A, colour.R, colour.G, colour.B, colour.A }; var matrixLocation = gl.GetUniformLocation(program, "u_matrix"); /* Load the colour into a buffer and bind to shader attribute. */ var colourBuffer = gl.CreateBuffer(); var colourLocation = gl.GetAttribLocation(program, "a_color"); gl.BindBuffer(gl.ARRAY_BUFFER, colourBuffer); gl.BufferData(gl.ARRAY_BUFFER, new Float32Array(colours), gl.STATIC_DRAW); gl.VertexAttribPointer(colourLocation, 4, gl.FLOAT, false, 0, 0); gl.EnableVertexAttribArray(colourLocation); /* Load the line endpoints into a buffer and bind to shader attribute. */ var vertexBuffer = gl.CreateBuffer(); var positionLocation = gl.GetAttribLocation(program, "a_position"); gl.BindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.BufferData(gl.ARRAY_BUFFER, new Float32Array(positionCoords), gl.STATIC_DRAW); gl.VertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); gl.EnableVertexAttribArray(positionLocation); /* Set up projection matrix and translate to screen origin. */ var matrix = CameraHelpers.Orthographic(0, gl.Canvas.Width, gl.Canvas.Height, 0, -1, 1); gl.UniformMatrix4fv(matrixLocation, false, matrix.ToArray()); matrix = matrix.Translate(x0 / (float)gl.Canvas.Width * 2, -y0 / (float)gl.Canvas.Height * 2, 0); gl.DrawArrays(gl.LINES, 0, 2); gl.BindBuffer(gl.ARRAY_BUFFER, null); }
public void Initialize(string canvasId) { InitSettings(this); this.canvas = GetCanvasEl(canvasId); WebGlRenderingContext = Create3DContext(this.canvas); InitShaders(); InitBuffers(); //cube.Tick(); InitSettings(this); }
public void Initialize() { InitSettings(this); this.canvas = GetCanvasEl(Game1.CanvasId); this.gl = Create3DContext(this.canvas); InitShaders(); InitBuffers(); InitTexture(); //cube.Tick(); InitSettings(this); }
WebGLShader getShader(WebGLRenderingContext gl, string str, GLuint shaderType) { var shader = gl.createShader(shaderType); gl.shaderSource(shader, str); gl.compileShader(shader); if (gl.getShaderParameter(shader, GL.COMPILE_STATUS) == null) { alert(gl.getShaderInfoLog(shader)); return(null); } return(shader); }
public WebGL15ContextImpl() : base(100, 100) { gl = null; #endif if (gl == null) throw new Exception("UnsupportedOperationException: WebGL N/A"); InitShaders(); CheckError("initShader"); _elementBuffer = gl.CreateBuffer(); CheckError("createBuffer f. elements"); for (int index = 0; index < _buffers.Length; index++) { WebGLBufferData b = new WebGLBufferData(); b.ToBind = null; b.Buffer = gl.CreateBuffer(); CheckError("createBuffer" + index); b.Stride = 0; b.Size = 0; b.Type = 0; b.ByteSize = 0; b.Normalized = false; _buffers[index] = b; } }
private void Initialize(IHTMLCanvas c, WebGLRenderingContext gl, IDefault page) { // http://cs.helsinki.fi/u/ilmarihe/metatunnel.html // http://wakaba.c3.cx/w/puls.html Action<string> alert = Native.window.alert; c.style.border = "1px solid yellow"; page.MaxTextures.innerText = "" + gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS); // https://www.khronos.org/webgl/public-mailing-list/archives/1007/msg00034.html var vs = ""; vs += "precision highp float; \n"; vs += "attribute vec3 aVertexPosition;"; vs += "attribute vec2 aTextureCoord;"; vs += "uniform mat4 uModelViewMatrix;"; vs += "uniform mat4 uProjectionMatrix;"; vs += "varying vec2 vTextureCoord;"; vs += "void main(void) {"; vs += "gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);"; vs += "vTextureCoord = vec2(aTextureCoord.x, 1.0 - aTextureCoord.y);"; vs += "}"; var fs = ""; fs += "precision highp float; \n"; fs += "varying vec2 vTextureCoord;"; fs += "uniform sampler2D uSamplerDiffuse1;"; fs += "uniform sampler2D uSamplerDiffuse2;"; fs += "uniform sampler2D uSamplerDiffuse3;"; fs += "uniform sampler2D uSamplerDiffuse4;"; fs += "uniform sampler2D uSamplerDiffuse5;"; fs += "uniform sampler2D uSamplerDiffuse6;"; fs += "void main(void) {"; fs += "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * texture2D(uSamplerDiffuse1, vTextureCoord)"; fs += "+ vec4(0.0, 1.0, 0.0, 1.0) * texture2D(uSamplerDiffuse2, vTextureCoord)"; fs += "+ vec4(0.0, 0.0, 1.0, 1.0) * texture2D(uSamplerDiffuse3, vTextureCoord)"; fs += "+ vec4(0.0, 1.0, 1.0, 1.0) * texture2D(uSamplerDiffuse4, vTextureCoord)"; fs += "+ vec4(1.0, 0.0, 1.0, 1.0) * texture2D(uSamplerDiffuse5, vTextureCoord)"; fs += "+ vec4(1.0, 1.0, 0.0, 1.0) * texture2D(uSamplerDiffuse6, vTextureCoord);"; fs += "}"; var xfs = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(xfs, fs); gl.compileShader(xfs); if ((int)gl.getShaderParameter(xfs, gl.COMPILE_STATUS) != 1) { // vs: ERROR: 0:2: '' : Version number not supported by ESSL // fs: ERROR: 0:1: '' : No precision specified for (float) var error = gl.getShaderInfoLog(xfs); Native.window.alert("fs: " + error); return; } var xvs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(xvs, vs); gl.compileShader(xvs); if ((int)gl.getShaderParameter(xvs, gl.COMPILE_STATUS) != 1) { // vs: ERROR: 0:2: '' : Version number not supported by ESSL // vs: ERROR: 0:10: '-' : wrong operand types no operation '-' exists that takes a left-hand operand of type 'const mediump int' and a right operand of type 'float' (or there is no acceptable conversion) var error = gl.getShaderInfoLog(xvs); Native.window.alert("vs: " + error); return; } var shader = new foo(); shader.program = gl.createProgram(); gl.attachShader(shader.program, xvs); gl.attachShader(shader.program, xfs); gl.linkProgram(shader.program); var linked = gl.getProgramParameter(shader.program, gl.LINK_STATUS); if (linked == null) { var error = gl.getProgramInfoLog(shader.program); Native.window.alert("Error while linking: " + error); return; } gl.useProgram(shader.program); shader.aVertexPosition = gl.getAttribLocation(shader.program, "aVertexPosition"); shader.aTextureCoord = gl.getAttribLocation(shader.program, "aTextureCoord"); gl.enableVertexAttribArray((uint)shader.aVertexPosition); gl.enableVertexAttribArray((uint)shader.aTextureCoord); shader.u["uModelViewMatrix"] = gl.getUniformLocation(shader.program, "uModelViewMatrix"); shader.u["uProjectionMatrix"] = gl.getUniformLocation(shader.program, "uProjectionMatrix"); shader.u["uSamplerDiffuse1"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse1"); shader.u["uSamplerDiffuse2"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse2"); shader.u["uSamplerDiffuse3"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse3"); shader.u["uSamplerDiffuse4"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse4"); shader.u["uSamplerDiffuse5"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse5"); shader.u["uSamplerDiffuse6"] = gl.getUniformLocation(shader.program, "uSamplerDiffuse6"); shader.MV_MATRIX = new float[] { 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f }; shader.PROJECTION_MATRIX = new float[] { 1.000f, 0.000f, 0.000f, 0.000f, 0.000f, 1.000f, 0.000f, 0.000f, 0.000f, 0.000f, 0.002f, 0.000f, 0.000f, 0.000f, 0.998f, 1.000f }; var bar = default(bar); bar = initObject( gl, delegate { if (bar == null) return; renderFrame(gl, shader, bar); c.style.border = "2px solid green"; } ); }
public WebGLBuffer(WebGLRenderingContext gl) { // InternalConstructor }
/* Source: http://www.ibiblio.org/e-notes/webgl/models/ethanol.html * http://www.worldofmolecules.com/3D/dopamine_3d.htm */ /// <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) { var prMatrix = new CanvasMatrix4(); var gl_viewportWidth = 500; var gl_viewportHeight = 500; var gl = new WebGLRenderingContext(); var canvas = gl.canvas.AttachToDocument(); #region AtResize Action AtResize = delegate { gl_viewportWidth = Native.window.Width; gl_viewportHeight = Native.window.Height; prMatrix = new CanvasMatrix4(); prMatrix.perspective(45f, (f)Native.window.aspect, 1f, 100f); canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight); canvas.width = gl_viewportWidth; canvas.height = gl_viewportHeight; }; Native.window.onresize += e => { AtResize(); }; AtResize(); #endregion Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var h = 1f; var r1 = .5f; var r2 = .2f; #region requestPointerLock var __pointer_x = 0; var __pointer_y = 0; canvas.onmousedown += delegate { canvas.requestPointerLock(); }; canvas.onmousemove += e => { if (Native.Document.pointerLockElement == canvas) { __pointer_x += e.movementX; __pointer_y += e.movementY; } }; canvas.onmouseup += delegate { //Native.Document.exitPointerLock(); }; #endregion var prog = gl.createProgram( new GeometryVertexShader(), new GeometryFragmentShader() ); gl.linkProgram(prog); gl.useProgram(prog); var uniforms = prog.Uniforms(gl); var nPhi = 100; var nTheta = 50; var dPhi = 2 * Math.PI / nPhi; var dTheta = Math.PI / nTheta; var vertices = new IArray<float>(); var ind = new IArray<ushort>(); for (var j = 0; j <= nTheta; j++) { var Theta = j * dTheta; var cosTheta = Math.Cos(Theta); var sinTheta = Math.Sin(Theta); for (var i = 0; i <= nPhi; i++) { var Phi = i * dPhi; var cosPhi = Math.Cos(Phi); var sinPhi = Math.Sin(Phi); vertices.push((f)(cosPhi * sinTheta)); vertices.push((f)(-sinPhi * sinTheta)); vertices.push((f)(cosTheta)); } } for (var j = 0; j < nTheta; j++) for (var i = 0; i <= nPhi; i++) { ind.push((ushort)(j * (nPhi + 1) + i)); ind.push((ushort)((j + 1) * (nPhi + 1) + i)); } var posLocation = gl.getAttribLocation(prog, "aPos"); gl.enableVertexAttribArray((uint)posLocation); var posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.vertexAttribPointer((uint)posLocation, 3, gl.FLOAT, false, 0, 0); var indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(ind.ToArray()), gl.STATIC_DRAW); //prMatrix.perspective(45, 1, .1, 100); gl.uniformMatrix4fv(gl.getUniformLocation(prog, "prMatrix"), false, new Float32Array(prMatrix.getAsArray())); var mvMatrix = new CanvasMatrix4(); var mvMatLoc = gl.getUniformLocation(prog, "mvMatrix"); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clearDepth(1.0f); gl.clearColor(0, 0, .8f, 1f); var xOffs = 0; var yOffs = 0; var drag = 0; var xRot = 0f; var yRot = 1f; var transl = -15.5f; #region drawScene Action drawScene = delegate { var rotMat = new CanvasMatrix4(); rotMat.makeIdentity(); #region draw Action<f, f, f, f, f, f, f> drawBall = (x, y, z, r, g, b, _scale) => { var scale = _scale * 1.4f; mvMatrix.makeIdentity(); mvMatrix.translate(x, y, z); mvMatrix.multRight(rotMat); mvMatrix.translate(0, 0, transl); gl.uniformMatrix4fv(mvMatLoc, false, new Float32Array(mvMatrix.getAsArray())); //var colorLoc = gl.getUniformLocation(prog, "color"); //var scaleLoc = gl.getUniformLocation(prog, "scale"); uniforms.color = new __vec3(r, g, b); uniforms.scale = scale; //gl.uniform1f(scaleLoc, scale); //gl.uniform3f(colorLoc, r, g, b); for (var i = 0; i < nTheta; i++) gl.drawElements(gl.TRIANGLE_STRIP, 2 * (nPhi + 1), gl.UNSIGNED_SHORT, 4 * (nPhi + 1) * i); }; Action<f, f, f, f> drawBall_white = (x, y, z, _scale) => drawBall(x, y, z, 1, 1, 1, _scale); Action<f, f, f, f> drawBall_red = (x, y, z, _scale) => drawBall(x, y, z, 1, 0, 0, _scale); Action<f, f, f, f> drawBall_blue = (x, y, z, _scale) => drawBall(x, y, z, 0, 0, 1, _scale); Action<f, f, f, f> drawBall_gray = (x, y, z, _scale) => drawBall(x, y, z, .3f, .3f, .3f, _scale); #endregion gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight); #region prMatrix gl.uniformMatrix4fv(gl.getUniformLocation(prog, "prMatrix"), false, new Float32Array(prMatrix.getAsArray())); #endregion gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); rotMat.rotate(xRot / 3, 1, 0, 0); rotMat.rotate(yRot / 3, 0, 1, 0); //yRot = 0; //xRot = 0; rotMat.rotate(__pointer_y * 1.0f, 1, 0, 0); rotMat.rotate(__pointer_x * 1.0f, 0, 1, 0); //__pointer_x = 0; //__pointer_y = 0; //http://en.wikipedia.org/wiki/Cyanogen #region C2N2 drawBall_blue(0, -3, 0, 1f); drawBall_gray(0, -1, 0, 1.2f); drawBall_gray(0, 1, 0, 1.2f); drawBall_blue(0, 3, 0, 1f); #endregion //#region C6H3 //drawBall_gray(2, -1, 0, 1.5f); //drawBall_gray(0, -2, 0, 1.5f); //drawBall_white(0, -3.5f, 0, 1f); //drawBall_gray(-2, -1, 0, 1.5f); //drawBall_gray(2, 1, 0, 1.5f); //drawBall_white(3 + 0.5f, 1.5f + 0.5f, 0, 1f); //drawBall_gray(0, 2, 0, 1.5f); //drawBall_white(0, 3.5f, 0, 1f); //drawBall_gray(-2, 1, 0, 1.5f); //#endregion //#region CH2-CH2 //drawBall_white(6, -1 + 1, -1.5f, 1f); //drawBall_gray(6, -1, 0, 1.5f); //drawBall_white(6, -1 + 1, 1.5f, 1f); //drawBall_white(4, -2 - 1, -1.5f, 1f); //drawBall_gray(4, -2, 0, 1.5f); //drawBall_white(4, -2 - 1, 1.5f, 1f); //#endregion //#region NH2 //drawBall_white(8, -2 - 1, -1.5f, 1f); //drawBall_blue(8, -2, 0, 1.5f); //drawBall_white(8, -2 - 1, 1.5f, 1f); //#endregion gl.flush(); }; #endregion #region mouse canvas.onmousedown += ev => { ev.preventDefault(); drag = 1; xOffs = ev.CursorX; yOffs = ev.CursorY; }; canvas.onmouseup += ev => { ev.preventDefault(); drag = 0; xOffs = ev.CursorX; yOffs = ev.CursorY; }; canvas.onmousemove += ev => { if (drag == 0) return; ev.preventDefault(); if (ev.shiftKey) { transl *= 1 + (ev.CursorY - yOffs) / 1000; yRot = -xOffs + ev.CursorX; } else { yRot = -xOffs + ev.CursorX; xRot = -yOffs + ev.CursorY; } xOffs = ev.CursorX; yOffs = ev.CursorY; drawScene(); }; #endregion #region onmousewheel canvas.onmousewheel += ev => { var del = 1.1f; if (ev.shiftKey) del = 1.01f; if (ev.WheelDirection > 0) transl *= del; else transl *= (1 / del); drawScene(); ev.PreventDefault(); }; #endregion #region IsDisposed var IsDisposed = false; this.Dispose = delegate { if (IsDisposed) return; IsDisposed = true; canvas.Orphanize(); }; #endregion #region requestFullscreen Native.Document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.Document.body.requestFullscreen(); }; #endregion var c = 0; Native.window.onframe += delegate { if (IsDisposed) return; c++; xRot += 0.2f; yRot += 0.3f; drawScene(); }; //new IHTMLAnchor { "drag me to my.jsc-solutions.net" }.AttachToDocument().With( // dragme => // { // dragme.style.position = IStyle.PositionEnum.@fixed; // dragme.style.left = "1em"; // dragme.style.bottom = "1em"; // dragme.AllowToDragAsApplicationPackage(); // } //); }
// could assetslibrary auto byref those projects ? // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150818 // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150809/chrome-filesystem /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { //Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto; // chrome by default has no scrollbar, bowser does Native.document.documentElement.style.overflow = IStyle.OverflowEnum.hidden; Native.body.style.margin = "0px"; Native.body.Clear(); // ipad? Native.window.onerror += e => { new IHTMLPre { "error " + new { e.error } }.AttachToDocument(); }; // https://www.youtube.com/watch?v=tnS8K0yhmZU // http://www.reddit.com/r/oculus/comments/2sv5lk/new_release_of_shadertoy_vr/ // https://www.shadertoy.com/view/lsSGRz // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2015/201503/20150309 // https://zproxy.wordpress.com/2015/03/09/project-windstorm/ // https://github.com/jimbo00000/RiftRay #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 Console.WriteLine("create WebGLRenderingContext"); var gl = new WebGLRenderingContext(alpha: true); if (gl == null) { Native.body.style.backgroundColor = "yellow"; 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 += async e => { // The GPU process hung. Terminating after 10000 ms. // GpuProcessHostUIShim: The GPU process crashed! Native.body.style.backgroundColor = "red"; Native.body.Clear(); new IHTMLPre { // https://code.google.com/p/chromium/issues/detail?id=294207 //"The GPU process crashed! (or did the graphics driver crash?)", "The GPU process crashed! (or did the display driver crash?)", //new IHTMLAnchor { href = "about:gpu", innerText = "about:gpu" } }.AttachToDocument(); // reload? //if (Native.window.confirm("oncontextlost, retry or refresh later?")) //{ // Native.body.style.backgroundColor = "yellow"; // //e. //} await new IHTMLButton { "blacklist " + new { Native.document.location.hash } + " shader, reload tab to reload gpu. (or restart browser)" }.AttachToDocument().async.onclick; Native.window.localStorage[new { Native.document.location.hash }] = "blacklisted"; // reload gpu? Native.document.location.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 = $"{References.programs.Count} shaders available" }.AttachTo(combo); new IHTMLOption { value = "", innerText = b.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; // if we are on a laptop, by clicking the button perhaps now you want to click right arrow? combo.focus(); }; } ); #endregion // do not add byref if bypackage is available! // Severity Code Description Project File Line //Error CS0433 The type 'ShaderToy' exists in both 'ChromeShaderToyColumns, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null' and 'WebGL ShaderToy, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null' ChromeShaderToyPrograms.b Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyPrograms\ChromeShaderToyPrograms.b\Application.cs 283 ShaderToy.EffectPass pip = null; // http://stackoverflow.com/questions/25289390/html-how-to-make-input-type-list-only-accept-a-list-choice //References.programs.Keys.WithEachIndex( b.programs.Keys.WithEachIndex( async (key, index) => { //var text = (1 + index) + " of " + References.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var text = (1 + index) + " of " + b.programs.Count + " " + key.SkipUntilIfAny("ChromeShaderToy").Replace("By", " by "); var blacklisted = Native.window.localStorage[new { hash = "#" + key }] == "blacklisted"; if (blacklisted) { var option0 = new IHTMLOption { value = key, innerText = "blacklisted " + text }.AttachTo(combo); return; } var option = new IHTMLOption { value = key, innerText = text }.AttachTo(combo); await Native.window.async.onframe; // um should we preselect it? did we come from a reload? did gpu crash? if (Native.document.location.hash == "#" + key) { // 0 is the header.. should it be a optionheader instead? combo.selectedIndex = 1 + index; } // we are about to create 100 objects. does it have any impact to UI? //var frag = References.programs[key](); var frag = b.programs[key](); // 0ms Error: {{ infoLog = WARNING: 0:13: '=' : global variable initializers should be constant expressions (uniforms and globals are allowed in global initializers for legacy compatibility) // can we detect errors correctly? 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; // first time select. before we try to load the shader, lets make sure we remember what causes the gpu crash // 2278ms select {{ key = InvadersByIapafoto, index = 10, hash = #InputTimeByIq }} await Native.document.location.replace("#" + key); // need two frames to see a change in hash? //await Native.window.async.onframe; //await Native.window.async.onframe; // unless from previous refresh it crashed gpu? Console.WriteLine("select " + new { key, index, Native.document.location.hash }); var load = Stopwatch.StartNew(); // defined at? // "C:\util\jsc\nuget\WebGL.ShaderToy.1.0.0.0.nupkg" var pass0 = new ShaderToy.EffectPass( gl: gl, precission: 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 { // can we change uri so a refresh would reload the same program? // perhaps its time to review historic api? Native.document.location.replace("#" + key); 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); } ); }
static WebGLTexture loadTexture(WebGLRenderingContext gl, string url, Action callback) { //gl.enable(gl.TEXTURE_2D); var texture = gl.createTexture(); var image = new IHTMLImage(); Console.WriteLine("loading: " + url); image.src = url; image.InvokeOnComplete( delegate { Console.WriteLine("loaded: " + url); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR); gl.bindTexture(gl.TEXTURE_2D, null); callback(); } ); return texture; }
static CreateShaderResult CreateShader( WebGLRenderingContext gl, string tvs, string tfs, bool nativeDebug ) { //new IHTMLPre { "enter CreateShader" }.AttachToDocument(); //var p = gl.createProgram(); var vs = new WebGLShader(gl, gl.VERTEX_SHADER); var fs = new WebGLShader(gl, gl.FRAGMENT_SHADER); gl.shaderSource(vs, tvs); gl.shaderSource(fs, tfs); gl.compileShader(vs); var ok = new CreateShaderResult { mSuccess = true }; // https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_shaders/ new WebGLDebugShaders(gl).With(x => ok.vsTranslatedShaderSource = x.getTranslatedShaderSource(vs)); //gl.getExtension("WEBGL_debug_shaders").With( //(dynamic WEBGL_debug_shaders) => // { // ok.vsTranslatedShaderSource = WEBGL_debug_shaders.getTranslatedShaderSource((WebGLShader)vs); // } //); gl.compileShader(fs); // ipad wont have it available new WebGLDebugShaders(gl).With(x => ok.fsTranslatedShaderSource = x.getTranslatedShaderSource(fs)); //gl.getExtension("WEBGL_debug_shaders").With( // (dynamic WEBGL_debug_shaders) => // { // ok.fsTranslatedShaderSource = WEBGL_debug_shaders.getTranslatedShaderSource((WebGLShader)fs); // } //); if (gl.getShaderParameter(vs, gl.COMPILE_STATUS) == null) { var infoLog = gl.getShaderInfoLog(vs); // does our async rewriter throw async exceptions yet? throw new Exception(message: new { infoLog }.ToString()); //new IHTMLPre { "error CreateShader " + new { infoLog } }.AttachToDocument(); //return new CreateShaderResult { mSuccess = false, mInfo = infoLog }; } var fsCOMPILE_STATUS = (bool)gl.getShaderParameter(fs, gl.COMPILE_STATUS); //new IHTMLPre { "CreateShader " + new { fsCOMPILE_STATUS } }.AttachToDocument(); if (!fsCOMPILE_STATUS) { var infoLog = gl.getShaderInfoLog(fs); throw new Exception(message: new { infoLog }.ToString()); //new IHTMLPre { "error CreateShader " + new { infoLog } }.AttachToDocument(); //return new CreateShaderResult { mSuccess = false, mInfo = infoLog }; } var p = new WebGLProgram(gl); gl.attachShader(p, vs); gl.attachShader(p, fs); // using dispose? gl.deleteShader(vs); gl.deleteShader(fs); gl.linkProgram(p); var linkResult = (bool)gl.getProgramParameter(p, gl.LINK_STATUS); //new IHTMLPre { "CreateShader " + new { linkResult } }.AttachToDocument(); if (!linkResult) { var infoLog = gl.getProgramInfoLog(p); gl.deleteProgram(p); throw new Exception(message: new { infoLog }.ToString()); //new IHTMLPre { "error CreateShader " + new { infoLog } }.AttachToDocument(); //return new CreateShaderResult { mSuccess = false, mInfo = infoLog }; } // https://msdn.microsoft.com/en-us/library/ie/dn302415(v=vs.85).aspx //new IHTMLPre { "exit CreateShader" }.AttachToDocument(); ok.mProgram = p; return ok; }
public Effect( AudioContext ac, WebGLRenderingContext gl, RefreshTexturThumbailDelegate callback, object obj, bool forceMuted, bool forcePaused) { //new IHTMLPre { "enter Effect" }.AttachToDocument(); var ext = gl.getExtension("OES_standard_derivatives"); var supportsDerivatives = (ext != null); //if (supportsDerivatives) gl.hint(ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES, gl.NICEST); var ext2 = gl.getExtension("OES_texture_float"); this.mSupportTextureFloat = (ext2 != null); var precision = DetermineShaderPrecission(gl); //this.mGainNode = ac.createGain(); //this.mGainNode.connect(ac.destination); this.mQuadVBO = createQuadVBO(gl); this.mPasses = new EffectPass[2]; for (var i = 0; i < 2; i++) { this.mPasses[i] = new EffectPass( ac, gl, precision, supportsDerivatives, callback, obj, forceMuted, forcePaused, this.mQuadVBO, this.mGainNode ); } }
public WebGLTexture(WebGLRenderingContext gl) { // InternalConstructor }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // http://webglsamples.googlecode.com/hg/google-io/2011/100-objects.html // https://twitter.com/schteppe/status/493346982279532545 // http://floooh.github.io/oryol/DrawCallPerf.html // https://www.mail-archive.com/[email protected]/msg01454.html // https://code.google.com/p/dart/issues/detail?id=11357 // https://bugzilla.mozilla.org/show_bug.cgi?id=843673 // http://webglstats.com/ // for heat zeeker, can we use webgl, instanced geometry, collada databound to LAN synced data layer? // http://msdn.microsoft.com/en-us/library/ie/dn725046%28v=vs.85%29.aspx // would this mean we would have a nice isometric world? // http://www.khronos.org/registry/webgl/extensions/ANGLE_instanced_arrays/ // ace of spades webgl lan? // https://code.google.com/p/chromium/issues/detail?id=288391 // http://blog.tojicode.com/2013/07/webgl-instancing-with.html // http://media.tojicode.com/webgl-samples/instancing.html //new WebGLRenderingContext // Uncaught TypeError: undefined is not a function var gl = new WebGLRenderingContext().AttachTo(Native.shadow); // var ext = gl.getExtension("ANGLE_instanced_arrays"); // Vendor prefixes may apply! //var ANGLEInstancedArrays = gl.getExtension("ANGLE_instanced_arrays") as ANGLE_instanced_arrays; // when will jsc pass generic arguments along? //var ANGLEInstancedArrays = (ANGLE_instanced_arrays)gl.getExtension<ANGLE_instanced_arrays>(); var ANGLEInstancedArrays = (ANGLE_instanced_arrays)gl.getExtension("ANGLE_instanced_arrays"); // 0:63ms {{ ANGLEInstancedArrays = [object ANGLEInstancedArrays] }} // any reason to provide extension methods as gl.drawArraysInstanced ? // X:\jsc.svn\core\ScriptCoreLib.Redux\ScriptCoreLib.Redux\JavaScript\Extensions\WebGLExtensions.cs //ANGLEInstancedArrays.drawArraysInstancedANGLE( //gl.drawArraysInstanced( Console.WriteLine(new { ANGLEInstancedArrays }); // 0:270ms {{ ext = [object ANGLEInstancedArrays] }} // // THREE.JS supports it? http://stackoverflow.com/questions/23172609/does-three-js-support-angle-instanced-arrays // BufferedGeometry perhaps? // https://github.com/mrdoob/three.js/issues/975 // can we have starling like 2d svg instancing now for webgl? // if we wanted to run physic on the background thearead, // would the jsc interfaces for webgl have enough knowledge to proxy via WorkerAPI? // http://www.browserleaks.com/webgl // https://github.com/kripken/emscripten/issues/2510 // http://nullprogram.com/blog/2014/06/01/ }
// 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\hznosky.png" "/sdcard/oculus/360photos/" //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/" // 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 a: s:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web // Z:\jsc.svn\examples\javascript\chrome\apps\WebGL\Chrome360HZ\Chrome360HZ\bin\Debug\staging\Chrome360HZ.Application\web // ColladaLoader: Empty or non-existing file (assets/Chrome360HZ/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: "Chrome360HZ"); // 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 //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 size = 1024; // 6 faces, ? //const int cubefacesize = 2048; // 6 faces, ? const int cubefacesize = 512; // 6 faces, ? var uizoom = 0.05; var far = 0xfffff; Native.css.style.backgroundColor = "blue"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); new IHTMLPre { "can we stream it into VR, shadertoy, youtube 360, youtube stereo yet?" }.AttachToDocument(); var sw = Stopwatch.StartNew(); var pause = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "pause" }.AttachToDocument(); pause.onchange += delegate { if (pause.@checked) sw.Stop(); else sw.Start(); }; var oo = new List<THREE.Object3D>(); #region scene 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(); var ambient = new THREE.AmbientLight(0x303030); scene.add(ambient); // should we fix jsc to do a more correct IDL? //var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7); //directionalLight.position.set(0, 0, 1); //scene.add(directionalLight); #region light //var light = new THREE.DirectionalLight(0xffffff, 1.0); var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 2.5); //var light = new THREE.DirectionalLight(0xffffff, 1.5); //var lightOffset = new THREE.Vector3(0, 1000, 2500.0); var lightOffset = new THREE.Vector3( 2000, 700, // lower makes longer shadows 700.0 ); light.position.copy(lightOffset); light.castShadow = true; var xlight = light as dynamic; xlight.shadowMapWidth = 4096; xlight.shadowMapHeight = 2048; xlight.shadowDarkness = 0.1; //xlight.shadowDarkness = 0.5; xlight.shadowCameraNear = 10; xlight.shadowCameraFar = 10000; xlight.shadowBias = 0.00001; xlight.shadowCameraRight = 4000; xlight.shadowCameraLeft = -4000; xlight.shadowCameraTop = 4000; xlight.shadowCameraBottom = -4000; xlight.shadowCameraVisible = true; scene.add(light); #endregion // 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); //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); var cameraoffset = new THREE.Vector3(-1200, 800, 1200); #region y // need to rotate90? var cameraNY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); 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(8 + (int)(uizoom * cubefacesize + 8) * 1, 8 + (int)(uizoom * cubefacesize + 8) * 2); canvasNY.canvas.title = "NY"; canvasNY.canvas.AttachToDocument(); canvasNY.canvas.style.transformOrigin = "0 0"; canvasNY.canvas.style.transform = "scale(" + uizoom + ")"; var cameraPY = new THREE.PerspectiveCamera(fov: 90, aspect: 1.0, near: 1, far: far); 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(8 + (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); 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(8 + (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); 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(8 + (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)); 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(8 + (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)); 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(8 + (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; #region onmousedown Native.body.onmousedown += async e => { if (e.Element.nodeName.ToLower() != "canvas") return; // movementX no longer works old = new { e.CursorX, e.CursorY }; //e.CaptureMouse(); var release = e.Element.CaptureMouse(); await e.Element.async.onmouseup; release(); }; #endregion // X:\jsc.svn\examples\javascript\Test\TestMouseMovement\TestMouseMovement\Application.cs #region onmousemove Native.body.onmousemove += e => { if (e.Element.nodeName.ToLower() != "canvas") { Native.body.style.cursor = IStyle.CursorEnum.@default; return; } e.preventDefault(); e.stopPropagation(); Native.body.style.cursor = IStyle.CursorEnum.move; var pointerLock = canvas0 == Native.document.pointerLockElement; //Console.WriteLine(new { e.MouseButton, pointerLock, e.movementX }); if (e.MouseButton == IEvent.MouseButtonEnum.Left) { oo.WithEach( x => { x.rotation.y += 0.006 * (e.CursorX - old.CursorX); x.rotation.x += 0.006 * (e.CursorY - old.CursorY); } ); old = new { e.CursorX, e.CursorY }; } }; #endregion // 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.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs().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); var mesh = new THREE.Mesh(new THREE.SphereGeometry(far / 2, 50, 50), new THREE.MeshBasicMaterial(new { map = THREE.ImageUtils.loadTexture( //new HTML.Images.FromAssets._2294472375_24a3b8ef46_o().src //new HTML.Images.FromAssets._4008650304_7f837ccbb7_b().src frame0.src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src ) })); mesh.scale.x = -1; #region fixup rotation //mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), Math.PI / 2); //mesh.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI / 2); mesh.rotateOnAxis(new THREE.Vector3(0, 1, 0), -Math.PI / 2); #endregion scene.add(mesh); //new IHTMLButton { } var dir = default(DirectoryEntry); new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); }; 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 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! if (dir == null) 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", f0); // 3.7MB // 3840x2160 }; // "Z:\jsc.svn\examples\javascript\WebGL\WebGLColladaExperiment\WebGLColladaExperiment\WebGLColladaExperiment.csproj" #region WebGLRah66Comanche // why isnt it being found? // "Z:\jsc.svn\examples\javascript\WebGL\collada\WebGLRah66Comanche\WebGLRah66Comanche\WebGLRah66Comanche.csproj" new global::WebGLRah66Comanche.Comanche( ).Source.Task.ContinueWithResult( dae => { //dae.position.y = -40; //dae.position.z = 280; scene.add(dae); //oo.Add(dae); // wont do it //dae.castShadow = true; dae.children[0].children[0].children.WithEach(x => x.castShadow = true); // the rotors? dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true); dae.scale.set(0.5, 0.5, 0.5); dae.position.x = -900; dae.position.z = +900; // raise it up dae.position.y = 400; //var sw = Stopwatch.StartNew(); //Native.window.onframe += delegate //{ // //dae.children[0].children[0].children.Last().al // //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01; // //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01; // dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01; //}; } ); #endregion #region tree // "Z:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\WebGLGodRay.csproj" var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading }); var tloader = new THREE.JSONLoader(); // http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic // https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx //System.Runtime.CompilerServices.DynamicAttribute tloader.load( new WebGLGodRay.Models.tree().Content.src, new Action<THREE.Geometry>( xgeometry => { var treeMesh = new THREE.Mesh(xgeometry, materialScene); treeMesh.position.set(0, -150, -150); treeMesh.position.x = -900; treeMesh.position.z = -900; treeMesh.position.y = 25; var tsc = 400; treeMesh.scale.set(tsc, tsc, tsc); treeMesh.matrixAutoUpdate = false; treeMesh.updateMatrix(); treeMesh.AttachTo(scene); } ) ); #endregion #region create field // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint. // could we get some film grain? var planeGeometry = new THREE.CubeGeometry(512, 512, 1); var plane = new THREE.Mesh(planeGeometry, new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 }) ); //plane.castShadow = false; plane.receiveShadow = true; { var parent = new THREE.Object3D(); parent.add(plane); parent.rotation.x = -Math.PI / 2; parent.scale.set(10, 10, 10); scene.add(parent); } var random = new Random(); var meshArray = new List<THREE.Mesh>(); var geometry = new THREE.CubeGeometry(1, 1, 1); //var sw = Stopwatch.StartNew(); for (var i = 3; i < 9; i++) { //THREE.MeshPhongMaterial var ii = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 }) //new THREE.MeshLambertMaterial( //new //{ // color = (Convert.ToInt32(0xffffff * random.NextDouble())), // specular = 0xffaaaa, // ambient= 0x050505, //}) ); ii.position.x = i % 7 * 200 - 2.5f; // raise it up ii.position.y = .5f * 100; ii.position.z = -1 * i * 100; ii.castShadow = true; ii.receiveShadow = true; //ii.scale.set(100, 100, 100 * i); ii.scale.set(100, 100 * i, 100); meshArray.Add(ii); scene.add(ii); if (i % 2 == 0) { #if FWebGLHZBlendCharacter #region SpeedBlendCharacter var _i = i; { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; } var blendMesh = new THREE.SpeedBlendCharacter(); blendMesh.load( new WebGLHZBlendCharacter.Models.marine_anims().Content.src, new Action( delegate { // buildScene //blendMesh.rotation.y = Math.PI * -135 / 180; blendMesh.castShadow = true; // we cannot scale down we want our shadows //blendMesh.scale.set(0.1, 0.1, 0.1); blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f; // raise it up //blendMesh.position.y = .5f * 100; blendMesh.position.z = -1 * _i * 100; var xtrue = true; // run blendMesh.setSpeed(1.0); // will in turn call THREE.AnimationHandler.play( this ); //blendMesh.run.play(); // this wont help. bokah does not see the animation it seems. //blendMesh.run.update(1); blendMesh.showSkeleton(!xtrue); scene.add(blendMesh); Native.window.onframe += delegate { blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds; }; } ) ); #endregion #endif } } #endregion #region HZCannon // "Z:\jsc.svn\examples\javascript\WebGL\HeatZeekerRTSOrto\HeatZeekerRTSOrto\HeatZeekerRTSOrto.csproj" new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; //cube.position.x = -100; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw2 = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); // offset is wrong //while (true) //{ // await Native.window.async.onframe; // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds; //} } ); #endregion #region HZCannon new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult( async cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; // jsc shat about out of band code patching? cube.position.z = 600; cube.position.x = -900; //cube.position.y = -400; //cube.position.x = -100; //cube.position.y = -400; ////cube.position.y = (cube.scale.y * 50) / 2; //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25; // if i want to rotate, how do I do it? //cube.rotation.z = random() + Math.PI; //cube.rotation.x = random() + Math.PI; var sw2 = Stopwatch.StartNew(); scene.add(cube); //interactiveObjects.Add(cube); // offset is wrong //while (true) //{ // await Native.window.async.onframe; // cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds; //} } ); #endregion #region HZBunker new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult( cube => { // https://github.com/mrdoob/three.js/issues/1285 //cube.children.WithEach(c => c.castShadow = true); cube.castShadow = true; //cube.traverse( // new Action<THREE.Object3D>( // child => // { // // does it work? do we need it? // //if (child is THREE.Mesh) // child.castShadow = true; // //child.receiveShadow = true; // } // ) //); // um can edit and continue insert code going back in time? cube.scale.x = 10.0; cube.scale.y = 10.0; cube.scale.z = 10.0; //cube.castShadow = true; //dae.receiveShadow = true; cube.position.x = -1000; //cube.position.y = (cube.scale.y * 50) / 2; cube.position.z = 0; scene.add(cube); } ); #endregion new Models.ColladaS6Edge().Source.Task.ContinueWithResult( dae => { // 90deg dae.rotation.x = -Math.Cos(Math.PI); //dae.scale.x = 30; //dae.scale.y = 30; //dae.scale.z = 30; dae.position.z = -(65 - 200); var scale = 0.9; // jsc, do we have ILObserver available yet? dae.scale.x = scale; dae.scale.y = scale; dae.scale.z = scale; #region onmousewheel Native.body.onmousewheel += e => { e.preventDefault(); //camera.position.z = 1.5; // min max. shall adjust speed also! // max 4.0 // min 0.6 dae.position.z -= 10.0 * e.WheelDirection; //camera.position.z = 400; //dae.position.z = dae.position.z.Max(-200).Min(200); //Native.document.title = new { z }.ToString(); }; #endregion //dae.position.y = -80; scene.add(dae); oo.Add(dae); // 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 => { //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; dae.position.x = Math.Sin(sw.ElapsedMilliseconds * 0.0001) * 190.0; dae.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.0001) * 90.0; // manual rebuild? // red compiler notifies laptop chrome of pending update // app reloads 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? 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); } ); 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(); }; } ); #endregion Console.WriteLine("do you see it?"); }
public Application(IDefault page = null) { var size = 500; 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 IsDisposed var IsDisposed = false; this.Dispose = delegate { if (IsDisposed) return; IsDisposed = true; canvas.Orphanize(); }; #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 requestFullscreen Native.Document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.Document.body.requestFullscreen(); }; #endregion #region initShaders var shaderProgram = gl.createProgram( new GeometryVertexShader(), new GeometryFragmentShader() ); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram); var shaderProgram_vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray((uint)shaderProgram_vertexPositionAttribute); var shaderProgram_textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord"); gl.enableVertexAttribArray((uint)shaderProgram_textureCoordAttribute); var shaderProgram_pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); var shaderProgram_mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); // new in lesson 05 var shaderProgram_samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); #endregion var mvMatrix = glMatrix.mat4.create(); var mvMatrixStack = new Stack<Float32Array>(); var pMatrix = glMatrix.mat4.create(); #region new in lesson 03 Action mvPushMatrix = delegate { var copy = glMatrix.mat4.create(); 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 cubeVertexPositionBuffer var cubeVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); var vertices = new[]{ // Front face RED -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, // Back face YELLOW -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, -1.0f, -1.0f, // Top face GREEN -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, // Bottom face BEIGE -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, // Right face PURPLE 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, -1.0f, 1.0f, // Left face -1.0f, -1.0f, -1.0f, -1.0f, -1.0f, 1.0f, -1.0f, 1.0f, 1.0f, -1.0f, 1.0f, -1.0f }; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); var cubeVertexPositionBuffer_itemSize = 3; var cubeVertexPositionBuffer_numItems = 6 * 6; #endregion #region cubeVertexTextureCoordBuffer var cubeVertexTextureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); var textureCoords = new float[]{ // Front face 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, // Back face 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, // Top face 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, // Bottom face 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, // Right face 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 0.0f, // Left face 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 0.0f, 1.0f, }; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW); var cubeVertexTextureCoordBuffer_itemSize = 2; var cubeVertexTextureCoordBuffer_numItems = 24; var cubeVertexIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); var cubeVertexIndices = new UInt16[]{ 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 }; gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW); var cubeVertexIndexBuffer_itemSize = 1; var cubeVertexIndexBuffer_numItems = cubeVertexPositionBuffer_numItems; #endregion #endregion // initTexture new in lesson 05 var neheTexture = gl.createTexture(); var neheTexture_image = new WebGLLesson05.HTML.Images.FromAssets.nehe(); neheTexture_image.InvokeOnComplete( delegate { gl.bindTexture(gl.TEXTURE_2D, neheTexture); #region with neheTexture gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, neheTexture_image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.NEAREST); #endregion gl.bindTexture(gl.TEXTURE_2D, null); gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f); gl.enable(gl.DEPTH_TEST); #region new in lesson 04 var xRot = 0.0f; var yRot = 0.0f; var zRot = 0.0f; var lastTime = 0L; Action animate = delegate { var timeNow = new IDate().getTime(); if (lastTime != 0) { var elapsed = timeNow - lastTime; xRot += (90 * elapsed) / 1000.0f; yRot += (90 * elapsed) / 1000.0f; zRot += (90 * elapsed) / 1000.0f; } lastTime = timeNow; }; Func<float, float> degToRad = (degrees) => { return degrees * (f)Math.PI / 180f; }; #endregion #region drawScene Action drawScene = delegate { gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); glMatrix.mat4.perspective(45f, (float)gl_viewportWidth / (float)gl_viewportHeight, 0.1f, 100.0f, pMatrix); glMatrix.mat4.identity(mvMatrix); glMatrix.mat4.translate(mvMatrix, new float[] { 0.0f, 0.0f, -5.0f }); glMatrix.mat4.rotate(mvMatrix, degToRad(xRot), new[] { 1f, 0f, 0f }); glMatrix.mat4.rotate(mvMatrix, degToRad(yRot), new[] { 0f, 1f, 0f }); glMatrix.mat4.rotate(mvMatrix, degToRad(zRot), new[] { 0f, 0f, 1f }); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexPositionAttribute, cubeVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); gl.vertexAttribPointer((uint)shaderProgram_textureCoordAttribute, cubeVertexTextureCoordBuffer_itemSize, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, neheTexture); gl.uniform1i(shaderProgram_samplerUniform, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer_numItems, gl.UNSIGNED_SHORT, 0); }; drawScene(); #endregion var c = 0; Native.window.onframe += delegate { c++; Native.document.title = "" + c; drawScene(); 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(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: "x360stereomidnightsun"); // 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 // crash //int cubefacesizeMAX = 2048 * 2; // 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/" if (Environment.ProcessorCount < 8) //cubefacesize = 64; // 6 faces, ? // fast gif? cubefacesize = 1024; // 6 faces, ? // 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 = "darkcyan"; Native.css.style.overflow = IStyle.OverflowEnum.hidden; Native.body.Clear(); (Native.body.style as dynamic).webkitUserSelect = "text"; IHTMLCanvas shader1canvas = null; //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/x360stereomidnightsun/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); renderer0.setClearColor(0x0, 0); //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); // whatif we want more than 30sec video? 2min animation? more frames to render? 2gb disk? var maxfps = 60; //var maxlengthseconds = 60; var maxlengthseconds = 120; var maxframes = maxlengthseconds * maxfps; var frameIDanimation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "frameIDanimation", @checked = false }.AttachToDocument(); // 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 = 0, title = "frameIDslider" }.AttachToDocument(); //var frameIDslider = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 1800, valueAsNumber = 1800 / 2, title = "frameIDslider" }.AttachToDocument(); new IHTMLHorizontalRule { }.AttachToDocument(); var camerax = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "camerax" }.AttachToDocument(); camerax.css.after.contentText = "x: "; new IHTMLBreak { }.AttachToDocument(); //camerax.style.borderLeft = "1em solid red"; // 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 = -32, max = 32, valueAsNumber = 0, title = "cameray" }.AttachToDocument(); cameray.css.after.contentText = "y: "; new IHTMLBreak { }.AttachToDocument(); // we wont be going to orbit //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(); //var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -2048 / 2, max = 0 + 2048 / 2, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); var cameraz = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -32, max = 32, valueAsNumber = 0, title = "cameraz" }.AttachToDocument(); cameraz.css.after.contentText = "z: "; // for render server var fcamerax = 0.0; var fcameray = 0.0; var fcameraz = 0.0; new IHTMLHorizontalRule { }.AttachToDocument(); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo // not used for this example tho... var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -180, max = 180, valueAsNumber = 0, title = "itemRotation" }.AttachToDocument(); var spriteOffset = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = 0, max = 11, valueAsNumber = 0, title = "spriteOffset" }.AttachToDocument(); //var itemRotation = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.range, min = -90, max = 90, valueAsNumber = 33, title = "itemRotation" }.AttachToDocument(); //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; // we wont be going to orbit //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), //1200c 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 // lets have the item twice the cube item size. and offset -0.5 to recenter. // this wont work as we are cloning the buffer for now! //var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize * 2); var canvasPXitem = new CanvasRenderingContext2D(cubefacesize, cubefacesize); canvasPXitem.canvas.style.SetLocation(cubecameraoffsetx + (int)(uizoom * cubefacesize + 8) * 0, 8 + (int)(uizoom * cubefacesize + 8) * 2); canvasPXitem.canvas.title = "item"; canvasPXitem.canvas.AttachToDocument(); canvasPXitem.canvas.style.transformOrigin = "0 0"; canvasPXitem.canvas.style.transform = "scale(" + uizoom + ")"; canvasPXitem.canvas.style.border = "1px solid yellow"; //canvasPXitem.fillText("hello", 1, 1, cubefacesize); //canvasPXitem.drawImage( // //new IHTMLPre { "hello" } // new IHTMLDiv { "hello world. can we draw html into 360 VR yet?" }, 0, 0, cubefacesize, cubefacesize //); // http://www.w3schools.com/tags/canvas_fillstyle.asp canvasPXitem.fillStyle = "red"; // too big? //canvasPXitem.fillRect( // x: cubefacesize / 3, // y: cubefacesize / 4, // w: cubefacesize / 3, // h: cubefacesize / 2 //); // canvasPXitem.fillRect( // x: (cubefacesize - cubefacesize / 6) / 2, // y: (cubefacesize - cubefacesize / 3) / 2, // w: cubefacesize / 6, // h: cubefacesize / 3 //); #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 // bots cannot get a bigger mp4 from yt, and vrideo renders 2k on gearvr. 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); var frame2 = new HTML.Images.FromAssets.galaxy_starfield().AttachToDocument(); frame2.style.height = "270px"; frame2.style.width = "480px"; frame2.style.SetLocation( 8 + (int)(uizoom * cubefacesize + 8) * 0 + 480 * 2 + 16 * 2, 8 + (int)(uizoom * cubefacesize + 8) * 3); #region DirectoryEntry var dir = default(DirectoryEntry); new IHTMLButton { "openDirectory" }.AttachToDocument().onclick += async delegate { dir = (DirectoryEntry)await chrome.fileSystem.chooseEntry(new { type = "openDirectory" }); }; 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 var vsync = default(TaskCompletionSource<object>); // "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); //} //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 texPXitem = new THREE.Texture( //shader1canvas canvasPXitem.canvas ) { 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 = texPXitem, transparent = true, alphaTest = 0.5 //ambient = 0x00ff00, //color = 0x00ff00 }) ); //floor2.position.set(0, 0, -cubefacesize * 0.55); floor2.AttachTo(scene); applycameraoffset += delegate { texPXitem.needsUpdate = true; //floor2.position.set(-cubefacesize * 0.5, 0, 0); //floor2.position.set(-cubefacesize * 0.33, 0, 0); // floor2.position.set(-cubefacesize * 0.25, 0, 0); //floor2.position.set(-cubefacesize * 0.225, 0, 0); floor2.position.set(-cubefacesize * 0.23, 0, 0); // too close! //floor2.position.set(-cubefacesize * 0.20, 0, 0); floor2.rotation.set(0, 0, 0); floor2.rotateOnAxis(new THREE.Vector3(0, 1, 0), Math.PI / 2 + radians(itemRotation.valueAsNumber)); }; // 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 new IHTMLBreak { }.AttachToDocument(); var iskybox2 = new HTML.Images.FromAssets._2massAllskyGAMMA(); var iskybox1 = new HTML.Images.FromAssets.anvil___spherical_hdri_panorama_skybox_by_macsix_d6vv4hs(); var hideskybox1 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox1", @checked = true }.AttachToDocument(); var hideskybox2 = new IHTMLInput { type = ScriptCoreLib.Shared.HTMLInputTypeEnum.checkbox, title = "hide skybox2", @checked = false }.AttachToDocument(); #region drawStereoFrame Func<CanvasRenderingContext2D, Task> drawStereoFrame = async canvasTB => { //var xIPD = 4.0; var xIPD = 6.0; // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203/x360stereomidnightsun // fake skybox? canvasTB.fillStyle = "darkcyan"; canvasTB.fillRect(0, 0, c.width, c.height); //canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2); //canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2); // 12 frames in total. lets add em all // can we add a secondary stereo frame ? at 45deg? var offsetrotation = 360 / 12; hideskybox1.@checked = true; hideskybox2.@checked = false; // mono bg! floor2.visible = false; fcamerax = 0; await Native.window.async.onframe; await Native.window.async.onframe; canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, 0, c.width, c.height / 2); canvasTB.drawImage(gl.canvas, 0, 0, c.width, c.height, 0, c.height / 2, c.width, c.height / 2); // keep only bg. hide stereo sprite floor2.visible = true; //await Native.window.async.onframe; // we need our stereo item frame thanks. no bg. hideskybox1.@checked = true; hideskybox2.@checked = true; await Native.window.async.onframe; //fcamerax = -xIPD; //await Native.window.async.onframe; //var stereoT = new IHTMLImage { src = gl.canvas.toDataURL() }; //fcamerax = +xIPD; //await Native.window.async.onframe; //var stereoB = new IHTMLImage { src = gl.canvas.toDataURL() }; ////await Native.window.async.onframe; //await stereoB.async.oncomplete; // we now have a stereo sprite. // can we rotate it on top of the background? // 8K fulldome is a resolution of 8192×8192 // 8K UHD is a resolution of 7680 × 4320 (33.2 megapixels) // 8192×4320 t // Digital video formats with resolutions of 4K (3840×2160) and 8K (7680×4320) // WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost ? for (int stereoframei = 0; stereoframei < 12; stereoframei++) { spriteOffset.valueAsNumber = stereoframei; Console.WriteLine(new { stereoframei }); double ioffsetdeg = offsetrotation * stereoframei; ioffsetdeg += (degrees(frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2)); // follow the moon? //stars.rotateOnAxis(new THREE.Vector3(0, -1, 0), // frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2 //); var ipxoffset = (int)Math.Floor(c.width * ioffsetdeg / 360); ipxoffset = ipxoffset % c.width; fcamerax = -xIPD; await Native.window.async.onframe; var stereoT = gl.canvas; canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, ipxoffset, 0, c.width, c.height / 2); canvasTB.drawImage(stereoT, 0, 0, c.width, c.height, -c.width + ipxoffset, 0, c.width, c.height / 2); fcamerax = +xIPD; await Native.window.async.onframe; var stereoB = gl.canvas; canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, ipxoffset, c.height / 2, c.width, c.height / 2); canvasTB.drawImage(stereoB, 0, 0, c.width, c.height, -c.width + ipxoffset, c.height / 2, c.width, c.height / 2); } //var canvasTB8K = new CanvasRenderingContext2D(c.width * 2, c.height * 2); //canvasTB8K.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height); //canvasTB8K.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height); // https://www.reddit.com/r/GearVR/comments/2vrfyu/id_suggest_makers_of_360_videos_make_them_the/ // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203 // can we actually watch stereo _TB images on gearVR? }; #endregion #region stero // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151114/stereo // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112 new IHTMLButton { "make me a stero TB image " }.AttachToDocument().With( async e => { // http://www.vrideo.com/watch/ALdE7mm // https://www.youtube.com/watch?v=S3iTPxMIlCI var onclick = e.async.onclick; while (await onclick) { // keep it 4K, as hw, yt is not ready for 60fps 8K! var canvasTB = new CanvasRenderingContext2D(c.width, c.height); drawStereoFrame(canvasTB); // gearVR will get a black screen // //frame2.src = canvasTB8K.canvas.toDataURL(); frame2.src = canvasTB.canvas.toDataURL(); onclick = e.async.onclick; //while (!onclick.IsCompleted) //{ // await Task.Delay(1000 / 30); // frame0.src = f0.src; // await Task.Delay(1000 / 30); // frame0.src = f1.src; //} } } ); #endregion #region render 60hz 30sec new IHTMLButton { //"render 60hz 30sec" //$"render {maxfps}hz {maxlengthseconds}sec" "render " + new {maxfps} + "hz " + new {maxlengthseconds} + "sec" }.AttachToDocument().onclick += async e => { e.Element.disabled = true; //var canvasTB = new CanvasRenderingContext2D(c.width * 2, c.height * 2); var canvasTB = new CanvasRenderingContext2D(c.width, c.height); 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; //frameIDanimation.@checked = true; frameIDslider.valueAsNumber = -1; // allow the animation values to sink in //vsync = new TaskCompletionSource<object>(); //await vsync.Task; goto beforeframe; // parallax offset? await_nextframe: var filename = frameIDslider.valueAsNumber.ToString().PadLeft(5, '0') + ".jpg"; status = "rendering... " + new { filename }; await drawStereoFrame(canvasTB); //var xIPD = 4.0; //// left eye //fcamerax = -xIPD; //vsync = new TaskCompletionSource<object>(); //await vsync.Task; //var f0 = new IHTMLImage { src = gl.canvas.toDataURL() }; //// right eye //fcamerax = +xIPD; //vsync = new TaskCompletionSource<object>(); //await vsync.Task; //var f1 = new IHTMLImage { src = gl.canvas.toDataURL() }; //await f1.async.oncomplete; //canvasTB.drawImage(f0, 0, 0, c.width, c.height, 0, 0, c.width * 2, c.height); //canvasTB.drawImage(f1, 0, 0, c.width, c.height, 0, c.height, c.width * 2, c.height); // 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) { frame2.src = canvasTB.canvas.toDataURL(); await Task.Delay(500); } else await dir.WriteAllBytes(filename, canvasTB); //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 += 60; 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); 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 new { }.With( async delegate { var tex1 = new the_midnight_sun_by_isilmetriel { }; await tex1.async.oncomplete; // first one is 124, while others is 123? var tex1w = 123; //var tex1w = 120; var tex1h = 626; //canvasPXitem.drawImage( // tex1, 2, 2, tex1w, tex1h, 0, 0, tex1w, tex1h // ); // how long until jsc can upstream small updates to code? //// canvasPXitem.drawImage( //// (IHTMLCanvas)renderer0.domElement, //// sx: (cubefacesize - cubefacesize / 6) / 2, //// sy: (cubefacesize - cubefacesize / 3) / 2, //// sw: cubefacesize / 6, //// sh: cubefacesize / 3, //// dx: (cubefacesize - cubefacesize / 6) / 2, //// dy: (cubefacesize - cubefacesize / 3) / 2, //// dw: cubefacesize / 6, //// dh: cubefacesize / 3 ////); await iskybox2.async.oncomplete; var bytes1 = await iskybox1.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(iskybox1.width, iskybox1.height); cc.bytes = bytes1; //s.image = cc; //s.needsUpdate = true; var skybox1_material = new THREE.MeshBasicMaterial( new { //map = THREE.ImageUtils.loadTexture(new galaxy_starfield().src), map = new THREE.Texture { image = cc, needsUpdate = true }, side = THREE.BackSide, transparent = true }); var skybox1 = new THREE.Mesh( //new THREE.SphereGeometry(far * 0.92, 64, 64), //new THREE.SphereGeometry(far * 0.80, 64, 64), // still zfighting //new THREE.SphereGeometry(far * 0.50, 64, 64), // the other option is to have a single bg and blend on tht. this is just a rotation visualization. new THREE.SphereGeometry(far * 0.30, 64, 64), skybox1_material ); // http://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity //(stars_material as dynamic).opacity = 0.5; hideskybox1.onchange += delegate { skybox1.visible = !hideskybox1.@checked; }; skybox1.visible = !hideskybox1.@checked; scene.add(skybox1); applycameraoffset += delegate { if (frameIDanimation.@checked) { itemRotation.valueAsNumber = (frameIDslider.valueAsNumber / 2) % 360 - 180; hideskybox1.@checked = (frameIDslider.valueAsNumber / 2 + 180) % 720 < 360; } }; // target bg var skybox2 = new THREE.Mesh( new THREE.SphereGeometry(far * 0.95, 64, 64), new THREE.MeshBasicMaterial( new { map = new THREE.Texture { image = iskybox2, needsUpdate = true }, side = THREE.BackSide, transparent = true }) ); skybox2.AttachTo(scene).With( stars => { applycameraoffset += delegate { skybox2.visible = !hideskybox2.@checked; skybox1.rotation.set(0, 0, 0); // spin skybox1.rotateOnAxis(new THREE.Vector3(0, -1, 0), frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2 ); // reset stars.rotation.set(0, 0, 0); // slow rotate in place stars.rotateOnAxis(new THREE.Vector3(1, 0, 0), frameIDslider.valueAsNumber / 3600.0 * Math.PI * 2 ); // follow the moon? stars.rotateOnAxis(new THREE.Vector3(0, -1, 0), frameIDslider.valueAsNumber / (60 * 60 / 5.0) * Math.PI * 2 ); }; } ); // can we get our stereo sprite this way? // do we get clean tiles with transparency? // on x83 on frame0 we were able to hide skybox. how? //hideskybox2.onchange += delegate //{ // skybox2.visible = !hideskybox2.@checked; //}; //skybox2.visible = !hideskybox2.@checked; Console.WriteLine("skybox added"); //dae.position.y = -80; //dae.AttachTo(sceneg); //scene.add(dae); //oo.Add(dae); // 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.. if (vsync != null) if (vsync.Task.IsCompleted) 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(); // spriteOffset canvasPXitem.drawImage( tex1, //2px black border! //((tex1w + 4) * spriteOffset.valueAsNumber) + 2, ((tex1w + 2) * spriteOffset.valueAsNumber) + 3, 2, tex1w, tex1h, // dest (cubefacesize - tex1w) / 2, (cubefacesize - tex1h) / 2, tex1w, tex1h ); //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? // hide everything else // inversion effect? //// if (hideskybox1.@checked) //// skybox1.visible = true; //// else //// skybox1.visible = false; //// floor2.visible = false; //// renderer0.render(scene, cameraPX); //// //canvasPXitem.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151203 // can we draw from that special image? //canvasPXitem.drawImage( // tex1, 2, 2, 124, 630 - 4, 0, 0, 124, 626 //); //// canvasPXitem.drawImage( //// (IHTMLCanvas)renderer0.domElement, //// sx: (cubefacesize - cubefacesize / 6) / 2, //// sy: (cubefacesize - cubefacesize / 3) / 2, //// sw: cubefacesize / 6, //// sh: cubefacesize / 3, //// dx: (cubefacesize - cubefacesize / 6) / 2, //// dy: (cubefacesize - cubefacesize / 3) / 2, //// dw: cubefacesize / 6, //// dh: cubefacesize / 3 ////); //// skybox1.visible = !hideskybox1.@checked; //// floor2.visible = true; #region x canvasPX.clearRect(0, 0, cubefacesize, cubefacesize); // upside down? renderer0.render(scene, cameraPX); canvasPX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); canvasNX.clearRect(0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNX); canvasNX.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region z canvasPZ.clearRect(0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraPZ); canvasPZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); canvasNZ.clearRect(0, 0, cubefacesize, cubefacesize); renderer0.render(scene, cameraNZ); canvasNZ.drawImage((IHTMLCanvas)renderer0.domElement, 0, 0, cubefacesize, cubefacesize); #endregion #region y canvasPY.clearRect(0, 0, cubefacesize, cubefacesize); 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(); canvasNY.clearRect(0, 0, cubefacesize, cubefacesize); 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); } ); //if (cameraz.valueAsNumber == 0) gl.clearColor(0, 0, 0, 0); //else //gl4K.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // 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?"); } ); }
/// <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) { // how does this work on android? // https://www.shadertoy.com/view/MdfSRj# #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"); }; Console.WriteLine("awaiting Launch"); //new chrome.Notification(title: "awaiting Launch"); 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 Console.WriteLine("getting ready...?"); new Shaders.ProgramFragmentShader().With( async vs => { Console.WriteLine("getting ready..."); Native.body.style.margin = "0px"; //Native.document.documentElement.style.overflow = IStyle.OverflowEnum.auto; var mAudioContext = new AudioContext(); var gl = new WebGLRenderingContext(alpha: true); var c = gl.canvas.AttachToDocument(); c.style.SetSize(460, 237); c.width = 460; c.height = 237; var mEffect = new ChromeShaderToyColumns.Library.ShaderToy.Effect( mAudioContext, gl, callback: delegate { new IHTMLPre { "at callback" }.AttachToDocument(); }, obj: null, forceMuted: false, forcePaused: false ); #region CaptureMouse var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; c.onmousedown += async ev => { mMouseOriX = ev.CursorX; mMouseOriY = 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.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX += ev.movementX; mMousePosY += ev.movementY; } }; #endregion mEffect.mPasses[0].mInputs[0] = new ChromeShaderToyColumns.Library.ShaderToy.samplerCube { }; mEffect.mPasses[0].MakeHeader_Image(); mEffect.mPasses[0].NewShader_Image(vs); #region onresize new { }.With( async delegate { do { c.width = Native.window.Width; //c.height = Native.window.Height / 2; c.height = Native.window.Height; c.style.SetSize(c.width, c.height); } while (await Native.window.async.onresize); } ); #endregion Console.WriteLine("can you see any?"); var sw = Stopwatch.StartNew(); do { mEffect.mPasses[0].Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY ); // 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/20150808/equirectangular // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150718/shadertoy // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706 // subst b: X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeShaderToyColumns\ChromeShaderToyColumns\bin\Debug\staging\ChromeShaderToyColumns.Application\web 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"); 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 // view-source:https://www.shadertoy.com/view/Xls3WS // https://www.shadertoy.com/api // https://www.shadertoy.com/view/Xls3WS // https://www.shadertoy.com/js/cmRenderUtils.js // https://www.shadertoy.com/js/effect.js // what does it take to import those nice shaders into jsc world? // x:\jsc.svn\examples\javascript\webgl\webglchocolux\webglchocolux\application.cs // it looks there are no channels. // is it a vert or frag? // fragColor = vec4( col, 1.0 ); // must be a frag // <body onload="watchInit()" //ChromeShaderToyColumns.Library.ShaderToy.AttachToDocument( // new Shaders.ProgramFragmentShader() //); new { }.With( async delegate { Native.body.style.margin = "0px"; (Native.body.style as dynamic).webkitUserSelect = "auto"; var vs = new Shaders.ProgramFragmentShader(); var mAudioContext = new AudioContext(); var gl = new WebGLRenderingContext(alpha: true); var c = gl.canvas.AttachToDocument(); c.style.SetSize(460, 237); c.width = 460; c.height = 237; var u = new UIKeepRendering { animate = true }.AttachToDocument(); //new IHTMLPre { "init..." }.AttachToDocument(); // function ShaderToy( parentElement, editorParent, passParent ) // function buildInputsUI( me ) // this.mGLContext = createGlContext( this.mCanvas, false, true ); // {alpha: useAlpha, depth: false, antialias: false, stencil: true, premultipliedAlpha: false, preserveDrawingBuffer: usePreserveBuffer } var mMouseOriX = 0; var mMouseOriY = 0; var mMousePosX = 0; var mMousePosY = 0; // 308 //var mEffect = new Library.ShaderToy.Effect( // mAudioContext, // gl, // callback: delegate // { // new IHTMLPre { "at callback" }.AttachToDocument(); // }, // obj: null, // forceMuted: false, // forcePaused: false //); ////mEffect.mPasses[0].NewTexture //// EffectPass.prototype.NewTexture = function( wa, gl, slot, url ) //// this.mPasses[j].Create( rpass.type, this.mAudioContext, this.mGLContext ); //// EffectPass.prototype.MakeHeader_Image = function( precission, supportDerivatives ) //mEffect.mPasses[0].MakeHeader_Image(); //// EffectPass.prototype.NewShader = function( gl, shaderCode ) //// EffectPass.prototype.NewShader_Image = function( gl, shaderCode ) //mEffect.mPasses[0].NewShader_Image(vs); //// ShaderToy.prototype.resetTime = function() // Effect.prototype.ResetTime = function() // ShaderToy.prototype.startRendering = function() // Effect.prototype.Paint = function(time, mouseOriX, mouseOriY, mousePosX, mousePosY, isPaused) // EffectPass.prototype.Paint = function( wa, gl, time, mouseOriX, mouseOriY, mousePosX, mousePosY, xres, yres, isPaused ) // EffectPass.prototype.Paint_Image = function( wa, gl, time, mouseOriX, mouseOriY, mousePosX, mousePosY, xres, yres ) var pass = new Library.ShaderToy.EffectPass( mAudioContext, gl, precission: 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 ); pass.MakeHeader_Image(); pass.NewShader_Image(vs); var sw = Stopwatch.StartNew(); do { pass.Paint_Image( sw.ElapsedMilliseconds / 1000.0f, 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.. gl.flush(); await u.animate.async.@checked; } while (await Native.window.async.onframe); } ); }
// 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?"); }
/// <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\WebGL\ChromeWebGLExtensions\ChromeWebGLExtensions\Application.cs // http://link.springer.com/chapter/10.1007%2F978-3-319-02726-5_20 // roslyn broke worker support? // Uncaught TypeError: c._3BYABlqcAz6k53tGgDEanQ is not a function var gl = new WebGLRenderingContext(); // http://webglreport.com/ // unMaskedRenderer: getUnmaskedInfo(gl).renderer, //<th>Unmasked Renderer:</th> // <td><%= report.unMaskedRenderer %></td> var UNMASKED_RENDERER_WEBGL = ""; var WEBGL_debug_renderer_info = new { UNMASKED_RENDERER_WEBGL = 0x9246u }; // 02000509 ScriptCoreLib.Shared.BCLImplementation.System.Linq.__OrderedEnumerable`1 +<> c__DisplayClass0 //{ SourceMethod = Int32 < GetEnumerator > b__1(TSource, TSource) } // script: error JSC1000: unknown opcode brtrue.s at < GetEnumerator > b__1 + 0x002f var dbgRenderInfo = gl.getExtension("WEBGL_debug_renderer_info"); if (dbgRenderInfo != null) { // https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/ UNMASKED_RENDERER_WEBGL = (string)gl.getParameter(WEBGL_debug_renderer_info.UNMASKED_RENDERER_WEBGL); } new IHTMLButton { "do MD5" }.AttachToDocument().onclick += async a => { var data = "whats the hash for this?"; var z = await Task.Run( delegate { // 20140629 level1 scope sharing! var bytes = Encoding.UTF8.GetBytes(data); var s = Stopwatch.StartNew(); // { data = "{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 41 }" } // { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 1268 } // { i = 255, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 170 } // {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 245, ManagedThreadId = 10 }} // laptop {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 439, ManagedThreadId = 10 }} // on red server. how fast is the laptop? // laptop wont trust the server ssl? // certs are configured via certmgr.msc // after export and import the laptop should now be able to trust the ssl? var scope = new { data }; for (int i = 0; i < 0x1000; i++) { var hash = bytes.ToMD5Bytes(); var hex = hash.ToHexString(); //scope = new { data = new { i, hex, s.ElapsedMilliseconds, Thread.CurrentThread.ManagedThreadId, Environment.ProcessorCount }.ToString() }; scope = new { data = new { i, hex, s.ElapsedMilliseconds, Thread.CurrentThread.ManagedThreadId }.ToString() }; } return scope; } ); // show proof of work //a.Element.innerText = z.data; //Environment.OSVersion. var winver = Native.window.navigator.userAgent.SkipUntilOrEmpty("(Windows ").TakeUntilOrEmpty(")"); new IHTMLPre { // ProcessorCount allows to know if we are on our lite laptop or the server new { Environment.ProcessorCount, winver, UNMASKED_RENDERER_WEBGL, Native.window.navigator.userAgent, //Native.window.navigator.mem z.data } }.AttachToDocument(); // {{ ProcessorCount = 8, userAgent = Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 252, ManagedThreadId = 10 }} }} // red server 2008r2: // {{ ProcessorCount = 8, winver = NT 6.1; WOW64, UNMASKED_RENDERER_WEBGL = ANGLE (Intel(R) HD Graphics 4000 Direct3D11 vs_5_0 ps_5_0), userAgent = Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 255, ManagedThreadId = 10 }} }} // lenovo 8.1 battery // {{ ProcessorCount = 4, winver = NT 6.3; Win64; x64, UNMASKED_RENDERER_WEBGL = ANGLE (Intel(R) HD Graphics Family Direct3D11 vs_5_0 ps_5_0), userAgent = Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2275.2 Safari/537.36, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 383, ManagedThreadId = 10 }} }} // windows7 // {{ ProcessorCount = 4, winver = NT 6.1; Win64; x64, UNMASKED_RENDERER_WEBGL = ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0), userAgent = Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2280.2 Safari/537.36, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 453, ManagedThreadId = 10 }} }} // {{ ProcessorCount = 8, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 246, ManagedThreadId = 10 }} }} //{ { ProcessorCount = 8, data = { { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 240, ManagedThreadId = 11 } } } } //{ { ProcessorCount = 8, data = { { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 240, ManagedThreadId = 12 } } } } // high profile/ac mode //{ { ProcessorCount = 4, data = { { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 445, ManagedThreadId = 10 } } } } //{ { ProcessorCount = 4, data = { { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 426, ManagedThreadId = 11 } } } } //{ { ProcessorCount = 4, data = { { i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 422, ManagedThreadId = 12 } } } } // battery/no power // {{ ProcessorCount = 4, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 1253, ManagedThreadId = 13 }} }} // {{ ProcessorCount = 4, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 1350, ManagedThreadId = 14 }} }} // {{ ProcessorCount = 4, data = {{ i = 4095, hex = 4ea77972bc2c613b782ab9f17360b0db, ElapsedMilliseconds = 1550, ManagedThreadId = 15 }} }} }; }
public static string DetermineShaderPrecission(WebGLRenderingContext gl) { //new IHTMLPre { "enter DetermineShaderPrecission" }.AttachToDocument(); var h1 = "#ifdef GL_ES\n" + "precision highp float;\n" + "#endif\n"; var h2 = "#ifdef GL_ES\n" + "precision mediump float;\n" + "#endif\n"; var h3 = "#ifdef GL_ES\n" + "precision lowp float;\n" + "#endif\n"; var vstr = "void main() { gl_Position = vec4(1.0); }\n"; var fstr = "void main() { gl_FragColor = vec4(1.0); }\n"; if (CreateShader(gl, vstr, h1 + fstr, false).mSuccess == true) return h1; if (CreateShader(gl, vstr, h2 + fstr, false).mSuccess == true) return h2; if (CreateShader(gl, vstr, h3 + fstr, false).mSuccess == true) return h3; return ""; }
static bar initObject(WebGLRenderingContext gl, Action callback) { var data = new data { vertices = new float[] { }, indices = new ushort[] { }, uvs = new float[] { } }; createRectangle(2, data); var @object = new bar(); @object.vertex_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, @object.vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(data.vertices), gl.STATIC_DRAW); @object.index_buffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, @object.index_buffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(data.indices), gl.STATIC_DRAW); @object.texturecoord_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, @object.texturecoord_buffer); gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(data.uvs), gl.STATIC_DRAW); @object.n_elements = data.indices.Length; @object.t["texture1"] = loadTexture(gl, new texture1().src, callback); @object.t["texture2"] = loadTexture(gl, new texture2().src, callback); @object.t["texture3"] = loadTexture(gl, new texture3().src, callback); @object.t["texture4"] = loadTexture(gl, new texture4().src, callback); @object.t["texture5"] = loadTexture(gl, new texture5().src, callback); @object.t["texture6"] = loadTexture(gl, new texture6().src, callback); return @object; }
public static async void AttachToDocument(FragmentShader vs) { Native.body.style.margin = "0px"; Native.body.style.backgroundColor = "blue"; var mAudioContext = new AudioContext(); 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. \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; } Native.body.Clear(); Native.body.style.overflow = IStyle.OverflowEnum.hidden; 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 = 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 += ev => { mMouseOriX = ev.CursorX; mMouseOriY = c.height - ev.CursorY; mMousePosX = mMouseOriX; mMousePosY = mMouseOriY; ev.CaptureMouse(); }; c.onmousemove += ev => { if (ev.MouseButton == IEvent.MouseButtonEnum.Left) { mMousePosX = ev.CursorX; // X:\jsc.svn\examples\javascript\chrome\apps\WebGL\synergy\InputMouseByIq\InputMouseByIq\Shaders\Program.frag //mMousePosY = ev.CursorY; mMousePosY = c.height - ev.CursorY; } }; c.onmouseup += ev => { mMouseOriX = -Math.Abs(mMouseOriX); mMouseOriY = -Math.Abs(mMouseOriY); }; #endregion var mEffect = new ChromeShaderToyColumns.Library.ShaderToy.Effect( mAudioContext, gl, callback: delegate { new IHTMLPre { "at callback" }.AttachToDocument(); }, obj: null, forceMuted: false, forcePaused: false ); mEffect.mPasses[0].MakeHeader_Image(); mEffect.mPasses[0].NewShader_Image(vs); var sw = Stopwatch.StartNew(); do { mEffect.mPasses[0].Paint_Image( sw.ElapsedMilliseconds / 1000.0f, mMouseOriX, mMouseOriY, mMousePosX, mMousePosY ); // what does it do? gl.flush(); } 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) { var gl_viewportWidth = 500; var gl_viewportHeight = 500; var gl = new WebGLRenderingContext(); #region canvas var canvas = gl.canvas.AttachToDocument(); Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight); canvas.width = gl_viewportWidth; canvas.height = gl_viewportHeight; #endregion var h = 1f; var r1 = .5f; var r2 = .2f; var nPhi = 500; var prog = gl.createProgram(); #region createShader 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 shader; }; #endregion var vs = createShader(new GeometryVertexShader()); var fs = createShader(new GeometryFragmentShader()); gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog); gl.useProgram(prog); var pt = new IArray<float>(); var nt = new IArray<float>(); var Phi = 0.0; var dPhi = 2 * Math.PI / (nPhi - 1); var Nx = r1 - r2; var Ny = h; var N = (float)Math.Sqrt(Nx * Nx + Ny * Ny); Nx /= N; Ny /= N; for (var i = 0; i < nPhi; i++) { var cosPhi = Math.Cos(Phi); var sinPhi = Math.Sin(Phi); var cosPhi2 = Math.Cos(Phi + dPhi / 2); var sinPhi2 = Math.Sin(Phi + dPhi / 2); pt.push(-h / 2); pt.push((float)(cosPhi * r1)); pt.push((float)(sinPhi * r1)); // points nt.push(Nx); nt.push((float)(Ny * cosPhi)); nt.push((float)(Ny * sinPhi)); // normals pt.push(h / 2); pt.push((float)(cosPhi2 * r2)); pt.push((float)(sinPhi2 * r2)); // points nt.push(Nx); nt.push((float)(Ny * cosPhi2)); nt.push((float)(Ny * sinPhi2)); // normals Phi += dPhi; } var posLoc = gl.getAttribLocation(prog, "aPos"); gl.enableVertexAttribArray((uint)posLoc); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(pt.ToArray()), gl.STATIC_DRAW); gl.vertexAttribPointer((uint)posLoc, 3, gl.FLOAT, false, 0, 0); var normLoc = gl.getAttribLocation(prog, "aNorm"); gl.enableVertexAttribArray((uint)normLoc); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(nt), gl.STATIC_DRAW); gl.vertexAttribPointer((uint)normLoc, 3, gl.FLOAT, false, 0, 0); var prMatrix = new CanvasMatrix4(); gl.uniformMatrix4fv(gl.getUniformLocation(prog, "prMatrix"), false, new Float32Array(prMatrix.getAsArray())); var mvMatrix = new CanvasMatrix4(); var rotMat = new CanvasMatrix4(); rotMat.makeIdentity(); rotMat.rotate(-40, 0, 1, 0); var mvMatLoc = gl.getUniformLocation(prog, "mvMatrix"); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clearDepth(1.0f); gl.clearColor(0, 0, .5f, 1); var xOffs = 0; var yOffs = 0; var drag = 0; var xRot = 0; var yRot = 0; var transl = -1.5f; Action drawScene = delegate { gl.uniformMatrix4fv(gl.getUniformLocation(prog, "prMatrix"), false, new Float32Array(prMatrix.getAsArray())); gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); rotMat.rotate(xRot / 5, 1, 0, 0); rotMat.rotate(yRot / 5, 0, 1, 0); yRot = 0; xRot = 0; mvMatrix.load(rotMat); mvMatrix.translate(0, 0, transl); gl.uniformMatrix4fv(mvMatLoc, false, new Float32Array(mvMatrix.getAsArray())); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 2 * nPhi); gl.flush(); }; #region IsDisposed var IsDisposed = false; this.Dispose = delegate { if (IsDisposed) return; IsDisposed = true; canvas.Orphanize(); }; #endregion #region requestFullscreen Native.Document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.Document.body.requestFullscreen(); }; #endregion var c = 0; Native.window.onframe += delegate { if (IsDisposed) return; c++; xRot += 2; yRot += 3; Native.document.title = "" + c; drawScene(); //animate(); }; #region AtResize Action AtResize = delegate { gl_viewportWidth = Native.window.Width; gl_viewportHeight = Native.window.Height; prMatrix = new CanvasMatrix4(); prMatrix.perspective(45f, (f)gl_viewportWidth / (f)gl_viewportHeight, 1f, 100f); canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight); canvas.width = gl_viewportWidth; canvas.height = gl_viewportHeight; }; Native.window.onresize += e => { AtResize(); }; AtResize(); #endregion }
// http://social.msdn.microsoft.com/Forums/windows/en-US/e61f12f7-ee36-4a4e-8242-185cfcb644cb/is-there-a-3d-on-a-horizon-for-winforms-?forum=winformsdesigner // You can expect continued support for WinForms, but do not expect anything new to come from Microsoft. // They seem to be pushing toward a UI that works will with Desktop and Web applications. /// <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) { 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; var shaderProgram = gl.createProgram( new GeometryVertexShader(), new 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"); var mvMatrix = glMatrix.mat4.create(); var mvMatrixStack = new Stack<Float32Array>(); var pMatrix = glMatrix.mat4.create(); #region new in lesson 03 Action mvPushMatrix = delegate { var copy = glMatrix.mat4.create(); 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 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); var cubesize = 1.0f * 0.05f; 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, new Float32Array(vertices), gl.STATIC_DRAW); var cubeVertexPositionBuffer_itemSize = 3; var cubeVertexPositionBuffer_numItems = 6 * 6; var squareVertexColorBuffer = gl.createBuffer(); 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, new Float32Array(colors), gl.STATIC_DRAW); var cubeVertexColorBuffer_itemSize = 4; var cubeVertexColorBuffer_numItems = 24; var cubeVertexIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); var cubeVertexIndices = new UInt16[]{ 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 }; gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(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.0f; var rCubeDelta = 1.0f; #region animate 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; }; #endregion #region degToRad Func<float, float> degToRad = (degrees) => { return degrees * (f)Math.PI / 180f; }; #endregion var __pointer_x = 0; var __pointer_y = 0; canvas.onmousedown += delegate { canvas.requestPointerLock(); }; canvas.onmousemove += e => { if (Native.document.pointerLockElement == canvas) { __pointer_x += e.movementX; __pointer_y += e.movementY; } }; canvas.onmouseup += e => { Native.document.exitPointerLock(); }; var syncdata = new ApplicationWebService[0]; //this.x = 0; this.y = 0; var st = new Stopwatch(); st.Start(); xml = new XElement( "hi", new XAttribute("a", "can you see me?") ); Action sync = async delegate { while (true) { var local_syncdata = await onsyncframe(); onsyncframe_ElapsedMilliseconds = st.ElapsedMilliseconds; st.Restart(); syncframe++; Console.WriteLine(new { syncframe, local_syncdata.Length }); syncdata = local_syncdata; } }; sync(); #region drawScene Action drawScene = delegate { gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); glMatrix.mat4.perspective(45f, (float)gl_viewportWidth / (float)gl_viewportHeight, 0.1f, 100.0f, pMatrix); glMatrix.mat4.identity(mvMatrix); glMatrix.mat4.translate(mvMatrix, new float[] { 0f, 0.0f, -7.0f }); mvPushMatrix(); glMatrix.mat4.rotate(mvMatrix, degToRad(rWind), new float[] { 0f, 1f, 0f }); glMatrix.mat4.rotate(mvMatrix, __pointer_y * 0.01f, new float[] { 1f, 0, 0f }); glMatrix.mat4.rotate(mvMatrix, __pointer_x * 0.01f, new float[] { 0, 1f, 0f }); #region DrawFrameworkWingAtX Action<float, float> DrawFrameworkWingAtX = (WingX, WingY) => { #region draw center cube mvPushMatrix(); glMatrix.mat4.translate(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_SHORT, 0); mvPopMatrix(); #endregion }; #endregion foreach (var item in syncdata) { DrawFrameworkWingAtX(item.x, item.y); } mvPopMatrix(); #region draw cube on the right to remind where we started glMatrix.mat4.translate(mvMatrix, new float[] { (3.0f).ToInteractiveFloatDataGridView(), (2.0f).ToInteractiveFloatDataGridView(), (0.0f).ToInteractiveFloatDataGridView() }); mvPushMatrix(); glMatrix.mat4.rotate(mvMatrix, degToRad(rCube), new float[] { 1f, 1f, 1f }); 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_SHORT, 0); mvPopMatrix(); #endregion }; drawScene(); #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 tick Native.window.onframe += delegate { c++; Native.Document.title = new { c, syncframe }.ToString(); drawScene(); animate(); }; #endregion }
// samsung gearvr browser doesnt have webgl enabled yet // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151201/samsungbrowser // https://zproxy.wordpress.com/2015/07/04/gearvr-ovrmycubeworldndk/ /// <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) { // X:\jsc.svn\examples\java\android\vr\OVRMyCubeWorldNDK\OVRMyCubeWorldNDK\VrCubeWorld.Renderer.cs // works for IE11 //DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); //if (Native.window.parent != Native.window.self) //{ // // why stop there. negotiate our own title bar! // Native.document.body.style.backgroundColor = JSColor.Transparent; //} //else //{ Native.window.document.body.style.backgroundColor = JSColor.Black; Native.window.document.body.style.color = JSColor.Yellow; //} //page.PageContainer.style.color = Color.Blue; 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; #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 var shaderProgram = gl.createProgram( new GeometryVertexShader(), new 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"); // X:\jsc.svn\examples\java\android\vr\OVRMyCubeWorldNDK\OVRMyCubeWorldNDK\References\VrApi.ovrMatrix4f.cs // exports.mat4 = require("./gl-matrix/mat4.js"); // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix.js // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix/mat4.js // new glMatrix.ARRAY_TYPE(16); // https://github.com/toji/gl-matrix/blob/master/src/gl-matrix/common.js // Float32Array : Array 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 create = new Func<float[]>( () => new float[] { 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, } ) }; // should jsc default to Float32Array ? //var __mvMatrix = new float[] //{ // 1, 0, 0, 0, // 0, 1, 0, 0, // 0, 0, 1, 0, // 0, 0, 0, 1, //}; //var mvMatrix = glMatrix.mat4.create(); var mvMatrix = __mat4.create(); // for js we erased the generic type.. var mvMatrixStack = new Stack<float[]>(); // X:\jsc.svn\examples\javascript\WebGL\WebGLSpadeWarrior\WebGLSpadeWarrior\Shaders\GeometryVertexShader.cs var pMatrix = __mat4.create(); //var pMatrix = new ScriptCoreLib.GLSL.mat4(1); //var pMatrix = glMatrix.mat4.create(); #region mvMatrixScope Action mvPushMatrix = delegate { var copy = __mat4.create(); glMatrix.mat4.set(mvMatrix, copy); mvMatrixStack.Push(copy); }; Action mvPopMatrix = delegate { mvMatrix = mvMatrixStack.Pop(); }; Action<Action> mvMatrixScope = h => { mvPushMatrix(); h(); mvPopMatrix(); }; #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 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); var cubesize = 1.0f * 0.02f; 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, new Float32Array(vertices), gl.STATIC_DRAW); var cubeVertexPositionBuffer_itemSize = 3; var cubeVertexPositionBuffer_numItems = 36; // 216, 191, 18 #region colors1 var colors_orange = 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 }; var cubeVertexColorBuffer_orange = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_orange); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors_orange), gl.STATIC_DRAW); #endregion #region colors2 var colors2 = new[]{ 0.0f, 0.6f, 1.0f, 1.0f, // Front face 0.0f, 0.6f, 1.0f, 1.0f, // Front face 0.0f, 0.6f, 1.0f, 1.0f, // Front face 0.0f, 0.6f, 1.0f, 1.0f, // Front face 0.0f, 0.4f, 0.8f, 1.0f, // Back face 0.0f, 0.4f, 0.8f, 1.0f, // Back face 0.0f, 0.4f, 0.8f, 1.0f, // Back face 0.0f, 0.4f, 0.8f, 1.0f, // Back face 0.0f, 0.5f, 0.9f, 1.0f, // Top face 0.0f, 0.5f, 0.9f, 1.0f, // Top face 0.0f, 0.5f, 0.9f, 1.0f, // Top face 0.0f, 0.5f, 0.9f, 1.0f, // Top face 0.0f, 0.5f, 1.0f, 1.0f, // Bottom face 0.0f, 0.5f, 1.0f, 1.0f, // Bottom face 0.0f, 0.5f, 1.0f, 1.0f, // Bottom face 0.0f, 0.5f, 1.0f, 1.0f, // Bottom face 0.0f, 0.8f, 1.0f, 1.0f, // Right face 0.0f, 0.8f, 1.0f, 1.0f, // Right face 0.0f, 0.8f, 1.0f, 1.0f, // Right face 0.0f, 0.8f, 1.0f, 1.0f, // Right face 0.0f, 0.8f, 1.0f, 1.0f, // Left face 0.0f, 0.8f, 1.0f, 1.0f, // Left face 0.0f, 0.8f, 1.0f, 1.0f, // Left face 0.0f, 0.8f, 1.0f, 1.0f // Left face }; var cubeVertexColorBuffer2 = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer2); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors2), gl.STATIC_DRAW); #endregion #region colors3 var colors_green = new[]{ 0.0f, 1.0f, 0.0f, 1.0f, // Front face 0.0f, 1.0f, 0.0f, 1.0f, // Front face 0.0f, 1.0f, 0.0f, 1.0f, // Front face 0.0f, 1.0f, 0.0f, 1.0f, // Front face 0.0f, 0.4f, 0.0f, 1.0f, // Back face 0.0f, 0.4f, 0.0f, 1.0f, // Back face 0.0f, 0.4f, 0.0f, 1.0f, // Back face 0.0f, 0.4f, 0.0f, 1.0f, // Back face 0.0f, 0.5f, 0.0f, 1.0f, // Top face 0.0f, 0.5f, 0.0f, 1.0f, // Top face 0.0f, 0.5f, 0.0f, 1.0f, // Top face 0.0f, 0.5f, 0.0f, 1.0f, // Top face 0.0f, 0.7f, 0.0f, 1.0f, // Bottom face 0.0f, 0.7f, 0.0f, 1.0f, // Bottom face 0.0f, 0.7f, 0.0f, 1.0f, // Bottom face 0.0f, 0.7f, 0.0f, 1.0f, // Bottom face 0.0f, 0.8f, 0.0f, 1.0f, // Right face 0.0f, 0.8f, 0.0f, 1.0f, // Right face 0.0f, 0.8f, 0.0f, 1.0f, // Right face 0.0f, 0.8f, 0.0f, 1.0f, // Right face 0.0f, 0.9f, 0.0f, 1.0f, // Left face 0.0f, 0.9f, 0.0f, 1.0f, // Left face 0.0f, 0.9f, 0.0f, 1.0f, // Left face 0.0f, 0.9f, 0.0f, 1.0f // Left face }; var cubeVertexColorBuffer_green = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_green); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors_green), gl.STATIC_DRAW); #endregion #region colors_black var colors_black = new[]{ 0.0f, 0.0f, 0.0f, 1.0f, // Front face 0.0f, 0.0f, 0.0f, 1.0f, // Front face 0.0f, 0.0f, 0.0f, 1.0f, // Front face 0.0f, 0.0f, 0.0f, 1.0f, // Front face 0.0f, 0.0f, 0.0f, 1.0f, // Back face 0.0f, 0.0f, 0.0f, 1.0f, // Back face 0.0f, 0.0f, 0.0f, 1.0f, // Back face 0.0f, 0.0f, 0.0f, 1.0f, // Back face 0.0f, 0.0f, 0.0f, 1.0f, // Top face 0.0f, 0.0f, 0.0f, 1.0f, // Top face 0.0f, 0.0f, 0.0f, 1.0f, // Top face 0.0f, 0.0f, 0.0f, 1.0f, // Top face 0.0f, 0.0f, 0.0f, 1.0f, // Bottom face 0.0f, 0.0f, 0.0f, 1.0f, // Bottom face 0.0f, 0.0f, 0.0f, 1.0f, // Bottom face 0.0f, 0.0f, 0.0f, 1.0f, // Bottom face 0.0f, 0.0f, 0.0f, 1.0f, // Right face 0.0f, 0.0f, 0.0f, 1.0f, // Right face 0.0f, 0.0f, 0.0f, 1.0f, // Right face 0.0f, 0.0f, 0.0f, 1.0f, // Right face 0.0f, 0.0f, 0.0f, 1.0f, // Left face 0.0f, 0.0f, 0.0f, 1.0f, // Left face 0.0f, 0.0f, 0.0f, 1.0f, // Left face 0.0f, 0.0f, 0.0f, 1.0f // Left face }; var cubeVertexColorBuffer_black = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_black); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors_black), gl.STATIC_DRAW); #endregion var cubeVertexColorBuffer_itemSize = 4; var cubeVertexColorBuffer_numItems = 24; var cubeVertexIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); var cubeVertexIndices = new UInt16[]{ 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 }; gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW); var cubeVertexIndexBuffer_itemSize = 1; var cubeVertexIndexBuffer_numItems = 36; #endregion #endregion //gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f); gl.clearColor(0.0f, 0.0f, 0.0f, 0.0f); gl.enable(gl.DEPTH_TEST); var IsWalking = false; var WalkMultiplier = 0.0f; var ego_x = 0f; var ego_y = 0f; var ego_z = 0f; var ego_za = 0f; var rCube = 0f; var raCube = 0f; var lastTime = 0L; Action animate = delegate { var timeNow = new IDate().getTime(); if (lastTime != 0) { var elapsed = timeNow - lastTime; var u = ego_z + ego_za * (elapsed) / 1000.0f; if (u < 0) ego_z = (float)Math.Min(ego_z, 0); else ego_z = u; ego_za -= 3.2f * (elapsed) / 1000.0f; raCube += (75 * elapsed) / 1000.0f; } lastTime = timeNow; }; Func<float, float> degToRad = (degrees) => { return degrees * (f)Math.PI / 180f; }; var c = 0; #region drawScene Action drawScene = delegate { if (ego_x < 0) ego_x = 0; if (ego_y > 0) ego_y = 0; gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); glMatrix.mat4.perspective(45f, (float)gl_viewportWidth / (float)gl_viewportHeight, 0.1f, 100.0f, pMatrix); glMatrix.mat4.identity(mvMatrix); #region vertex gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); gl.vertexAttribPointer((uint)shaderProgram_vertexPositionAttribute, cubeVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion //__glMatrix.mat4.rotate(mvMatrix, degToRad(-33), new float[] { 0f, 1f, 0f }); //__glMatrix.mat4.rotate(mvMatrix, rCube, new float[] { 1f, 0f, 0f }); #region OriginalCubeAt Action<float, float, float> OriginalCubeAt = (x, y, z) => { mvMatrixScope( delegate { glMatrix.mat4.translate(mvMatrix, new float[] { x, y, z }); glMatrix.mat4.rotate(mvMatrix, degToRad(raCube), new float[] { 1f, 1f, 1f }); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, cubeVertexPositionBuffer_numItems, gl.UNSIGNED_SHORT, 0); } ); }; #endregion mvMatrixScope( delegate { glMatrix.mat4.translate(mvMatrix, new float[] { - 1.5f, 0, - 7f}); glMatrix.mat4.rotate(mvMatrix, degToRad(-80), new float[] { 1f, 0f, 0f }); #region grid #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_green); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion var GridZoom = 0.3f; Action<float> WriteYLine = x => { for (int i = -12; i < -1; i++) { OriginalCubeAt(x * GridZoom, (i) * GridZoom, 0); } }; for (int i = 1; i < 12; i++) WriteYLine(i); #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_orange); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion for (int i = 1; i < 12; i++) OriginalCubeAt(i * GridZoom, 0, 0); for (int i = -12; i < 0; i++) OriginalCubeAt(0, (i) * GridZoom, 0); #endregion #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer2); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion { var _y = (float)Math.Cos(raCube * 0.05f) * 0.1f; var _x = (float)Math.Sin(raCube * 0.05f) * 0.1f; OriginalCubeAt(_x, _y, 0); } { var _y = (float)Math.Sin(rCube) * 0.2f; var _x = (float)Math.Cos(rCube) * 0.2f; OriginalCubeAt(_x, _y, 0); } mvMatrixScope( delegate { // where are we glMatrix.mat4.translate(mvMatrix, new float[] { ego_x, ego_y, ego_z }); // rotate all of it //__glMatrix.mat4.rotate(mvMatrix, degToRad(-45), new float[] { 1f, 0f, 0f }); // which way are we looking at? glMatrix.mat4.rotate(mvMatrix, rCube, new float[] { 0f, 0f, 1f }); #region cube Action<float, float, float> cube = (x, y, z) => { mvPushMatrix(); glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * x, 2 * cubesize * y, 2 * cubesize * z}); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); setMatrixUniforms(); gl.drawElements(gl.TRIANGLES, cubeVertexPositionBuffer_numItems, gl.UNSIGNED_SHORT, 0); mvPopMatrix(); }; #endregion cube #region draw Action<int, int, int> rect = (ix, iy, z) => { for (int y = 0; y < ix; y++) { for (int x = 0; x < iy; x++) { cube(x, y, z); } } }; #endregion draw #region leg Action<int, float, float> leg = (y, hiprotation, kneerotation) => { mvPushMatrix(); #region hiprotation glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 2, 2 * cubesize * 0, 2 * cubesize * 11}); glMatrix.mat4.rotate(mvMatrix, degToRad(hiprotation), new float[] { 0f, 1f, 0f }); glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * -2, 2 * cubesize * 0, 2 * cubesize * -11}); #endregion glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 1, 2 * cubesize * y, 2 * cubesize * 0}); mvPushMatrix(); #region kneerotation glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 1, 2 * cubesize * 0, 2 * cubesize * 6f}); glMatrix.mat4.rotate(mvMatrix, degToRad(kneerotation), new float[] { 0f, 1f, 0f }); glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * -1, 2 * cubesize * 0, 2 * cubesize * -6f}); #endregion #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_orange); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion #region lower leg rect(3, 5, 0); rect(3, 5, 1); rect(3, 5, 2); rect(3, 3, 3); #endregion #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer2); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion rect(3, 3, 4); rect(3, 3, 5); rect(3, 3, 6); mvPopMatrix(); #region upper leg mvPushMatrix(); glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 1, 2 * cubesize * 0, 2 * cubesize * 0}); rect(3, 3, 7); rect(3, 3, 8); rect(3, 3, 9); mvPopMatrix(); #endregion #region hips rect(3, 4, 10); //rect(3, 4, 11); #endregion mvPopMatrix(); }; #endregion var seed = (raCube * WalkMultiplier * 16); #region animated_leg Action<int, int> animated_leg = (seed_offset, x) => { var seed_180 = (float)((seed + seed_offset) % 180f); var left_hip = 30f; var left_knee = 0f; if (ego_z < 0) { // crouch left_hip = -66; left_knee = left_hip * -2; } else if (ego_z > 0) { // crouch left_hip = 10; left_knee = 10; } else if (!IsWalking) { left_hip = 0; left_knee = 0; } else { left_hip = seed_180; if (left_hip > 90) { left_hip = 180 - left_hip; // -60 should be 0 - front // 0 should be 60 // 30 should be 0 - back var v = (90 - left_hip) - 70; if (v < 0) left_knee = 70 + v; else if (v == 0) left_knee = 70; else if (v > 0) left_knee = (20 - v) * (70 / 20); //page.Data1.innerText = "" + new { left_hip, v, left_knee }; } else { } left_hip -= 45; } leg(x, left_hip, left_knee); }; #endregion animated_leg(0, -2); animated_leg(90, 3); #region body mvMatrixScope( delegate { glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 1, 2 * cubesize * -2, 2 * cubesize * 11}); rect(8, 4, 0); rect(8, 4, 1); rect(8, 4, 2); rect(8, 4, 3); rect(8, 4, 4); rect(8, 4, 5); rect(8, 4, 6); rect(8, 4, 7); rect(8, 4, 8); mvMatrixScope( delegate { glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 0, 2 * cubesize * -2, 2 * cubesize * 7}); rect(2, 10, 0); rect(2, 10, 1); } ); mvMatrixScope( delegate { #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_orange); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 10, 2 * cubesize * -2, 2 * cubesize * 7}); rect(2, 2, 0); rect(2, 2, 1); #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer2); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion } ); mvMatrixScope( delegate { #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_orange); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 10, 2 * cubesize * 8, 2 * cubesize * 7}); rect(2, 2, 0); rect(2, 2, 1); #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer2); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion } ); mvMatrixScope( delegate { glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 0, 2 * cubesize * 8, 2 * cubesize * 7}); rect(2, 10, 0); rect(2, 10, 1); } ); } ); #endregion #region head mvMatrixScope( delegate { glMatrix.mat4.translate(mvMatrix, new float[] { 2 * cubesize * 0, 2 * cubesize * -1, 2 * cubesize * 20}); #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_black); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion cube(5, 4, 2); cube(5, 1, 2); cube(3, 0, 0); cube(3, 0, 1); cube(3, 0, 2); cube(3, 5, 0); cube(3, 5, 1); cube(3, 5, 2); #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer_orange); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion rect(6, 3, 0); rect(6, 3, 1); cube(4, 0, 2); cube(5, 0, 2); cube(5, 2, 2); cube(5, 3, 2); cube(5, 5, 2); cube(4, 5, 2); cube(4, 0, 1); cube(5, 0, 1); cube(5, 1, 1); cube(5, 2, 1); cube(5, 3, 1); cube(5, 4, 1); cube(5, 5, 1); cube(4, 5, 1); cube(4, 0, 0); cube(5, 0, 0); cube(5, 1, 0); cube(5, 2, 0); cube(5, 3, 0); cube(5, 4, 0); cube(5, 5, 0); cube(4, 5, 0); //rect(6, 2, 2); #region color gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer2); gl.vertexAttribPointer((uint)shaderProgram_vertexColorAttribute, cubeVertexColorBuffer_itemSize, gl.FLOAT, false, 0, 0); #endregion // 3 or 3?? :) rect(6, 3, 2); rect(6, 6, 3); rect(6, 6, 4); rect(6, 6, 5); } ); #endregion } ); } ); }; drawScene(); #endregion Native.window.onframe += delegate { c++; Native.document.title = "" + c + " " + (rCube) + " " + ego_z + " " + ego_za; drawScene(); animate(); }; #region onkeyup Native.document.onkeyup += (e) => { //Native.Document.title = "" + new { e.KeyCode }; if (e.KeyCode == 17) { ego_z = 0; } if (e.KeyCode == 32) { ego_z = 0; ego_za = 2; } if (e.KeyCode == 38) { IsWalking = false; } if (e.KeyCode == 40) { IsWalking = false; } }; #endregion #region onkeydown Native.document.onkeydown += (e) => { // see also: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes e.preventDefault(); #region turnspeed var turnspeed = 0.05f; if (e.KeyCode == 37) { // left rCube += turnspeed; } if (e.KeyCode == 65) { // left rCube += turnspeed; } if (e.KeyCode == 39) { rCube -= turnspeed; // right } if (e.KeyCode == 68) { rCube -= turnspeed; // right } #endregion if (e.KeyCode == 17) { ego_z = -cubesize * 6; } if (e.KeyCode == 32) { ego_z = -cubesize * 6; } if (ego_z > 0) { // not on ground. cant walk :) } else { if (e.KeyCode == 38) { IsWalking = true; // mat aint working .. if (!e.shiftKey) { WalkMultiplier = 0.04f; } else { WalkMultiplier = 0.02f; } ego_y += (float)Math.Sin(rCube) * WalkMultiplier; ego_x += (float)Math.Cos(rCube) * WalkMultiplier; } if (e.KeyCode == 40) { IsWalking = true; WalkMultiplier = 0.02f; ego_y -= (float)Math.Sin(rCube) * WalkMultiplier; ego_x -= (float)Math.Cos(rCube) * WalkMultiplier; } } }; #endregion //#region requestFullscreen //Native.document.body.ondblclick += // delegate // { // if (IsDisposed) // return; // // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ // Native.document.body.requestFullscreen(); // }; //#endregion //new IHTMLAnchor { "drag me to my.jsc-solutions.net" }.AttachToDocument().With( // dragme => // { // dragme.style.position = IStyle.PositionEnum.@fixed; // dragme.style.left = "1em"; // dragme.style.bottom = "1em"; // dragme.style.color = "yellow"; // dragme.AllowToDragAsApplicationPackage(); // } //); }
// 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); } ); }
// 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); } ); }