public static WebGLRenderingContext Create3DContext(CanvasElement 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 CanvasContext(CanvasElement canvas, InputElement input)
: base(canvas.Width, canvas.Height)
{
imageCache = new Dictionary<string, ImageElement>();
this.input = input;
input.Type = InputType.Text;
input.Value = "A";
input.OnInput = (e) =>
{
if(input.Value == "")
{
KeyPressed("Back");
}
KeyPressed(input.Value.Substr(Math.Max(0, input.Value.Length - 1), input.Value.Length));
input.Value = "A";
};
context = canvas.GetContext(CanvasTypes.CanvasContext2DType.CanvasRenderingContext2D);
context.FillStyle = "#000000";
context.LineWidth = 2;
context.TextBaseline = CanvasTypes.CanvasTextBaselineAlign.Middle;
double canvasLeft = context.Canvas.GetBoundingClientRect().Left;
double canvasRight = context.Canvas.GetBoundingClientRect().Left;
context.Canvas.AddEventListener(EventType.Click,
(e) =>
{
Click(e.As<MouseEvent>().ClientX + Document.Body.ScrollLeft - (int)canvasLeft,
e.As<MouseEvent>().ClientY + Document.Body.ScrollTop - (int)canvasRight);
if (ContentView.Active == true)
{
input.Focus();
}
});
Window.OnResize = (e) => ResizeContent();
}
/// <summary>
/// Replaces a portion of an existing 2D texture image with all of another image.
///
/// Errors:
/// gl.SECURITY_ERR Occurs if an image or canvas is supplied and doesn't have the same origin of the canvas associated with the WebGLRenderingContext.
///
/// gl.INVALID_VALUE If pixels is null.
/// If level is < 0, or greater than maximum allowable value.
/// If xoffset is greater than the width of the texture image.
/// If yoffset is greater than the height of the texture image.
///
/// gl.INVALID_OPERATION If called without a currently bound texture.
/// The type doesn't match the type originally defined for the texture.
/// If type and format aren't compatible values.
///
/// gl.INVALID_ENUM If target, format, or type aren't one of the listed values.
///
/// </summary>
/// <param name="target">The target texture of the active texture unit. Must be one of the following:
/// gl.TEXTURE_2D Uses a 2D image.
/// gl.TEXTURE_CUBE_MAP_POSITIVE_X Image for the positive X face of the cube map.
/// gl.TEXTURE_CUBE_MAP_NEGATIVE_X Image for the negative X face of the cube map.
/// gl.TEXTURE_CUBE_MAP_POSITIVE_Y Image for the positive Y face of the cube map.
/// gl.TEXTURE_CUBE_MAP_NEGATIVE_Y Image for the negative Y face of the cube map.
/// gl.TEXTURE_CUBE_MAP_POSITIVE_Z Image for the positive Z face of the cube map.
/// gl.TEXTURE_CUBE_MAP_NEGATIVE_Z Image for the negative Z face of the cube map.
/// </param>
/// <param name="level">The level of detail to use with the texture.</param>
/// <param name="xOffset">The x (horizontal) offset within the texture image.</param>
/// <param name="yOffset">The y (vertical) offset within the texture image.</param>
/// <param name="width">Width of texture sub-image. Value used only when UInt8Array or Float32Array for pixels is specified. </param>
/// <param name="height">Height of texture sub-image. Value used only when UInt8Array or Float32Array for pixels is specified. </param>
/// <param name="format">The format of the source pixel data.
/// gl.ALPHA Each element is a single alpha component. The system converts it to floating point, clamped to the range [0, 1], and assembles it into an RGBA element by placing attaching 0.0 to the red, green and blue channels.
/// gl.LUMINANCE Each element is a single luminance component. The system converts it to floating point value, clamped to the range [0, 1], and assembles it into an RGBA element by placing the luminance value in the red, green and blue channels, and attaching 1.0 to the alpha channel.
/// gl.LUMINANCE_ALPHA Each element is an luminance/alpha double. The systems converts each component to floating point, clamped to the range [0, 1], and assembles them into an RGBA element by placing the luminance value in the red, green and blue channels.
/// gl.RGB Red, green, and blue channels.
/// gl.RGBA Red, green, blue, and alpha (transparency) channels.
/// </param>
/// <param name="type">The data type of the pixel data.
/// gl.UNSIGNED_BYTE
/// gl.FLOAT Call getExtension("gl.OES_texture_float") first to enable. This creates 128bit-per-pixel textures instead of 32bit-per-pixel for the image. </param>
/// <param name="pixels">The CanvasElement to use for the texture.</param>
public virtual void TexSubImage2D(int target, int level, int xOffset, int yOffset, int width, int height, int format, int type, CanvasElement pixels) { }
/// <summary>
/// Loads the supplied pixel data into a texture.
/// Images that are used as textures are not allowed if the origin of the image isn't the same as the origin of the canvas element. Images are also blocked if they are from a canvas whose origin-clean flag set to false.
///
/// Errors:
/// gl.SECURITY_ERR Occurs if an image or canvas is supplied as the pixel data source and isn't the same origin (same domain) of the canvas associated with the WebGLRenderingContext.
///
/// gl.INVALID_OPERATION If the ArrayBufferView doesn't have enough data to fill the specified rectangle.
/// If format and internalformat don't match.
/// No texture is bound to target.
/// If type is gl.UNSIGNED_SHORT_5_6_5 and format isn't gl.RGB.
/// If type is gl.UNSIGNED_SHORT_4_4_4_4 or gl.UNSIGNED_SHORT_5_5_5_1 and the format isn't gl.RGBA
///
/// gl.INVALID_VALUE target is a cube map target and width and height aren't equal.
/// If pixels is null for any of the non-ArrayBuffer overloads.
/// The incoming ArrayBufferView or image is bigger than max texture size. Max texture can be retrieved by calling getParameter and using the gl.MAX_CUBE_MAP_TEXTURE_SIZE and gl.MAX_TEXTURE_SIZE enums.
/// If level, width, or height is a negative value.
/// If level is greater than log 2(max), where max is the value of gl.MAX_TEXTURE_SIZE when target is gl.TEXTURE_2D.
/// If width or height are greater than the value of gl.MAX_TEXTURE_SIZE when target is gl.TEXTURE_2D.
/// If level is greater than log 2(max), where max is the value of gl.MAX_CUBE_MAP_TEXTURE_SIZE when target is not gl.TEXTURE_2D.
/// If width or height are greater than the value of gl.MAX_CUBE_MAP_TEXTURE_SIZE when target is not a cube map texture target.
///
/// gl.INVALID_ENUM If target, format, internalformat, or type aren't one of the listed values.
/// </summary>
/// <param name="target">The target texture of the active texture unit. Must be one of the following:
/// gl.TEXTURE_2D Uses a 2D image.
/// gl.TEXTURE_CUBE_MAP_POSITIVE_X Image for the positive X face of the cube map.
/// gl.TEXTURE_CUBE_MAP_NEGATIVE_X Image for the negative X face of the cube map.
/// gl.TEXTURE_CUBE_MAP_POSITIVE_Y Image for the positive Y face of the cube map.
/// gl.TEXTURE_CUBE_MAP_NEGATIVE_Y Image for the negative Y face of the cube map.
/// gl.TEXTURE_CUBE_MAP_POSITIVE_Z Image for the positive Z face of the cube map.
/// gl.TEXTURE_CUBE_MAP_NEGATIVE_Z Image for the negative Z face of the cube map.
/// </param>
/// <param name="level">The level of detail value. </param>
/// <param name="internalFormat">
/// gl.ALPHA Each element is a single alpha component. The system converts it to floating point, clamped to the range [0, 1], and assembles it into an RGBA element by placing attaching 0.0 to the red, green and blue channels.
/// gl.LUMINANCE Each element is a single luminance component. The system converts it to floating point value, clamped to the range [0, 1], and assembles it into an RGBA element by placing the luminance value in the red, green and blue channels, and attaching 1.0 to the alpha channel.
/// gl.LUMINANCE_ALPHA Each element is an luminance/alpha double. The systems converts each component to floating point, clamped to the range [0, 1], and assembles them into an RGBA element by placing the luminance value in the red, green and blue channels.
/// gl.RGB Red, green, and blue channels.
/// gl.RGBA Red, green, blue, and alpha (transparency) channels.
/// </param>
/// <param name="format">Contains the format for the source pixel data. Must match internalformat. </param>
/// <param name="type">The type of texture data.
/// gl.UNSIGNED_BYTE Provides 8 bits per channel for gl.RGBA.
/// gl.FLOAT Call getExtension("gl.OES_texture_float") first to enable. This creates 128 bit-per-pixel textures instead of 32 bit-per-pixel for the image.
/// gl.UNSIGNED_SHORT_5_6_5 Represents colors in a Uint16Array where red = 5 bits, green=6 bits, and blue=5 bits.
/// gl.UNSIGNED_SHORT_4_4_4_4 Represents colors in a Uint16Array where red = 4 bits, green=4 bits, blue=4 bits, and alpha=4 bits.
/// gl.UNSIGNED_SHORT_5_5_5_1 Represents colors in a Uint16Array where red = 5 bits, green=5 bits, blue=5 bits and alpha=1 bit.</param>
/// <param name="pixels">The CanvasElement to use as a data source for the texture. A buffer of sufficient size is automatically allocated and its contents is initialized to 0 if pixels is null.</param>
public virtual void TexImage2D(int target, int level, int internalFormat, int format, int type, CanvasElement pixels) { }
public static void ShowError(CanvasElement canvas, string message)
{
canvas.ParentElement.ReplaceChild(new ParagraphElement { InnerHTML = message }, canvas);
}
/// <summary>
/// Creates a pattern using the specified image (a CanvasImageSource). It repeats the source in the
/// directions specified by the repetition argument. This method returns a CanvasPattern.
/// </summary>
/// <param name="image"></param>
/// <param name="repetition"></param>
/// <returns></returns>
public virtual CanvasPattern CreatePattern(CanvasElement image, CanvasTypes.CanvasRepetitionTypes repetition)
{
return(null);
}