Search results
Feb 6, 2014 · Both canvas and webGL are html5 goodies. Usually the devices that support one will support and the other. So, to sum up: merging the drawing API code and the rest (integration): similar; ease of use: (with library) canvas = webGL (from scratch) webGL << canvas; speed: webGL > canvas; capabilities: webGL > canvas; cost: webGL is much more expensive
- Overview
- Reference
- Guides and tutorials
- Resources
- Browser compatibility
- See also
WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.
Support for WebGL is present in all modern browsers (see the compatibility tables below); however, the user's device must also have hardware that supports these features.
The WebGL 2 API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the WebGL2RenderingContext interface.
The element is also used by the Canvas API to do 2D graphics on web pages.
Standard interfaces
•WebGLRenderingContext •WebGL2RenderingContext •WebGLActiveInfo •WebGLBuffer •WebGLContextEvent •WebGLFramebuffer •WebGLProgram •WebGLQuery •WebGLRenderbuffer •WebGLSampler •WebGLShader •WebGLShaderPrecisionFormat •WebGLSync •WebGLTexture •WebGLTransformFeedback •WebGLUniformLocation •WebGLVertexArrayObject
Extensions
•ANGLE_instanced_arrays •EXT_blend_minmax •EXT_color_buffer_float •EXT_color_buffer_half_float •EXT_disjoint_timer_query •EXT_float_blend Experimental •EXT_frag_depth •EXT_shader_texture_lod •EXT_sRGB •EXT_texture_compression_bptc •EXT_texture_compression_rgtc •EXT_texture_filter_anisotropic •EXT_texture_norm16 •KHR_parallel_shader_compile •OES_draw_buffers_indexed •OES_element_index_uint •OES_fbo_render_mipmap •OES_standard_derivatives •OES_texture_float •OES_texture_float_linear •OES_texture_half_float •OES_texture_half_float_linear •OES_vertex_array_object •OVR_multiview2 •WEBGL_color_buffer_float •WEBGL_compressed_texture_astc •WEBGL_compressed_texture_etc •WEBGL_compressed_texture_etc1 •WEBGL_compressed_texture_pvrtc •WEBGL_compressed_texture_s3tc •WEBGL_compressed_texture_s3tc_srgb •WEBGL_debug_renderer_info •WEBGL_debug_shaders •WEBGL_depth_texture •WEBGL_draw_buffers •WEBGL_lose_context •WEBGL_multi_draw
Events
•webglcontextlost •webglcontextrestored •webglcontextcreationerror
Guides
Data in WebGL A guide to variables, buffers, and other types of data used when writing WebGL code. WebGL best practices Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content. Using extensions A guide to using WebGL extensions.
Tutorials
WebGL tutorial A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
Examples
A basic 2D WebGL animation example This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL. WebGL by example A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
•Khronos WebGL site The main website for WebGL at the Khronos Group.
•WebGL Fundamentals A basic tutorial with fundamentals of WebGL.
•Raw WebGL: An introduction to WebGL A talk by Nick Desaulniers that introduces the basics of WebGL.
•WebGL playground An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.
•WebGL Academy An HTML/JavaScript editor with tutorials to learn basics of webgl programming.
•WebGL Stats A site with statistics about WebGL capabilities in browsers on different platforms.
api.WebGLRenderingContext
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
api.WebGL2RenderingContext
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Compatibility notes
In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name webgl2.
It was designed as a Web API to provide 2D and 3D drawing inside an HTML canvas element, without the use of a browser plug-in. Browser Support The numbers in the table specify the first browser version that fully supports WebGL.
Aug 2, 2024 · Getting started with WebGL. WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU).
Aug 7, 2024 · The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws ...
Dec 5, 2018 · To draw a 2D canvas on a WebGL canvas probably requires around 60-70 lines of code. To learn WebGL see some tutorials. Here's an article that reproduces canvas 2d's drawImage in WebGL. Drawing a 2D canvas using the knowledge in that article is no different, you just replace the images in the article with 2d canvases.
People also ask
What is WebGL in JavaScript?
What is the difference between WebGL & Canvas API?
Does web workers support WebGL?
What is WebGL es?
Does WebGL support 2d canvas?
How to draw a 2d canvas on a WebGL Canvas?
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements. Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera ...
