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);
}
);
}
