void InitializeContent(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 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
#region programs
var programs =
new[]
{
new
{
vs = (FragmentShader)new Shaders.PerFragmentLightingFragmentShader(),
fs = (VertexShader)new Shaders.PerFragmentLightingVertexShader()
},
}.Select(
p =>
{
var vs = createShader(p.vs);
var fs = createShader(p.fs);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vs);
gl.attachShader(shaderProgram, fs);
gl.linkProgram(shaderProgram);
var vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray((uint)vertexPositionAttribute);
var vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
gl.enableVertexAttribArray((uint)vertexNormalAttribute);
var textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray((uint)textureCoordAttribute);
return new
{
program = shaderProgram,
vertexPositionAttribute,
vertexNormalAttribute,
textureCoordAttribute,
pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"),
mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"),
nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix"),
samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"),
materialAmbientColorUniform = gl.getUniformLocation(shaderProgram, "uMaterialAmbientColor"),
materialDiffuseColorUniform = gl.getUniformLocation(shaderProgram, "uMaterialDiffuseColor"),
materialSpecularColorUniform = gl.getUniformLocation(shaderProgram, "uMaterialSpecularColor"),
materialShininessUniform = gl.getUniformLocation(shaderProgram, "uMaterialShininess"),
materialEmissiveColorUniform = gl.getUniformLocation(shaderProgram, "uMaterialEmissiveColor"),
showSpecularHighlightsUniform = gl.getUniformLocation(shaderProgram, "uShowSpecularHighlights"),
useTexturesUniform = gl.getUniformLocation(shaderProgram, "uUseTextures"),
ambientLightingColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientLightingColor"),
pointLightingLocationUniform = gl.getUniformLocation(shaderProgram, "uPointLightingLocation"),
pointLightingSpecularColorUniform = gl.getUniformLocation(shaderProgram, "uPointLightingSpecularColor"),
pointLightingDiffuseColorUniform = gl.getUniformLocation(shaderProgram, "uPointLightingDiffuseColor"),
};
}
).ToArray();
#endregion
var currentProgram = programs.First();
var mvMatrix = glMatrix.mat4.create();
var mvMatrixStack = new Stack<Float32Array>();
var pMatrix = glMatrix.mat4.create();
#region mvPushMatrix
Action mvPushMatrix = delegate
{
var copy = glMatrix.mat4.create();
glMatrix.mat4.set(mvMatrix, copy);
mvMatrixStack.Push(copy);
};
#endregion
#region mvPopMatrix
Action mvPopMatrix = delegate
{
mvMatrix = mvMatrixStack.Pop();
};
#endregion
#region degToRad
Func<float, float> degToRad = (degrees) =>
{
return degrees * (f)Math.PI / 180f;
};
#endregion
#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
// await crate
new HTML.Images.FromAssets.crate().InvokeOnComplete(
crate =>
// await moon
new HTML.Images.FromAssets.moon().InvokeOnComplete(
moon =>
{
#region setMatrixUniforms
Action setMatrixUniforms =
delegate
{
#region [uniform] mat4 uPMatrix <- pMatrix
gl.uniformMatrix4fv(currentProgram.pMatrixUniform, false, pMatrix);
#endregion
#region [uniform] mat4 uMVMatrix <- mvMatrix
gl.uniformMatrix4fv(currentProgram.mvMatrixUniform, false, mvMatrix);
#endregion
var normalMatrix = glMatrix.mat3.create();
glMatrix.mat4.toInverseMat3(mvMatrix, normalMatrix);
glMatrix.mat3.transpose(normalMatrix);
#region [uniform] mat3 uNMatrix <- normalMatrix
gl.uniformMatrix3fv(currentProgram.nMatrixUniform, false, normalMatrix);
#endregion
};
#endregion
#region handleLoadedTexture
Action<WebGLTexture, IHTMLImage> handleLoadedTexture = (texture, texture_image) =>
{
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture_image);
gl.texParameteri((uint)gl.TEXTURE_2D, (uint)gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR);
gl.texParameteri((uint)gl.TEXTURE_2D, (uint)gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR_MIPMAP_NEAREST);
// INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
};
#endregion
var crateTexture = gl.createTexture();
handleLoadedTexture(crateTexture, crate);
var moonTexture = gl.createTexture();
handleLoadedTexture(moonTexture, moon);
#region initTextureFramebuffer
var rttFramebuffer = new WebGLFramebuffer(gl);
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
// generateMipmap: level 0 not power of 2 or not all the same size
//var rttFramebuffer_width = canvas.width;
var rttFramebuffer_width = 512;
var rttFramebuffer_height = 512;
var rttTexture = new WebGLTexture(gl);
gl.bindTexture(gl.TEXTURE_2D, rttTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer_width, rttFramebuffer_height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
var renderbuffer = new WebGLRenderbuffer(gl);
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer_width, rttFramebuffer_height);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
#endregion
#region initBuffers
var cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
var vertices = new f[]{
// Front 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,
// Back 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,
// Top 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,
// Bottom 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,
// Right 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,
// 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 = 24;
var cubeVertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
var vertexNormals = new f[]{
// Front face
0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f,
// Back face
0.0f, 0.0f, -1.0f,
0.0f, 0.0f, -1.0f,
0.0f, 0.0f, -1.0f,
0.0f, 0.0f, -1.0f,
// Top face
0.0f, 1.0f, 0.0f,
0.0f, 1.0f, 0.0f,
0.0f, 1.0f, 0.0f,
0.0f, 1.0f, 0.0f,
// Bottom face
0.0f, -1.0f, 0.0f,
0.0f, -1.0f, 0.0f,
0.0f, -1.0f, 0.0f,
0.0f, -1.0f, 0.0f,
// Right face
1.0f, 0.0f, 0.0f,
1.0f, 0.0f, 0.0f,
1.0f, 0.0f, 0.0f,
1.0f, 0.0f, 0.0f,
// Left face
-1.0f, 0.0f, 0.0f,
-1.0f, 0.0f, 0.0f,
-1.0f, 0.0f, 0.0f,
-1.0f, 0.0f, 0.0f,
};
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
var cubeVertexNormalBuffer_itemSize = 3;
var cubeVertexNormalBuffer_numItems = 24;
var cubeVertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
var textureCoords = new f[]{
// 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 ushort[]{
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;
var latitudeBands = 30;
var longitudeBands = 30;
var radius = 1;
var vertexPositionData = new List<f>();
var normalData = new List<f>();
var textureCoordData = new List<f>();
for (var latNumber = 0; latNumber <= latitudeBands; latNumber++)
{
var theta = latNumber * Math.PI / latitudeBands;
var sinTheta = (f)Math.Sin(theta);
var cosTheta = (f)Math.Cos(theta);
for (var longNumber = 0; longNumber <= longitudeBands; longNumber++)
{
var phi = longNumber * 2 * Math.PI / longitudeBands;
var sinPhi = (f)Math.Sin(phi);
var cosPhi = (f)Math.Cos(phi);
var x = cosPhi * sinTheta;
var y = cosTheta;
var z = sinPhi * sinTheta;
var u = 1 - (longNumber / longitudeBands);
var v = 1 - (latNumber / latitudeBands);
normalData.Add(x);
normalData.Add(y);
normalData.Add(z);
textureCoordData.Add(u);
textureCoordData.Add(v);
vertexPositionData.Add(radius * x);
vertexPositionData.Add(radius * y);
vertexPositionData.Add(radius * z);
}
}
var indexData = new List<ushort>();
for (var latNumber = 0; latNumber < latitudeBands; latNumber++)
{
for (var longNumber = 0; longNumber < longitudeBands; longNumber++)
{
var first = (latNumber * (longitudeBands + 1)) + longNumber;
var second = first + longitudeBands + 1;
indexData.Add((ushort)(first));
indexData.Add((ushort)(second));
indexData.Add((ushort)(first + 1));
indexData.Add((ushort)(second));
indexData.Add((ushort)(second + 1));
indexData.Add((ushort)(first + 1));
}
}
var moonVertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData.ToArray()), gl.STATIC_DRAW);
var moonVertexNormalBuffer_itemSize = 3;
var moonVertexNormalBuffer_numItems = normalData.Count / 3;
var moonVertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData.ToArray()), gl.STATIC_DRAW);
var moonVertexTextureCoordBuffer_itemSize = 2;
var moonVertexTextureCoordBuffer_numItems = textureCoordData.Count / 2;
var moonVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData.ToArray()), gl.STATIC_DRAW);
var moonVertexPositionBuffer_itemSize = 3;
var moonVertexPositionBuffer_numItems = vertexPositionData.Count / 3;
var moonVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData.ToArray()), gl.STREAM_DRAW);
var moonVertexIndexBuffer_itemSize = 1;
var moonVertexIndexBuffer_numItems = indexData.Count;
var laptopScreenVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, laptopScreenVertexPositionBuffer);
vertices = new[]{
0.580687f, 0.659f, 0.813106f,
-0.580687f, 0.659f, 0.813107f,
0.580687f, 0.472f, 0.113121f,
-0.580687f, 0.472f, 0.113121f,
};
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
var laptopScreenVertexPositionBuffer_itemSize = 3;
var laptopScreenVertexPositionBuffer_numItems = 4;
var laptopScreenVertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, laptopScreenVertexNormalBuffer);
vertexNormals = new f[]{
0.000000f, -0.965926f, 0.258819f,
0.000000f, -0.965926f, 0.258819f,
0.000000f, -0.965926f, 0.258819f,
0.000000f, -0.965926f, 0.258819f,
};
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
var laptopScreenVertexNormalBuffer_itemSize = 3;
var laptopScreenVertexNormalBuffer_numItems = 4;
var laptopScreenVertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, laptopScreenVertexTextureCoordBuffer);
textureCoords = new f[]{
1.0f, 1.0f,
0.0f, 1.0f,
1.0f, 0.0f,
0.0f, 0.0f,
};
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
var laptopScreenVertexTextureCoordBuffer_itemSize = 2;
var laptopScreenVertexTextureCoordBuffer_numItems = 4;
#endregion
#region handleLoadedLaptop
var laptopData = macbook;
var laptopVertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, laptopVertexNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(laptopData.vertexNormals), gl.STATIC_DRAW);
var laptopVertexNormalBuffer_itemSize = 3;
var laptopVertexNormalBuffer_numItems = laptopData.vertexNormals.Length / 3;
var laptopVertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, laptopVertexTextureCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(laptopData.vertexTextureCoords), gl.STATIC_DRAW);
var laptopVertexTextureCoordBuffer_itemSize = 2;
var laptopVertexTextureCoordBuffer_numItems = laptopData.vertexTextureCoords.Length / 2;
var laptopVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, laptopVertexPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(laptopData.vertexPositions), gl.STATIC_DRAW);
var laptopVertexPositionBuffer_itemSize = 3;
var laptopVertexPositionBuffer_numItems = laptopData.vertexPositions.Length / 3;
var laptopVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, laptopVertexIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(laptopData.indices), gl.STREAM_DRAW);
var laptopVertexIndexBuffer_itemSize = 1;
var laptopVertexIndexBuffer_numItems = laptopData.indices.Length;
#endregion
gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f);
gl.enable(gl.DEPTH_TEST);
var moonAngle = 180f;
var cubeAngle = 0f;
var laptopAngle = 0f;
var lastTime = 0L;
var laptopScreenAspectRatio = 1.66f;
//Func<string, f> parseFloat = Convert.ToSingle;
Func<string, f> parseFloat = x => float.Parse(x);
var shaderProgram = currentProgram;
#region drawSceneOnLaptopScreen
Action drawSceneOnLaptopScreen =
delegate
{
gl.viewport(0, 0, rttFramebuffer_width, rttFramebuffer_height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
glMatrix.mat4.perspective(45, laptopScreenAspectRatio, 0.1f, 100.0f, pMatrix);
gl.uniform1i(shaderProgram.showSpecularHighlightsUniform, Convert.ToInt32(false));
gl.uniform3f(shaderProgram.ambientLightingColorUniform, 0.2f, 0.2f, 0.2f);
gl.uniform3f(shaderProgram.pointLightingLocationUniform, 0, 0, -5);
gl.uniform3f(shaderProgram.pointLightingDiffuseColorUniform, 0.8f, 0.8f, 0.8f);
gl.uniform1i(shaderProgram.showSpecularHighlightsUniform, Convert.ToInt32(false));
gl.uniform1i(shaderProgram.useTexturesUniform, Convert.ToInt32(true));
gl.uniform3f(shaderProgram.materialAmbientColorUniform, 1.0f, 1.0f, 1.0f);
gl.uniform3f(shaderProgram.materialDiffuseColorUniform, 1.0f, 1.0f, 1.0f);
gl.uniform3f(shaderProgram.materialSpecularColorUniform, 0.0f, 0.0f, 0.0f);
gl.uniform1f(shaderProgram.materialShininessUniform, 0);
gl.uniform3f(shaderProgram.materialEmissiveColorUniform, 0.0f, 0.0f, 0.0f);
glMatrix.mat4.identity(mvMatrix);
glMatrix.mat4.translate(mvMatrix, new f[] { 0, 0, -5 });
glMatrix.mat4.rotate(mvMatrix, degToRad(30), new f[] { 1, 0, 0 });
mvPushMatrix();
glMatrix.mat4.rotate(mvMatrix, degToRad(moonAngle), new f[] { 0, 1, 0 });
glMatrix.mat4.translate(mvMatrix, new f[] { 2, 0, 0 });
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, moonTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexPositionAttribute, moonVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
gl.vertexAttribPointer((uint)shaderProgram.textureCoordAttribute, moonVertexTextureCoordBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexNormalAttribute, moonVertexNormalBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer_numItems, gl.UNSIGNED_SHORT, 0);
mvPopMatrix();
mvPushMatrix();
glMatrix.mat4.rotate(mvMatrix, degToRad(cubeAngle), new f[] { 0, 1, 0 });
glMatrix.mat4.translate(mvMatrix, new f[] { 1.25f, 0, 0 });
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexNormalAttribute, cubeVertexNormalBuffer_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, crateTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer_numItems, gl.UNSIGNED_SHORT, 0);
mvPopMatrix();
gl.bindTexture(gl.TEXTURE_2D, rttTexture);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
};
#endregion
//var pass0frag = new ChromeShaderToyColumns.Shaders.ProgramFragmentShader();
//var pass = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
// gl: gl,
// precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl),
// supportDerivatives: gl.getExtension("OES_standard_derivatives") != null
//);
//pass.MakeHeader_Image();
//pass.NewShader_Image(pass0frag);
var sw = Stopwatch.StartNew();
Native.window.onframe += delegate
{
if (IsDisposed)
return;
var timeNow = new IDate().getTime();
if (lastTime != 0)
{
var elapsed = timeNow - lastTime;
moonAngle += 0.05f * elapsed;
cubeAngle += 0.05f * elapsed;
laptopAngle -= 0.005f * elapsed;
}
lastTime = timeNow;
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150820
#region FRAMEBUFFER
gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
// http://stackoverflow.com/questions/20362023/webgl-why-does-transparent-canvas-show-clearcolor-color-component-when-alpha-is
gl.clearColor(1, 1, 0, 0);
gl.viewport(0, 0, rttFramebuffer_width, rttFramebuffer_height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// i can see only yellow. why?
drawSceneOnLaptopScreen();
//// glDrawArrays: attempt to render with no buffer attached to enabled attribute 1
//pass.Paint_Image(
// sw.ElapsedMilliseconds / 1000.0f,
// 0,
// 0,
// 0,
// 0,
// // gl_FragCoord
// // cannot be scaled, and can be referenced directly.
// // need another way to scale
// zoom: 1.0f
//);
//gl.flush();
// INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size
gl.bindTexture(gl.TEXTURE_2D, rttTexture);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
#endregion
gl.useProgram(shaderProgram.program);
gl.viewport(0, 0, gl_viewportWidth, gl_viewportHeight);
gl.clearColor(0, 0, 1, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
glMatrix.mat4.perspective(45, gl_viewportWidth / gl_viewportHeight, 0.1f, 100.0f, pMatrix);
glMatrix.mat4.identity(mvMatrix);
mvPushMatrix();
glMatrix.mat4.translate(mvMatrix,
new f[]{
0, -0.4f,
(float)Math.Min(0,
-2.2f
+ __pointer_y * 0.01)
}
);
if (__pointer_x != 0)
laptopAngle = __pointer_x + 0.01f;
glMatrix.mat4.rotate(mvMatrix, degToRad(laptopAngle), new f[] { 0, 1, 0 });
glMatrix.mat4.rotate(mvMatrix, degToRad(-90), new f[] { 1, 0, 0 });
//glMatrix.mat4.rotate(mvMatrix, __pointer_y * 0.01f, 0, 1, 0);
//glMatrix.mat4.rotate(mvMatrix, __pointer_x * 0.01f, 1, 0, 0);
gl.uniform1i(shaderProgram.showSpecularHighlightsUniform, Convert.ToInt32(true));
gl.uniform3f(shaderProgram.pointLightingLocationUniform, -1, 2, -1);
gl.uniform3f(shaderProgram.ambientLightingColorUniform, 0.2f, 0.2f, 0.2f);
gl.uniform3f(shaderProgram.pointLightingDiffuseColorUniform, 0.8f, 0.8f, 0.8f);
gl.uniform3f(shaderProgram.pointLightingSpecularColorUniform, 0.8f, 0.8f, 0.8f);
// The laptop body is quite shiny and has no texture. It reflects lots of specular light
gl.uniform3f(shaderProgram.materialAmbientColorUniform, 1.0f, 1.0f, 1.0f);
gl.uniform3f(shaderProgram.materialDiffuseColorUniform, 1.0f, 1.0f, 1.0f);
gl.uniform3f(shaderProgram.materialSpecularColorUniform, 1.5f, 1.5f, 1.5f);
gl.uniform1f(shaderProgram.materialShininessUniform, 5);
gl.uniform3f(shaderProgram.materialEmissiveColorUniform, 0.0f, 0.0f, 0.0f);
gl.uniform1i(shaderProgram.useTexturesUniform, Convert.ToInt32(false));
//if (laptopVertexPositionBuffer) {
gl.bindBuffer(gl.ARRAY_BUFFER, laptopVertexPositionBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexPositionAttribute, laptopVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, laptopVertexTextureCoordBuffer);
gl.vertexAttribPointer((uint)shaderProgram.textureCoordAttribute, laptopVertexTextureCoordBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, laptopVertexNormalBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexNormalAttribute, laptopVertexNormalBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, laptopVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, laptopVertexIndexBuffer_numItems, gl.UNSIGNED_SHORT, 0);
//}
gl.uniform3f(shaderProgram.materialAmbientColorUniform, 0.0f, 0.0f, 0.0f);
gl.uniform3f(shaderProgram.materialDiffuseColorUniform, 0.0f, 0.0f, 0.0f);
gl.uniform3f(shaderProgram.materialSpecularColorUniform, 0.5f, 0.5f, 0.5f);
gl.uniform1f(shaderProgram.materialShininessUniform, 20);
gl.uniform3f(shaderProgram.materialEmissiveColorUniform, 1.5f, 1.5f, 1.5f);
gl.uniform1i(shaderProgram.useTexturesUniform, Convert.ToInt32(true));
gl.bindBuffer(gl.ARRAY_BUFFER, laptopScreenVertexPositionBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexPositionAttribute, laptopScreenVertexPositionBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, laptopScreenVertexNormalBuffer);
gl.vertexAttribPointer((uint)shaderProgram.vertexNormalAttribute, laptopScreenVertexNormalBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, laptopScreenVertexTextureCoordBuffer);
gl.vertexAttribPointer((uint)shaderProgram.textureCoordAttribute, laptopScreenVertexTextureCoordBuffer_itemSize, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, rttTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, laptopScreenVertexPositionBuffer_numItems);
mvPopMatrix();
// first frame only
IsDisposed = true;
};
}
)
);
}
/// <summary>
/// This is a javascript application.
/// </summary>
/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
public Application(IDefault page = null)
{
#region += Launched chrome.app.window
//Error CS0656 Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' ChromeWebGLFrameBufferToSquare X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeWebGLFrameBufferToSquare\ChromeWebGLFrameBufferToSquare\Application.cs 51
dynamic self = Native.self;
dynamic self_chrome = self.chrome;
object self_chrome_socket = self_chrome.socket;
if (self_chrome_socket != null)
{
if (!(Native.window.opener == null && Native.window.parent == Native.window.self))
{
Console.WriteLine("chrome.app.window.create, is that you?");
// pass thru
}
else
{
// should jsc send a copresence udp message?
chrome.runtime.UpdateAvailable += delegate
{
new chrome.Notification(title: "UpdateAvailable");
};
chrome.app.runtime.Launched += async delegate
{
// 0:12094ms chrome.app.window.create {{ href = chrome-extension://aemlnmcokphbneegoefdckonejmknohh/_generated_background_page.html }}
Console.WriteLine("chrome.app.window.create " + new { Native.document.location.href });
new chrome.Notification(title: "ChromeUDPSendAsync");
var xappwindow = await chrome.app.window.create(
Native.document.location.pathname, options: null
);
//xappwindow.setAlwaysOnTop
xappwindow.show();
await xappwindow.contentWindow.async.onload;
Console.WriteLine("chrome.app.window loaded!");
};
return;
}
}
#endregion
//Z:\jsc.svn\examples\javascript\WebGLLesson01\WebGLLesson01\Application.cs(48,13): error CS0121: The call is ambiguous between the following methods or properties:
// 'ScriptCoreLib.Extensions.LinqExtensions.With<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>(ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript, System.Action<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>)' and
// 'ScriptCoreLib.Extensions.LinqExtensions.With<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>(ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript, System.Action<ScriptCoreLib.JavaScript.DOM.HTML.IHTMLScript>)'
// works for IE11
//var size = 512;
//var size = 256;
//var size = 96;
// size wont matter? always rendered
var size = 16;
var rttFramebuffer_width = 128;
var rttFramebuffer_height = 128;
var gl = new WebGLRenderingContext();
var canvas = gl.canvas.AttachToDocument();
Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
canvas.style.SetLocation(0, 0, size, size);
canvas.width = size;
canvas.height = size;
var gl_viewportWidth = size;
var gl_viewportHeight = size;
#region createShader
// dont we have a better api already?
Func<ScriptCoreLib.GLSL.Shader, WebGLShader> createShader = (src) =>
{
var shader = gl.createShader(src);
// verify
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) == null)
{
Native.window.alert("error in SHADER:\n" + gl.getShaderInfoLog(shader));
throw new InvalidOperationException("shader failed");
return null;
}
return shader;
};
#endregion
var vs = createShader(new GeometryVertexShader());
var fs = createShader(new GeometryFragmentShader());
var shaderProgram = new WebGLProgram(gl);
gl.attachShader(shaderProgram, vs);
gl.attachShader(shaderProgram, fs);
gl.linkProgram(shaderProgram);
var mvMatrix = glMatrix.mat4.create();
var pMatrix = glMatrix.mat4.create();
var vec3aVertexPositionBuffer = new WebGLBuffer(gl);
var vec2aTextureCoordBuffer = new WebGLBuffer(gl);
gl.clearColor(0.0f, 0.0f, 0.0f, 1.0f);
gl.enable(gl.DEPTH_TEST);
#region initTextureFramebuffer
var xWebGLFramebuffer = new WebGLFramebuffer(gl);
gl.bindFramebuffer(gl.FRAMEBUFFER, xWebGLFramebuffer);
// generateMipmap: level 0 not power of 2 or not all the same size
//var rttFramebuffer_width = canvas.width;
// WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size
var xWebGLTexture = new WebGLTexture(gl);
gl.bindTexture(gl.TEXTURE_2D, xWebGLTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.LINEAR_MIPMAP_NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer_width, rttFramebuffer_height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.generateMipmap(gl.TEXTURE_2D);
var xWebGLRenderbuffer = new WebGLRenderbuffer(gl);
gl.bindRenderbuffer(gl.RENDERBUFFER, xWebGLRenderbuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer_width, rttFramebuffer_height);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, xWebGLTexture, 0);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, xWebGLRenderbuffer);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
#endregion
var pass = new ChromeShaderToyColumns.Library.ShaderToy.EffectPass(
gl: gl,
precission: ChromeShaderToyColumns.Library.ShaderToy.DetermineShaderPrecission(gl),
supportDerivatives: gl.getExtension("OES_standard_derivatives") != null
);
pass.MakeHeader_Image();
pass.NewShader_Image(
new ChromeShaderToyColumns.Shaders.ProgramFragmentShader()
);
var sw = Stopwatch.StartNew();
var vbo = new WebGLBuffer(gl);
Native.window.onframe += e =>
{
// can we run it in VR as HUD?
// https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150706
#region FRAMEBUFFER
gl.bindFramebuffer(gl.FRAMEBUFFER, xWebGLFramebuffer);
//// http://stackoverflow.com/questions/20362023/webgl-why-does-transparent-canvas-show-clearcolor-color-component-when-alpha-is
gl.clearColor(1, 1, 0, 1.0f);
gl.viewport(0, 0, rttFramebuffer_width, rttFramebuffer_height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
#region Paint_Image
ChromeShaderToyColumns.Library.ShaderToy.EffectPass.Paint_ImageDelegate Paint_Image = (time, mouseOriX, mouseOriY, mousePosX, mousePosY, zoom) =>
{
var mProgram = pass.xCreateShader.mProgram;
var xres = rttFramebuffer_width;
var yres = rttFramebuffer_height;
#region Paint_Image
//new IHTMLPre { "enter Paint_Image" }.AttachToDocument();
// this is enough to do pip to bottom left, no need to adjust vertex positions even?
//gl.viewport(0, 0, (int)xres, (int)yres);
// useProgram: program not valid
gl.useProgram(mProgram);
// uniform4fv
var mouse = new[] { mousePosX, mousePosY, mouseOriX, mouseOriY };
// X:\jsc.svn\examples\glsl\future\GLSLShaderToyPip\GLSLShaderToyPip\Application.cs
//gl.getUniformLocation(mProgram, "fZoom").With(fZoom => gl.uniform1f(fZoom, zoom));
var l2 = gl.getUniformLocation(mProgram, "iGlobalTime"); if (l2 != null) gl.uniform1f(l2, time);
var l3 = gl.getUniformLocation(mProgram, "iResolution"); if (l3 != null) gl.uniform3f(l3, xres, yres, 1.0f);
var l4 = gl.getUniformLocation(mProgram, "iMouse"); if (l4 != null) gl.uniform4fv(l4, mouse);
//var l7 = gl.getUniformLocation(this.mProgram, "iDate"); if (l7 != null) gl.uniform4fv(l7, dates);
//var l9 = gl.getUniformLocation(this.mProgram, "iSampleRate"); if (l9 != null) gl.uniform1f(l9, this.mSampleRate);
var ich0 = gl.getUniformLocation(mProgram, "iChannel0"); if (ich0 != null) gl.uniform1i(ich0, 0);
var ich1 = gl.getUniformLocation(mProgram, "iChannel1"); if (ich1 != null) gl.uniform1i(ich1, 1);
var ich2 = gl.getUniformLocation(mProgram, "iChannel2"); if (ich2 != null) gl.uniform1i(ich2, 2);
var ich3 = gl.getUniformLocation(mProgram, "iChannel3"); if (ich3 != null) gl.uniform1i(ich3, 3);
// what if there are other textures too?
// X:\jsc.svn\examples\javascript\chrome\apps\WebGL\ChromeWebGLFrameBuffer\ChromeWebGLFrameBuffer\Application.cs
//for (var i = 0; i < mInputs.Length; i++)
//{
// var inp = mInputs[i];
// gl.activeTexture((uint)(gl.TEXTURE0 + i));
// if (inp == null)
// {
// gl.bindTexture(gl.TEXTURE_2D, null);
// }
//}
var times = new[] { 0.0f, 0.0f, 0.0f, 0.0f };
var l5 = gl.getUniformLocation(mProgram, "iChannelTime");
if (l5 != null) gl.uniform1fv(l5, times);
var resos = new float[12] { 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f };
var l8 = gl.getUniformLocation(mProgram, "iChannelResolution");
if (l8 != null) gl.uniform3fv(l8, resos);
// using ?
var vec2pos = (uint)gl.getAttribLocation(mProgram, "pos");
//gl.bindBuffer(gl.ARRAY_BUFFER, quadVBO);
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
#region vertices
float left = -1.0f;
// y reversed?
float bottom = -1.0f;
float right = 1.0f;
float top = 1.0f;
var fvertices =
new float[]
{
// left top
left, bottom,
// right top
//right, -1.0f,
right, bottom,
// left bottom
left, top,
// right top
//right, -1.0f,
right, bottom,
// right bottom
//right, 1.0f,
right, top,
// left bottom
left,top
};
var vertices = new Float32Array(fvertices);
#endregion
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(vec2pos, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vec2pos);
// GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to render with no buffer attached to enabled attribute 1
gl.drawArrays(gl.TRIANGLES, 0, 6);
// first frame is now visible
gl.disableVertexAttribArray(vec2pos);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
#endregion
//mFrame++;
};
#endregion
Paint_Image(
sw.ElapsedMilliseconds / 1000.0f,
0,
0,
0,
0
);
gl.flush();
//// INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size
gl.bindTexture(gl.TEXTURE_2D, xWebGLTexture);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
#endregion
gl.clearColor(0, 0, 1, 1.0f);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
glMatrix.mat4.perspective(45f, (float)gl_viewportWidth / (float)gl_viewportHeight, 0.1f, 120.0f, pMatrix);
glMatrix.mat4.identity(mvMatrix);
glMatrix.mat4.translate(mvMatrix, new float[] {
-1.5f + (f)Math.Cos(
sw.ElapsedMilliseconds
//slow it down
*0.001f
)
, 0.0f, -15.0f });
//glMatrix.mat4.translate(mvMatrix, new float[] { 3.0f, 0.0f, 0.0f });
gl.useProgram(shaderProgram);
// X:\jsc.svn\examples\javascript\WebGL\WebGLLesson05\WebGLLesson05\Application.cs
gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uPMatrix"), false, pMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uMVMatrix"), false, mvMatrix);
// GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1
for (int ihalf = 0; ihalf < 2; ihalf++)
{
#region vec2aTextureCoord
var vec2aTextureCoord = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.bindBuffer(gl.ARRAY_BUFFER, vec2aTextureCoordBuffer);
// http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-part-6_25.html
var textureCoords = new float[]{
// Front face
0.0f, 0.0f,
0.0f, -1.0f,
-1.0f, -1.0f,
-1.0f, 0.0f,
};
if (ihalf % 2 == 0)
{
textureCoords = new[]{
0.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
1.0f, 0.0f,
};
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
gl.vertexAttribPointer((uint)vec2aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray((uint)vec2aTextureCoord);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, xWebGLTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.NEAREST);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
#endregion
#region aVertexPosition
var vec3aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.bindBuffer(gl.ARRAY_BUFFER, vec3aVertexPositionBuffer);
var rsize = 4f;
var vec3vertices = new[]{
rsize, rsize, 0.0f,
rsize, -rsize, 0.0f,
-rsize, -rsize, 0.0f,
//-4.0f, -4.0f, 0.0f,
//-4, 4f, 0.0f,
//4.0f, 4.0f, 0.0f,
};
if (ihalf % 2 == 0)
{
vec3vertices = new[]{
-rsize, -rsize, 0.0f,
-rsize, rsize, 0.0f,
rsize, rsize, 0.0f,
};
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vec3vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer((uint)vec3aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray((uint)vec3aVertexPosition);
#endregion
var vec3vertices_numItems = vec3vertices.Length / 3;
//gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.Length / 3);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vec3vertices_numItems);
}
};
#region AtResize
Action AtResize =
delegate
{
gl_viewportWidth = Native.window.Width;
gl_viewportHeight = Native.window.Height;
canvas.style.SetLocation(0, 0, gl_viewportWidth, gl_viewportHeight);
canvas.width = gl_viewportWidth;
canvas.height = gl_viewportHeight;
};
Native.window.onresize +=
e =>
{
AtResize();
};
AtResize();
#endregion
}
private void Initialize()
{
var gl = this.gl;
// http://cs.helsinki.fi/u/ilmarihe/metatunnel.html
// http://wakaba.c3.cx/w/puls.html
// http://www.ibiblio.org/e-notes/webgl/barkley.html
Action<string> alert = Native.window.alert;
c.style.border = "1px solid yellow";
this.prog = gl.createProgram();
gl.attachShader(prog, getShader(shader_vs, gl.VERTEX_SHADER));
gl.attachShader(prog, getShader(shader_fs, gl.FRAGMENT_SHADER));
gl.linkProgram(prog);
this.prog_show = gl.createProgram();
gl.attachShader(prog_show, getShader(shader_vs, gl.VERTEX_SHADER));
gl.attachShader(prog_show, getShader(shader_fs_show, gl.FRAGMENT_SHADER));
gl.linkProgram(prog_show);
var posBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
// todo: jsc promoted float to double? :) let's revert that at the next build
var vertices = new WebGLFloatArray(new [] { -1f, -1f, 0f, 1f, -1f, 0f, -1f, 1f, 0f, 1f, 1f, 0f });
var aPosLoc = gl.getAttribLocation(prog, "aPos");
gl.enableVertexAttribArray((uint)aPosLoc);
var aTexLoc = gl.getAttribLocation(prog, "aTexCoord");
gl.enableVertexAttribArray((uint)aTexLoc);
var texCoords = new WebGLFloatArray(new [] { 0f, 0f, 1f, 0f, 0f, 1f, 1f, 1f });
var texCoordOffset = vertices.byteLength;
gl.bufferData(gl.ARRAY_BUFFER,
(int)(texCoordOffset + texCoords.byteLength), gl.STATIC_DRAW);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
gl.bufferSubData(gl.ARRAY_BUFFER, (int)texCoordOffset, texCoords);
gl.vertexAttribPointer((uint)aPosLoc, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer((uint)aTexLoc, 2, gl.FLOAT, false, 0, (int)texCoordOffset);
this.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
var pixels = new List<byte>();
var tSize = 512;
#region why is this here below dynamic? :) jsc could optimize?
for (var i = 0; i < tSize; i++)
for (var j = 0; j < tSize; j++)
{
pixels.Add(0); pixels.Add(0);
pixels.Add(0); pixels.Add(0);
}
#endregion
for (var i = 257; i < 512; i++)
{
pixels[4 * (256 * tSize + i)] = 250;
pixels[4 * (255 * tSize + i) + 1] = 55;
}
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, tSize, tSize, 0,
gl.RGBA, gl.UNSIGNED_BYTE, new WebGLUnsignedByteArray(pixels.ToArray()));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, (int)gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, (int)gl.CLAMP_TO_EDGE);
this.texture2 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, tSize, tSize, 0,
gl.RGBA, gl.UNSIGNED_BYTE, new WebGLUnsignedByteArray(pixels.ToArray()));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (int)gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (int)gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, (int)gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, (int)gl.CLAMP_TO_EDGE);
this.FBO = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
gl.TEXTURE_2D, texture, 0);
this.FBO2 = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, FBO2);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
gl.TEXTURE_2D, texture2, 0);
gl.useProgram(prog);
gl.uniform1f(gl.getUniformLocation(prog, "a"), a);
gl.uniform1f(gl.getUniformLocation(prog, "ba"), b / a);
gl.uniform1f(gl.getUniformLocation(prog, "dt"), dt);
gl.uniform1f(gl.getUniformLocation(prog, "dte"), dt / eps);
gl.uniform1f(gl.getUniformLocation(prog, "dth2"), dt / (h * h));
gl.uniform1i(gl.getUniformLocation(prog, "uTexSamp"), 0);
gl.useProgram(prog_show);
gl.uniform1i(gl.getUniformLocation(prog_show, "uTexSamp"), 0);
Action draw = this.draw;
draw.AtInterval(delay);
c.style.border = "1px solid green";
}
