Search completed in 1.11 seconds.
447 results for "WebGL":
Your results are loading. Please wait...
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
the webgl_draw_buffers.drawbufferswebgl() method is part of the webgl api and allows you to define the draw buffers to which all fragment colors are written.
... this method is part of the webgl_draw_buffers extension.
... note: when using webgl2, this method is available as gl.drawbuffers() by default and the constants are named gl.color_attachment1 etc.
...And 6 more matches
WebGLRenderingContext - Web APIs
the webglrenderingcontext interface provides an interface to the opengl es 2.0 graphics rendering context for the drawing surface of an html <canvas> element.
... to get an access to a webgl context for 2d and/or 3d graphics rendering, call getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it.
... the webgl tutorial has more information, examples, and resources on how to get started with webgl.
...And 126 more matches
WebGL2RenderingContext - Web APIs
the webgl2renderingcontext interface provides the opengl es 3.0 rendering context for the drawing surface of an html <canvas> element.
... to get an object of this interface, call getcontext() on a <canvas> element, supplying "webgl2" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl2'); webgl 2 is an extension to webgl 1.
... the webgl2renderingcontext interface implements all members of the webglrenderingcontext interface.
...And 77 more matches
WebGL constants - Web APIs
the webgl api provides several constants that are passed into or returned by functions.
... standard webgl constants are installed on the webglrenderingcontext and webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_width); some constants are also provided by webgl extensions.
... var debuginfo = gl.getextension('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more information, examples, and resources on how to get started with webgl.
...And 42 more matches
WebGL best practices - Web APIs
webgl is a complicated api, and it's often not obvious what the recommended ways to use it are.
... general topics address and eliminate webgl errors your application should run without generating any webgl errors (as returned by geterror).
... every webgl error is reported in the web console as a javascript warning with a descriptive message.
...And 36 more matches
WebGL: 2D and 3D graphics for the web - Web APIs
WebAPIWebGL API
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 html5 <canvas> elements.
... support for webgl is present in firefox 4+, google chrome 9+, opera 12+, safari 5.1+, internet explorer 11+, and microsoft edge build 10240+; however, the user's device must also have hardware that supports these features.
...And 32 more matches
WebGLRenderingContext.getParameter() - Web APIs
the webglrenderingcontext.getparameter() method of the webgl api returns a value for the passed parameter name.
... parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext.
... constant returned type description gl.active_texture glenum gl.aliased_line_width_range float32array (with 2 elements) gl.aliased_point_size_range float32array (with 2 elements) gl.alpha_bits glint gl.array_buffer_binding webglbuffer gl.blend glboolean gl.blend_color float32array (with 4 values) gl.blend_dst_alpha glenum gl.blend_dst_rgb glenum gl.blend_equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.color_clear_value float32arr...
...And 29 more matches
WebGL model view projection - Web APIs
this article explores how to take data within a webgl project, and project it into the proper spaces to display it on the screen.
... the model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation.
... clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a special coordinate system known as clip space.
...And 16 more matches
Adding 2D content to a WebGL context - Web APIs
« previousnext » once you've successfully created a webgl context, you can start rendering into it.
... there are two shader functions run when drawing webgl content: the vertex shader and the fragment shader.
... you write these in glsl and pass the text of the code into webgl to be compiled for execution on the gpu.
...And 15 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image.
... syntax // webgl1: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview?
...pixels); // webgl2: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, glintptr offset); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlcanvaselement source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlimageelement source); void gl.teximage2d(target, level, internalformat, width, height, ...
...And 14 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
the webglrenderingcontext.vertexattribpointer() method of the webgl api binds the buffer currently bound to gl.array_buffer to a generic vertex attribute of the current vertex buffer object and specifies its layout.
...possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 16-bit integer, with values in [-32768, 32767] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short: unsigned 16-bit integer, with values in [0, 65535] gl.float: 32-bit ieee floating point number when using a webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a float.
... a gl.invalid_operation error is thrown if no webglbuffer is bound to the array_buffer target.
...And 14 more matches
Using textures in WebGL - Web APIs
ew uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); const image = new image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, image); // webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions.
...ge gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); } }; image.src = url; return texture; } function ispowerof2(value) { return (value & (value - 1)) == 0; } the loadtexture() routine starts by creating a webgl texture object texture by calling the webgl createtexture() function.
... webgl1 can only use non power of 2 textures with filtering set to nearest or linear and it can not generate a mipmap for them.
...And 14 more matches
WEBGL_draw_buffers - Web APIs
the webgl_draw_buffers extension is part of the webgl api and enables a fragment shader to write to several textures, which is useful for deferred shading, for example.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 12 more matches
WebGLRenderingContext.bufferData() - Web APIs
the webglrenderingcontext.bufferdata() method of the webgl api initializes and creates the buffer object's data store.
... syntax // webgl1: void gl.bufferdata(target, size, usage); void gl.bufferdata(target, arraybuffer?
... srcdata, usage); void gl.bufferdata(target, arraybufferview srcdata, usage); // webgl2: void gl.bufferdata(target, arraybufferview srcdata, usage, srcoffset, length); parameters target a glenum specifying the binding point (target).
...And 11 more matches
WebGLRenderingContext.isEnabled() - Web APIs
the webglrenderingcontext.isenabled() method of the webgl api tests whether a specific webgl capability is enabled or not for this context.
... syntax glboolean gl.isenabled(cap); parameters cap a glenum specifying which webgl capability to test.
...see webglrenderingcontext.blendfunc().
...And 11 more matches
WebGL tutorial - Web APIs
webgl enables web content to use an api based on opengl es 2.0 to perform 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 special effects code (shader code) that is executed on a computer's graphics processing unit (gpu).
... webgl elements can be mixed with other html elements and composited with other parts of the page or page background.
...And 11 more matches
WebGLRenderingContext.getUniformLocation() - Web APIs
part of the webgl api, the webglrenderingcontext method getuniformlocation() returns the location of a specific uniform variable which is part of a given webglprogram.
... the uniform variable is returned as a webgluniformlocation object, which is an opaque identifier used to specify where in the gpu's memory that uniform variable is located.
... syntax webgluniformlocation = webglrenderingcontext.getuniformlocation(program, name); parameters program the webglprogram in which to locate the specified uniform variable.
...And 10 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
the webglrenderingcontext method makexrcompatible() ensures that the rendering context described by the webglrenderingcontext is ready to render the scene for the immersive webxr device on which it will be displayed.
... if necessary, the webgl layer may reconfigure the context to be ready to render to a different device than it originally was.
... syntax let makecompatpromise = webglrenderingcontext.makexrcompatible(); parameters none.
...And 10 more matches
Getting started with WebGL - Web APIs
next » 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).
... webgl elements can be mixed with other html elements and composited with other parts of the page or page background.
...And 10 more matches
XRWebGLLayer.framebuffer - Web APIs
the read-only xrwebgllayer property framebuffer is an opaque webglframebuffer which is used to buffer the rendered image if the xr compositor is being used.
...the opaque framebuffer is functionally nearly the same as a standard webgl framebuffer, except for the differences covered in the section how opaque framebuffers are special below.
... syntax let framebuffer = xrwebgllayer.framebuffer; value a webglframebuffer object representing the framebuffer into which the 3d scene is being rendered, or null if the xr compositor is disabled for the session.
...And 10 more matches
WebGLRenderingContext.disable() - Web APIs
the webglrenderingcontext.disable() method of the webgl api disables specific webgl capabilities for this context.
... syntax void gl.disable(cap); parameters cap a glenum specifying which webgl capability to disable.
...see webglrenderingcontext.blendfunc().
...And 9 more matches
WebGLRenderingContext.enable() - Web APIs
the webglrenderingcontext.enable() method of the webgl api enables specific webgl capabilities for this context.
... syntax void gl.enable(cap); parameters cap a glenum specifying which webgl capability to enable.
...see webglrenderingcontext.blendfunc().
...And 9 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
the webglrenderingcontext.getframebufferattachmentparameter() method of the webgl api returns information about a framebuffer's attachment.
... when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachm...
...And 9 more matches
Detect WebGL - Web APIs
« previousnext » this example demonstrates how to detect a webgl rendering context and reports the result to the user.
... feature-detecting webgl in this first example we are going to check whether the browser supports webgl.
... to that end we will try to obtain the webgl rendering context from a canvas element.
...And 9 more matches
WEBGL_depth_texture - Web APIs
the webgl_depth_texture extension is part of the webgl api and defines 2d depth and depth-stencil textures.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 8 more matches
WebGLActiveInfo - Web APIs
the webglactiveinfo interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.getactiveattrib() and webglrenderingcontext.getactiveuniform() methods.
... properties webglactiveinfo.name the read-only name of the requested variable.
... webglactiveinfo.size the read-only size of the requested variable.
...And 8 more matches
WebGLRenderingContext.pixelStorei() - Web APIs
the webglrenderingcontext.pixelstorei() method of the webgl api specifies the pixel storage modes.
... glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_flip_y_webgl flips the source data along its vertical axis if true.
... glboolean false true, false webgl gl.unpack_premultiply_alpha_webgl multiplies the alpha channel into the other color channels glboolean false true, false webgl gl.unpack_colorspace_conversion_webgl default color space conversion or no color space conversion.
...And 8 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture.
... syntax // webgl 1: void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview?
...pixels); // webgl 2: void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, glintptr offset); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlcanvaselement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlimageelement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, html...
...And 8 more matches
Using WebGL extensions - Web APIs
webgl, like its sister apis (opengl and opengl es), supports extensions.
... a complete list of extensions is available in the khronos webgl extension registry.
... note: in webgl, unlike in other gl apis, extensions are only available if explicitly requested.
...And 8 more matches
XRWebGLLayer - Web APIs
the xrwebgllayer interface of the webxr device api provides a linkage between the webxr device (or simulated xr device, in the case of an inline session) and a webgl context used to render the scene for display on the device.
... in particular, it provides access to the webgl framebuffer and viewport to ease access to the context.
... although xrwebgllayer is currently the only type of framebuffer layer supported by webgl, it's entirely possible that future updates to the webxr specification may allow for other layer types and corresponding image sources.
...And 8 more matches
WebGLRenderingContext.bindBuffer() - Web APIs
the webglrenderingcontext.bindbuffer() method of the webgl api binds a given webglbuffer to a target.
... when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... buffer a webglbuffer to bind.
...And 7 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using these methods.
... syntax // webgl 1: void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview?
...And 7 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
the static method xrwebgllayer.getnativeframebufferscalefactor() returns a floating-point scaling factor by which one can multiply the specified xrsession's resolution to get the native resolution of the webxr device's frame buffer.
... this information can be used when creating a new xrwebgllayer to configure the xrwebgllayerinit property framebufferscalefactor in the options specified when calling the xrwebgllayer() constructor.
... syntax let nativescaling = xrwebgllayer.getnativeframebufferscalefactor(session); parameters session the xrsession for which to return the native framebuffer scaling factor.
...And 7 more matches
WEBGL_debug_renderer_info - Web APIs
the webgl_debug_renderer_info extension is part of the webgl api and exposes two constants with information about the graphics driver for debugging purposes.
...generally, the graphics driver information should only be used in edge cases to optimize your webgl content or to debug gpu problems.
... the webglrenderingcontext.getparameter() method can help you to detect which features are supported and the failifmajorperformancecaveat context attribute lets you control if a context should be returned at all, if the performance would be dramatically slow.
...And 6 more matches
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format.
... compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used.
... syntax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview?
...And 6 more matches
A basic 2D WebGL animation example - Web APIs
in this webgl example, we create a canvas and within it render a rotating square using webgl.
... the standard webgl global gl_position is then set to the transformed and rotated vertex's position.
... html the html consists solely of the <canvas> that we'll obtain a webgl context on.
...And 6 more matches
XRWebGLLayer() - Web APIs
the webxr device api xrwebgllayer() constructor creates and returns a new xrwebgllayer object, providing the linkage between the webxr device and the webgl graphics layer used to render the 3d scene.
... syntax let gllayer = new xrwebgllayer(session, context, layerinit); parameters session an xrsession object specifying the webxr session which will be rendered using the webgl context.
... context a webglrenderingcontext or webgl2renderingcontext identifying the webgl drawing context to use for rendering the scene for the specified webxr session.
...And 6 more matches
WEBGL_compressed_texture_atc - Web APIs
the webgl_compressed_texture_atc extension is part of the webgl api and exposes 3 atc compressed texture formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 5 more matches
WEBGL_lose_context - Web APIs
the webgl_lose_context extension is part of the webgl api and exposes functions to simulate losing and restoring a webglrenderingcontext.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 5 more matches
WebGLRenderingContext.bindFramebuffer() - Web APIs
the webglrenderingcontext.bindframebuffer() method of the webgl api binds a given webglframebuffer to a target.
... when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... framebuffer a webglframebuffer object to bind.
...And 5 more matches
WebGLRenderingContext.bindTexture() - Web APIs
the webglrenderingcontext.bindtexture() method of the webgl api binds a given webgltexture to a target (binding point).
... when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
... texture a webgltexture object to bind.
...And 5 more matches
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
the webglrenderingcontext.checkframebufferstatus() method of the webgl api returns the completeness status of the webglframebuffer object.
... when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a webgl 2 context, the following values can be returned additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures.
...And 5 more matches
WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.getactiveuniform() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a uniform attribute.
... syntax webglactiveinfo webglrenderingcontext.getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information.
... return value a webglactiveinfo object describing the uniform.
...And 5 more matches
WebGLRenderingContext.getTexParameter() - Web APIs
the webglrenderingcontext.gettexparameter() method of the webgl api returns information about the given texture.
... when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
...possible values: pname return type description possible return values available in a webgl 1 context gl.texture_mag_filter glenum texture magnification filter gl.linear (default value), gl.nearest.
...And 5 more matches
WebGLRenderingContext.getUniform() - Web APIs
the webglrenderingcontext.getuniform() method of the webgl api returns the value of a uniform variable at a given location.
... syntax any gl.getuniform(program, location); parameters program a webglprogram containing the uniform attribute.
... location a webgluniformlocation object containing the location of the uniform attribute to get.
...And 5 more matches
WebGLRenderingContext.renderbufferStorage() - Web APIs
the webglrenderingcontext.renderbufferstorage() method of the webgl api creates and initializes a renderbuffer object's data store.
... gl.depth_stencil when using a webgl 2 context, the following values are available additionally: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 (also available as an extension for webgl 1, see below) gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2u...
...i gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component24 gl.depth_component32f gl.depth24_stencil8 gl.depth32f_stencil8 when using the webgl_color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point type.
...And 5 more matches
WebGLRenderingContext.texParameter[fi]() - Web APIs
the webglrenderingcontext.texparameter[fi]() methods of the webgl api set texture parameters.
... when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
... pname description param available in webgl 1 gl.texture_mag_filter texture magnification filter gl.linear (default value), gl.nearest.
...And 5 more matches
WebGL types - Web APIs
WebAPIWebGL APITypes
the following types are used in webgl interfaces.
... webgl 1 these types are used within a webglrenderingcontext.
...used for example in webglrenderingcontext.clear().
...And 5 more matches
WEBGL_color_buffer_float - Web APIs
the webgl_color_buffer_float extension is part of the webgl api and adds the ability to render to 32-bit floating-point color buffers.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 4 more matches
WebGL2RenderingContext.createTransformFeedback() - Web APIs
the webgl2renderingcontext.createtransformfeedback() method of the webgl 2 api creates and initializes webgltransformfeedback objects.
... syntax webgltransformfeedback gl.createtransformfeedback(); parameters none.
... return value a webgltransformfeedback object.
...And 4 more matches
WebGL2RenderingContext.fenceSync() - Web APIs
the webgl2renderingcontext.fencesync() method of the webgl 2 api creates a new webglsync object and inserts it into the gl command stream.
... syntax webglsync gl.fencesync(condition, flags); parameters condition a glenum specifying the condition that must be met to set the sync object's state to signaled.
... return value a webglsync object.
...And 4 more matches
WebGL2RenderingContext.isTransformFeedback() - Web APIs
the webgl2renderingcontext.istransformfeedback() method of the webgl 2 api returns true if the passed object is a valid webgltransformfeedback object.
... syntax glboolean gl.istransformfeedback(transformfeedback); parameters transformfeedback a webgltransformfeedback object to test.
... return value a glboolean indicating whether the given object is a valid webgltransformfeedback object (true) or not (false).
...And 4 more matches
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
the webglrenderingcontext method enablevertexattribarray(), part of the webgl api, turns on the generic vertex attribute array at the specified index into the list of attribute arrays.
... in webgl, values that apply to a specific vertex are stored in attributes.
...others are assigned by the webgl layer when you create the attributes.
...And 4 more matches
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
the webglrenderingcontext.framebufferrenderbuffer() method of the webgl api attaches a webglrenderbuffer object to a webglframebuffer object.
... when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachm...
...And 4 more matches
WebGLRenderingContext.framebufferTexture2D() - Web APIs
the webglrenderingcontext.framebuffertexture2d() method of the webgl api attaches a texture to a webglframebuffer.
... when using a webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a webgl 2 context, the following values are available additionally: gl.depth_stencil_attachment: depth and stencil buffer.
...And 4 more matches
WebGLRenderingContext.getBufferParameter() - Web APIs
the webglrenderingcontext.getbufferparameter() method of the webgl api returns information about the buffer.
... when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... when using a webgl 2 context, the following values are available additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
...And 4 more matches
WebGLRenderingContext.getExtension() - Web APIs
the webglrenderingcontext.getextension() method enables a webgl extension.
... syntax gl.getextension(name); parameters name a string for the name of the webgl extension to enable.
... return value a webgl extension object, or null if name does not match (case-insensitive) to one of the strings in webglrenderingcontext.getsupportedextensions.
...And 4 more matches
WebGLRenderingContext.getSupportedExtensions() - Web APIs
the webglrenderingcontext.getsupportedextensions() method returns a list of all the supported webgl extensions.
... syntax gl.getsupportedextensions(); return value an array of strings with all the supported webgl extensions.
... examples var canvas = document.getelementbyid('canvas'); gl = canvas.getcontext('webgl'); var extensions = gl.getsupportedextensions(); // array [ 'angle_instanced_arrays', 'ext_blend_minmax', ...
...And 4 more matches
WebGLRenderingContext.getVertexAttrib() - Web APIs
the webglrenderingcontext.getvertexattrib() method of the webgl api returns information about a vertex attribute at a given position.
...possible values: gl.vertex_attrib_array_buffer_binding: returns the currently bound webglbuffer.
... when using a webgl 2 context, the following values are available additionally: gl.vertex_attrib_array_integer: returns a glboolean indicating whether or not an integer data type is in the vertex attribute array at the given index.
...And 4 more matches
WebGLShader - Web APIs
the webglshader is part of the webgl api and can either be a vertex or a fragment shader.
... a webglprogram requires both types of shaders.
... description to create a webglshader use webglrenderingcontext.createshader, then hook up the glsl source code using webglrenderingcontext.shadersource(), and finally invoke webglrenderingcontext.compileshader() to finish and compile the shader.
...And 4 more matches
WebGL by example - Web APIs
next » webgl by example is 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.
... instead of trying to juggle shaders, geometry, and working with gpu memory, already in the first program, the examples here explore webgl in an incremental way.
...And 4 more matches
WEBGL_compressed_texture_etc1 - Web APIs
the webgl_compressed_texture_etc1 extension is part of the webgl api and exposes the etc1 compressed texture format.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
WEBGL_compressed_texture_pvrtc - Web APIs
the webgl_compressed_texture_pvrtc extension is part of the webgl api and exposes four pvrtc compressed texture formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
WEBGL_compressed_texture_s3tc - Web APIs
the webgl_compressed_texture_s3tc extension is part of the webgl api and exposes four s3tc compressed texture formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
WEBGL_compressed_texture_s3tc_srgb - Web APIs
the webgl_compressed_texture_s3tc_srgb extension is part of the webgl api and exposes four s3tc compressed texture formats for the srgb colorspace.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
WEBGL_debug_shaders - Web APIs
the webgl_debug_shaders extension is part of the webgl api and exposes a method to debug shaders from privileged contexts.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
WebGL2RenderingContext.createQuery() - Web APIs
the webgl2renderingcontext.createquery() method of the webgl 2 api creates and initializes webglquery objects, which provide ways to asynchronously query for information.
... syntax webglquery gl.createquery(); parameters none.
... return value a webglquery object.
...And 3 more matches
WebGL2RenderingContext.createSampler() - Web APIs
the webgl2renderingcontext.createsampler() method of the webgl 2 api creates and initializes webglsampler objects.
... syntax webglsampler gl.createsampler(); parameters none.
... return value a webglsampler object.
...And 3 more matches
WebGL2RenderingContext.deleteSync() - Web APIs
the webgl2renderingcontext.deletesync() method of the webgl 2 api deletes a given webglsync object.
... syntax void gl.deletesync(sync); parameters sync a webglsync object to delete.
... examples gl must be a webgl2renderingcontext.
...And 3 more matches
WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
the webgl2renderingcontext.deletetransformfeedback() method of the webgl 2 api deletes a given webgltransformfeedback object.
... syntax void gl.deletetransformfeedback(transformfeedback); parameters transformfeedback a webgltransformfeedback object to delete.
... examples gl must be a webgl2renderingcontext.
...And 3 more matches
WebGL2RenderingContext.isQuery() - Web APIs
the webgl2renderingcontext.isquery() method of the webgl 2 api returns true if the passed object is a valid webglquery object.
... syntax glboolean gl.isquery(query); parameters query a webglquery object to test.
... return value a glboolean indicating whether the given object is a valid webglquery object (true) or not (false).
...And 3 more matches
WebGL2RenderingContext.isSampler() - Web APIs
the webgl2renderingcontext.issampler() method of the webgl 2 api returns true if the passed object is a valid webglsampler object.
... syntax glboolean gl.issampler(sampler); parameters sampler a webglsampler object to test.
... return value a glboolean indicating whether the given object is a valid webglsampler object (true) or not (false).
...And 3 more matches
WebGL2RenderingContext.isSync() - Web APIs
the webgl2renderingcontext.issync() method of the webgl 2 api returns true if the passed object is a valid webglsync object.
... syntax glboolean gl.issync(sync); parameters sync a webglsync object to test.
... return value a glboolean indicating whether the given object is a valid webglsync object (true) or not (false).
...And 3 more matches
WebGLProgram - Web APIs
the webglprogram is part of the webgl api and is a combination of two compiled webglshaders consisting of a vertex shader and a fragment shader (both written in glsl).
... to create a webglprogram, call the gl context's createprogram() function.
... var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); if ( !gl.getprogramparameter( program, gl.link_status) ) { var info = gl.getprograminfolog(program); throw 'could not compile webgl program.
...And 3 more matches
WebGLRenderingContext.attachShader() - Web APIs
the webglrenderingcontext.attachshader() method of the webgl api attaches either a fragment or vertex webglshader to a webglprogram.
... syntax void gl.attachshader(program, shader); parameters program a webglprogram.
... shader a fragment or vertex webglshader.
...And 3 more matches
WebGLRenderingContext.blendEquationSeparate() - Web APIs
the webglrenderingcontext.blendequationseparate() method of the webgl api is used to set the rgb blend equation and alpha blend equation separately.
... the blend equation determines how a new pixel is combined with a pixel already in the webglframebuffer.
... when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.max: maximum of source and destination.
...And 3 more matches
WebGLRenderingContext.createProgram() - Web APIs
the webglrenderingcontext.createprogram() method of the webgl api creates and initializes a webglprogram object.
... syntax webglprogram gl.createprogram(); parameters none.
... return value a webglprogram object that is a combination of two compiled webglshaders consisting of a vertex shader and a fragment shader (both written in glsl).
...And 3 more matches
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
the webglrenderingcontext.getrenderbufferparameter() method of the webgl api returns information about the renderbuffer.
... when using a webgl 2 context, the following value is available additionally: gl.renderbuffer_samples: returns a glint indicating the number of samples of the image of the currently bound renderbuffer.
... examples gl.getrenderbufferparameter(gl.renderbuffer, gl.renderbuffer_width); specifications specification status comment webgl 1.0the definition of 'getrenderbufferparameter' in that specification.
...And 3 more matches
WebGLShaderPrecisionFormat - Web APIs
the webglshaderprecisionformat interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.getshaderprecisionformat() method.
... properties webglshaderprecisionformat.rangemin read only the base 2 log of the absolute value of the minimum value that can be represented.
... webglshaderprecisionformat.rangemax read only the base 2 log of the absolute value of the maximum value that can be represented.
...And 3 more matches
XRWebGLLayer.antialias - Web APIs
the read-only xrwebgllayer property antialias is a boolean value which is true if the rendering layer's frame buffer supports antialiasing.
... syntax let antialiasingsupported = xrwebgllayer.antialias; value a boolean value which is true if the webgl rendering layer's frame buffer is configured to support antialiasing.
... when the webxr compositor is enabled, this value corresponds to the value of the antialias property on the object returned by the webgl context's getcontentattributes() method.
...And 3 more matches
XRWebGLLayer.ignoreDepthValues - Web APIs
the read-only xrwebgllayer property ignoredepthvalues is a boolean value which is true if the session has been configured to ignore the values in the depth buffer while rendering the scene.
... the value of ignoredepthvalues can only be set when the xrwebgllayer is instantiated, by setting the corresponding value in the xrwebgllayerinit object specified as the constructor's layerinit parameter.
... syntax let ignoringdepthbuffer = xrwebgllayer.ignoredepthvalues; value a boolean value which is true if the webgl context's depth buffer is being used while computing the locations of points in the 3d world.
...And 3 more matches
XRWebGLLayerInit.antialias - Web APIs
the boolean antialias property, if present and set to true in the xrwebgllayerinit object provided as the xrwebgllayer() constructor's layerinit parameter, requests that the new webgl rendering layer support anti-aliasing.
... syntax let layerinit = { antialias: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { antialias: boolvalue }); value a boolean value which can be set to true to request anti-aliasing support in the new webgl rendering layer.
... usage notes the state of anti-aliasing for the context after being created can be read from the xrwebgllayer property antialias.
...And 3 more matches
WebGL - MDN Web Docs Glossary: Definitions of Web-related terms
webgl (web graphics library) is a javascript api that draws interactive 2d and 3d graphics.
... the khronos group maintains webgl, which is based on opengl es 2.0.
... you can invoke webgl within the html <canvas> element, which provides a rendering surface.
...And 2 more matches
HTMLCanvasElement: webglcontextrestored event - Web APIs
the webglcontextrestored event of the webgl api is fired if the user agent restores the drawing buffer for a webglrenderingcontext object.
... once the context is restored, webgl resources such as textures and buffers that were created before the context was lost are no longer valid.
... you need to reinitialize the state of your webgl application and recreate resources.
...And 2 more matches
WEBGL_compressed_texture_astc - Web APIs
the webgl_compressed_texture_astc extension is part of the webgl api and exposes adaptive scalable texture compression (astc) compressed texture formats to webgl.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
WEBGL_compressed_texture_etc - Web APIs
the webgl_compressed_texture_etc extension is part of the webgl api and exposes 10 etc/eac compressed texture formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
WEBGL_lose_context.loseContext() - Web APIs
the webgl_lose_context.losecontext() method is part of the webgl api and allows you to simulate losing the context of a webglrenderingcontext context.
... it triggers the steps described in the webgl specification for handling context lost.
... the context will remain lost until webgl_lose_context.restorecontext() is called.
...And 2 more matches
WebGL2RenderingContext.clientWaitSync() - Web APIs
the webgl2renderingcontext.clientwaitsync() method of the webgl 2 api blocks and waits for a webglsync object to become signaled or a given timeout to be passed.
... syntax glenum gl.clientwaitsync(sync, flags, timeout); parameters sync a webglsync object on which to wait on.
...must not be larger than gl.max_client_wait_timeout_webgl.
...And 2 more matches
WebGL2RenderingContext.deleteQuery() - Web APIs
the webgl2renderingcontext.deletequery() method of the webgl 2 api deletes a given webglquery object.
... syntax void gl.deletequery(query); parameters query a webglquery object to delete.
... examples gl must be a webgl2renderingcontext.
...And 2 more matches
WebGL2RenderingContext.deleteSampler() - Web APIs
the webgl2renderingcontext.deletesampler() method of the webgl 2 api deletes a given webglsampler object.
... syntax void gl.deletesampler(sampler); parameters sampler a webglsampler object to delete.
... examples gl must be a webgl2renderingcontext.
...And 2 more matches
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
the webgl2renderingcontext.framebuffertexturelayer() method of the webgl 2 api attaches a single layer of a texture to a framebuffer.
... this method is similar to webglrenderingcontext.framebuffertexture2d(), but only a given single layer of the texture level is attached to the attachment point.
... texture a webgltexture object whose image to attach.
...And 2 more matches
WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.getindexedparameter() method of the webgl 2 api returns indexed information about a given target.
...possible values: gl.transform_feedback_buffer_binding: returns a webglbuffer.
... gl.uniform_buffer_binding: returns a webglbuffer.
...And 2 more matches
WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettransformfeedbackvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeedback buffers.
... syntax webglactiveinfo gl.gettransformfeedbackvarying(program, index); parameters program a webglprogram.
... return value a webglactiveinfo object.
...And 2 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image.
... offset a glintptr byte offset into the webglbuffer's data store.
... used to upload data to the currently bound webgltexture from the webglbuffer bound to the pixel_unpack_buffer target.
...And 2 more matches
WebGL2RenderingContext.texStorage2D() - Web APIs
the webgl2renderingcontext.texstorage2d() method of the webgl api specifies all levels of two-dimensional texture storage.
...possible values: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_a1 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui unlike opengl 3.0, webgl 2 doesn't support the following etc2 and eac compressed texture formats (see section 5.37 in the webgl 2 spec).
... you might be able to enable them via the webgl_compressed_texture_etc extension, though.
...And 2 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture.
... offset a glintptr byte offset into the webglbuffer's data store.
... used to upload data to the currently bound webgltexture from the webglbuffer bound to the pixel_unpack_buffer target.
...And 2 more matches
WebGLContextEvent - Web APIs
the webcontextevent interface is part of the webgl api and is an interface for an event that is generated in response to a status change to the webgl rendering context.
...75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this ...
... webglcontextevent.statusmessage a read-only property containing additional information about the event.
...And 2 more matches
WebGLRenderingContext.blendEquation() - Web APIs
the webglrenderingcontext.blendequation() method of the webgl api is used to set both the rgb blend equation and alpha blend equation to a single equation.
... the blend equation determines how a new pixel is combined with a pixel already in the webglframebuffer.
... when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.max: maximum of source and destination.
...And 2 more matches
WebGLRenderingContext.bufferSubData() - Web APIs
the webglrenderingcontext.buffersubdata() method of the webgl api updates a subset of a buffer object's data store.
... syntax // webgl1: void gl.buffersubdata(target, offset, arraybuffer srcdata); void gl.buffersubdata(target, offset, arraybufferview srcdata); // webgl2: void gl.buffersubdata(target, dstbyteoffset, arraybufferview srcdata, srcoffset, length); parameters target a glenum specifying the binding point (target).
... when using a webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
...And 2 more matches
WebGLRenderingContext.createTexture() - Web APIs
the webglrenderingcontext.createtexture() method of the webgl api creates and initializes a webgltexture object.
... syntax webgltexture gl.createtexture(); parameters none.
... return value a webgltexture object to which images can be bound to.
...And 2 more matches
WebGLRenderingContext.getProgramInfoLog() - Web APIs
the webglrenderingcontext.getprograminfolog returns the information log for the specified webglprogram object.
... it contains errors that occurred during failed linking or validation of webglprogram objects.
... syntax gl.getprograminfolog(program); parameters program the webglprogram to query.
...And 2 more matches
WebGLRenderingContext.getProgramParameter() - Web APIs
the webglrenderingcontext.getprogramparameter() method of the webgl api returns information about the given program.
... syntax any gl.getprogramparameter(program, pname); parameters program a webglprogram to get parameter information from.
... when using a webgl 2 context, the following values are available additionally: gl.transform_feedback_buffer_mode: returns a glenum indicating the buffer mode when transform feedback is active.
...And 2 more matches
WebGLRenderingContext.readPixels() - Web APIs
the webglrenderingcontext.readpixels() method of the webgl api reads a block of pixels from a specified rectangle of the current color framebuffer into an arraybufferview object.
... syntax // webgl1: void gl.readpixels(x, y, width, height, format, type, pixels); // webgl2: void gl.readpixels(x, y, width, height, format, type, glintptr offset); void gl.readpixels(x, y, width, height, format, type, arraybufferview pixels, gluint dstoffset); parameters x a glint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
... webgl2 adds gl.red gl.rg gl.red_integer gl.rg_integer gl.rgb_integer gl.rgba_integer type a glenum specifying the data type of the pixel data.
...And 2 more matches
WebGLRenderingContext.validateProgram() - Web APIs
the webglrenderingcontext.validateprogram() method of the webgl api validates a webglprogram.
... it checks if it is successfully linked and if it can be used in the current webgl state.
... syntax void gl.validateprogram(program); parameters program a webglprogram to validate.
...And 2 more matches
WebGLTransformFeedback - Web APIs
the webgltransformfeedback interface is part of the webgl 2 api and enables transform feedback, which is the process of capturing primitives generated by vertex processing.
... when working with webgltransformfeedback objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createtransformfeedback() webgl2renderingcontext.deletetransformfeedback() webgl2renderingcontext.istransformfeedback() webgl2renderingcontext.bindtransformfeedback() webgl2renderingcontext.begintransformfeedback() webgl2renderingcontext.endtransformfeedback() webgl2renderingcontext.pausetransformfeedback() webgl2renderingcontext.resumetransformfeedback() webgl2renderingcontext.transformfeedbackvaryings() webgl2renderingcontext.gettransformfeedbackvarying() examples creating a webgltransformfeedback object in this example, gl must be a...
... webgl2renderingcontext.
...And 2 more matches
XRWebGLLayer.getViewport() - Web APIs
the xrwebgllayer interface's getviewport() method returns the xrviewport that should be used to render the specified xrview into the webgl layer.
... syntax let viewport = xrwebgllayer.getviewport(view); parameters view an xrview object indicating the view for which the viewport is to be returned.
... exceptions invalidstateerror either the specified view is not in an active xrframe or that xrframe and the xrwebgllayer are not part of the same webxr session.
...And 2 more matches
XRWebGLLayerInit.depth - Web APIs
when using the xrwebgllayer() constructor to create a new webgl rendering layer for webxr, providing as the layerinit parameter an object whose depth property is false will request that the new layer be created without a depth buffer.
... syntax let layerinit = { depth: false }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { depth: false }); value a boolean which can be set to false to specify that the new webgl layer should not have a depth buffer.
... you can determine whether or not the depth buffer is being used by a given webgl rendering layer during your xr session by checking the value returned by xrwebgllayer.ignoredepthvalues.
...And 2 more matches
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
the xrwebgllayerinit dictionary's framebufferscalefactor property, when specified upon instantiating a new xrwebgllayer using its constructor, xrwebgllayer(), specifies the scaling factor to use when determining the size of the frame buffer to use when rendering the scene, relative to the default xr device display resolution.
... you can determine the scaling factor that you would need to apply to match the default frame buffer resolution by using the xrwebgllayer.getnativeframebufferscalefactor() static function.
... syntax let layerinit = { framebufferscalefactor: scalefactor }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { framebufferscalefactor: scalefactor }); value a floating-point value indicating a multiplier to apply to the default frame buffer resolution in order to determine the resolution of the frame buffer for the xrwebgllayer.
...And 2 more matches
XRWebGLLayerInit.ignoreDepthValues - Web APIs
the xrwebgllayerinit dictionary's boolean ignoredepthvalues property can be provided in the options passed into the xrwebgllayer() constructor to indicate that the depth buffer, if it exists, should be ignored while composing the scene.
... this property differs from depth in that depth requests a webgl layer that does not have a depth buffer at all, while ignoredepthvalues merely asks that the depth layer be ignored.
... syntax let layerinit = { ignoredepthvalues: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { ignoredepthvalues: boolvalue }); value a boolean value which can be set to true to disable the use of the depth buffer by the webgl rendering layer created by the xrwebgllayer() constructor.
...And 2 more matches
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
the webgl_debug_shaders.gettranslatedshadersource() method is part of the webgl api and allows you to debug a translated shader.
... syntax gl.getextension('webgl_debug_shaders').gettranslatedshadersource(shader); parameters shader a webglshader to get the translated source from.
...an empty string is returned, if: no source has been defined or, webglrenderingcontext.compileshader() has not yet been called or, the translation for the shader failed.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var shader = gl.createshader(gl.fragment_shader); gl.shadersource(shader, 'void main() { gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0); }'); gl.compileshader(shader); var src = gl.getextension('webgl_debug_shaders').gettranslatedshadersource(shader); console.log(src); // "void main(){ // (gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0)); // }" specifications specification status comment webgl_debug_shadersthe definition of 'webgl_debug_shaders.gettranslatedshadersource' in that specification.
WebGL2RenderingContext.bindBufferBase() - Web APIs
the webgl2renderingcontext.bindbufferbase() method of the webgl 2 api binds a given webglbuffer to a given binding point (target) at a given index.
... buffer a webglbuffer which to bind to the binding point (target).
... examples gl.bindbufferbase(gl.transform_feedback_buffer, 0, buffer); specifications specification status comment webgl 2.0the definition of 'bindbufferbase' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.bindBufferRange() - Web APIs
the webgl2renderingcontext.bindbufferrange() method of the webgl 2 api binds a range of a given webglbuffer to a given binding point (target) at a given index.
... buffer a webglbuffer which to bind to the binding point (target).
... examples gl.bindbufferrange(gl.transform_feedback_buffer, 1, buffer, 0, 4); specifications specification status comment webgl 2.0the definition of 'bindbufferrange' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the webgl2renderingcontext.bindtransformfeedback() method of the webgl 2 api binds a passed webgltransformfeedback object to the current gl state.
... transformfeedback a webgltransformfeedback object to bind.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); specifications specification status comment webgl 2.0the definition of 'bindtransformfeedback' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.createVertexArray() - Web APIs
the webgl2renderingcontext.createvertexarray() method of the webgl 2 api creates and initializes a webglvertexarrayobject object that represents a vertex array object (vao) pointing to vertex array data and which provides names for different sets of vertex data.
... syntax webglvertexarrayobject gl.createvertexarray(); parameters none.
... return value a webglvertexarrayobject representing a vertex array object (vao) which points to vertex array data.
... specifications specification status comment webgl 2.0the definition of 'createvertexarray' in that specification.
WebGL2RenderingContext.drawArraysInstanced() - Web APIs
the webgl2renderingcontext.drawarraysinstanced() method of the webgl 2 api renders primitives from array data like the gl.drawarrays() method.
... note: when using webgl 1, the angle_instanced_arrays extension can provide this method, too.
... examples gl.drawarraysinstanced(gl.points, 0, 8, 4); specifications specification status comment webgl 2.0the definition of 'drawarraysinstanced' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
the webgl2renderingcontext.drawelementsinstanced() method of the webgl 2 api renders primitives from array data like the gl.drawelements() method.
... note: when using webgl 1, the angle_instanced_arrays extension can provide this method, too.
... examples gl.drawelementsinstanced(gl.points, 2, gl.unsigned_short, 0, 4); specifications specification status comment webgl 2.0the definition of 'drawelementsinstanced' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
the webgl2renderingcontext.getactiveuniformblockname() method of the webgl 2 api retrieves the name of the active uniform block at a given index within a webglprogram.
... syntax domstring gl.getactiveuniformblockname(program, uniformblockindex); parameters program a webglprogram containing the uniform block.
... examples var blockname = gl.getactiveuniformblockname(program, 0); specifications specification status comment webgl 2.0the definition of 'getactiveuniformblockname' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the webgl2renderingcontext.getactiveuniformblockparameter() method of the webgl 2 api retrieves information about an active uniform block within a webglprogram.
... syntax any gl.getactiveuniformblockparameter(program, uniformblockindex, pname); parameters program a webglprogram containing the active uniform block.
... examples var blocksize = gl.getactiveuniformblockparameter(program, blockindex, gl.uniform_block_data_size); specifications specification status comment webgl 2.0the definition of 'getactiveuniformblockparameter' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getActiveUniforms() - Web APIs
the webgl2renderingcontext.getactiveuniforms() method of the webgl 2 api retrieves information about active uniforms within a webglprogram.
... syntax any gl.getactiveuniforms(program, uniformindices, pname); parameters program a webglprogram containing the active uniforms.
... examples var uniformindices = gl.getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); var uniformoffsets = gl.getactiveuniforms(program, uniformindices, gl.uniform_offset); specifications specification status comment webgl 2.0the definition of 'getactiveuniforms' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getQuery() - Web APIs
the webgl2renderingcontext.getquery() method of the webgl 2 api returns the currently active webglquery for the target, or null.
... syntax webglquery gl.getquery(target, pname); parameters target a glenum specifying the target of the query.
... return value a webglquery object.
... examples var currentquery = gl.getquery(gl.any_samples_passed, gl.current_query); specifications specification status comment webgl 2.0the definition of 'getquery' in that specification.
WebGL2RenderingContext.getSyncParameter() - Web APIs
the webgl2renderingcontext.getsyncparameter() method of the webgl 2 api returns parameter information of a webglsync object.
... syntax any gl.getsyncparameter(sync, pname); parameters sync a webglsync object.
... examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.getsyncparameter(sync, gl.sync_status); specifications specification status comment webgl 2.0the definition of 'getsyncparameter' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
the webgl2renderingcontext.getuniformblockindex() method of the webgl 2 api retrieves the index of a uniform block within a webglprogram.
... syntax gluint gl.getuniformblockindex(program, uniformblockname); parameters program a webglprogram containing the uniform block.
... examples // assuming a shader with the following declaration: // uniform ubodata { // mat4 foo; // } instancename; // use the block name, not the instance name: var blockindex = gl.getuniformblockindex(program, 'ubodata'); specifications specification status comment webgl 2.0the definition of 'getuniformblockindex' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getUniformIndices() - Web APIs
the webgl2renderingcontext.getuniformindices() method of the webgl 2 api retrieves the indices of a number of uniforms within a webglprogram.
... syntax sequence<gluint> gl.getuniformindices(program, uniformnames); parameters program a webglprogram containing uniforms whose indices to query.
... examples var uniformindices = gl.getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); specifications specification status comment webgl 2.0the definition of 'getuniformindices' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.isVertexArray() - Web APIs
the webgl2renderingcontext.isvertexarray() method of the webgl api returns true if the passed object is a valid webglvertexarrayobject object.
... syntax glboolean gl.isvertexarray(vertexarray); parameters vertexarray a webglvertexarrayobject (vao) object to test.
... return value a glboolean indicating whether the given object is a valid webglvertexarrayobject object (true) or not (false).
... gl.isvertexarray(vao); specifications specification status comment webgl 2.0the definition of 'isvertexarray' in that specification.
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the webgl2renderingcontext.transformfeedbackvaryings() method of the webgl 2 api specifies values to record in webgltransformfeedback buffers.
... syntax void gl.transformfeedbackvaryings(program, varyings, buffermode); parameters program a webglprogram.
...sformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); var transformfeedbackoutputs = ['gl_position', 'anotheroutput']; gl.transformfeedbackvaryings(shaderprog, transformfeedbackoutputs, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status comment webgl 2.0the definition of 'transformfeedbackvaryings' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uniform[1234][uif][v]() methods of the webgl api specify values of uniform variables.
...orm4iv(location, data, optional srcoffset, optional srclength); void gl.uniform1uiv(location, data, optional srcoffset, optional srclength); void gl.uniform2uiv(location, data, optional srcoffset, optional srclength); void gl.uniform3uiv(location, data, optional srcoffset, optional srclength); void gl.uniform4uiv(location, data, optional srcoffset, optional srclength); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
... specifications specification status comment webgl 2.0the definition of 'uniform' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.uniformBlockBinding() - Web APIs
the webgl2renderingcontext.uniformblockbinding() method of the webgl 2 api assigns binding points for active uniform blocks.
... syntax void gl.uniformblockbinding(program, uniformblockindex, uniformblockbinding); parameters program a webglprogram containing the active uniform block whose binding to assign.
... examples gl.uniformblockbinding(program, 0, 1); specifications specification status comment webgl 2.0the definition of 'uniformblockbinding' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
the webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uniform variables.
...l.uniformmatrix4x3fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uniformmatrix2x4fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uniformmatrix3x4fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uniformmatrix4fv(location, transpose, data, optional srcoffset, optional srclength); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
... examples gl.uniformmatrix2x3fv(loc, false, [1, 2, 3, 4, 5, 6]); specifications specification status comment webgl 2.0the definition of 'uniformmatrix' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.vertexAttribDivisor() - Web APIs
the webgl2renderingcontext.vertexattribdivisor() method of the webgl 2 api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawarraysinstanced() and gl.drawelementsinstanced().
... note: when using webgl 1, the angle_instanced_arrays extension can provide this method, too.
... examples gl.vertexattribdivisor(0, 2); specifications specification status comment webgl 2.0the definition of 'vertexattribdivisor' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
the webgl2renderingcontext.vertexattribipointer() method of the webgl 2 api specifies integer data formats and locations of vertex attributes in a vertex attributes array.
... description very similar to webglrenderingcontext.vertexattribpointer().
... bones[boneindices.s] * vec4(position, 1.0) * boneweights.s + bones[boneindices.t] * vec4(position, 1.0) * boneweights.t + bones[boneindices.p] * vec4(position, 1.0) * boneweights.p + bones[boneindices.q] * vec4(position, 1.0) * boneweights.q; gl_position = mvmatrix * skinnedposition; } </script> specifications specification status comment webgl 2.0the definition of 'vertexattribipointer' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.waitSync() - Web APIs
the webgl2renderingcontext.waitsync() method of the webgl 2 api returns immediately, but waits on the gl server until the given webglsync object is signaled.
... syntax void gl.waitsync(sync, flags, timeout); parameters sync a webglsync object on which to wait on.
... examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.waitsync(sync, 0, gl.timeout_ignored); specifications specification status comment webgl 2.0the definition of 'waitsync' in that specification.
... editor's draft initial definition for webgl.
WebGLQuery - Web APIs
the webglquery interface is part of the webgl 2 api and provides ways to asynchronously query for information.
... when working with webglquery objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createquery() webgl2renderingcontext.deletequery() webgl2renderingcontext.isquery() webgl2renderingcontext.beginquery() webgl2renderingcontext.endquery() webgl2renderingcontext.getquery() webgl2renderingcontext.getqueryparameter() examples creating a webglquery object in this example, gl must be a webgl2renderingcontext.
... webglquery objects are not available in webgl 1.
... var query = gl.createquery(); specifications specification status comment webgl 2.0the definition of 'webglquery' in that specification.
WebGLRenderingContext.bindAttribLocation() - Web APIs
the webglrenderingcontext.bindattriblocation() method of the webgl api binds a generic vertex index to an attribute variable.
... syntax void gl.bindattriblocation(program, index, name); parameters program a webglprogram object to bind.
...this name cannot start with "webgl_" or "_webgl_", as these are reserved for use by webgl.
... examples gl.bindattriblocation(program, colorlocation, 'vcolor'); specifications specification status comment webgl 1.0the definition of 'bindattriblocation' in that specification.
WebGLRenderingContext.bindRenderbuffer() - Web APIs
the webglrenderingcontext.bindrenderbuffer() method of the webgl api binds a given webglrenderbuffer to a target, which must be gl.renderbuffer.
... renderbuffer a webglrenderbuffer object to bind.
... examples binding a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); gl.bindrenderbuffer(gl.renderbuffer, renderbuffer); getting current bindings to check the current renderbuffer binding, query the renderbuffer_binding constant.
... gl.getparameter(gl.renderbuffer_binding); specifications specification status comment webgl 1.0the definition of 'bindrenderbuffer' in that specification.
WebGLRenderingContext.blendFunc() - Web APIs
the webglrenderingcontext.blendfunc() method of the webgl api defines which function is used for blending pixel arithmetic.
... examples to use the blend function, you first have to activate blending with webglrenderingcontext.enable() with the argument gl.blend.
... gl.enable(gl.blend); gl.blendfunc(gl.src_color, gl.dst_color); gl.getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status comment webgl 1.0the definition of 'blendfunc' in that specification.
... in webgl, constant color and constant alpha cannot be used together as source and destination factors in the blend function.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
the webglrenderingcontext.blendfuncseparate() method of the webgl api defines which function is used for blending pixel arithmetic for rgb and alpha components separately.
... examples to use the blend function, you first have to activate blending with webglrenderingcontext.enable() with the argument gl.blend.
... gl.enable(gl.blend); gl.blendfuncseparate(gl.src_color, gl.dst_color, gl.one, gl.zero); gl.getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status comment webgl 1.0the definition of 'blendfunc' in that specification.
... in webgl, constant color and constant alpha cannot be used together as source and destination factors in the blend function.
WebGLRenderingContext.createBuffer() - Web APIs
the webglrenderingcontext.createbuffer() method of the webgl api creates and initializes a webglbuffer storing data such as vertices or colors.
... syntax webglbuffer gl.createbuffer(); parameters none.
... return value a webglbuffer storing data such as vertices or colors.
... examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); specifications specification status comment webgl 1.0the definition of 'createbuffer' in that specification.
WebGLRenderingContext.createFramebuffer() - Web APIs
the webglrenderingcontext.createframebuffer() method of the webgl api creates and initializes a webglframebuffer object.
... syntax webglframebuffer gl.createframebuffer(); parameters none.
... return value a webglframebuffer object.
... examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); specifications specification status comment webgl 1.0the definition of 'createframebuffer' in that specification.
WebGLRenderingContext.createRenderbuffer() - Web APIs
the webglrenderingcontext.createrenderbuffer() method of the webgl api creates and initializes a webglrenderbuffer object.
... syntax webglrenderbuffer gl.createrenderbuffer(); parameters none.
... return value a webglrenderbuffer object that stores data such an image, or can be source or target of an rendering operation.
... examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); specifications specification status comment webgl 1.0the definition of 'createrenderbuffer' in that specification.
WebGLRenderingContext.deleteBuffer() - Web APIs
the webglrenderingcontext.deletebuffer() method of the webgl api deletes a given webglbuffer.
... syntax void gl.deletebuffer(buffer); parameters buffer a webglbuffer object to delete.
... examples deleting a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); // ...
... gl.deletebuffer(buffer); specifications specification status comment webgl 1.0the definition of 'deletebuffer' in that specification.
WebGLRenderingContext.deleteFramebuffer() - Web APIs
the webglrenderingcontext.deleteframebuffer() method of the webgl api deletes a given webglframebuffer object.
... syntax void gl.deleteframebuffer(framebuffer); parameters framebuffer a webglframebuffer object to delete.
... examples deleting a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); // ...
... gl.deleteframebuffer(framebuffer); specifications specification status comment webgl 1.0the definition of 'deleteframebuffer' in that specification.
WebGLRenderingContext.deleteProgram() - Web APIs
the webglrenderingcontext.deleteprogram() method of the webgl api deletes a given webglprogram object.
... syntax void gl.deleteprogram(program); parameters program a webglprogram object to delete.
... examples deleting a program var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var program = gl.createprogram(); // ...
... gl.deleteprogram(program); specifications specification status comment webgl 1.0the definition of 'deleteprogram' in that specification.
WebGLRenderingContext.deleteRenderbuffer() - Web APIs
the webglrenderingcontext.deleterenderbuffer() method of the webgl api deletes a given webglrenderbuffer object.
... syntax void gl.deleterenderbuffer(renderbuffer); parameters renderbuffer a webglrenderbuffer object to delete.
... examples deleting a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); // ...
... gl.deleterenderbuffer(renderbuffer); specifications specification status comment webgl 1.0the definition of 'deleterenderbuffer' in that specification.
WebGLRenderingContext.deleteShader() - Web APIs
the webglrenderingcontext.deleteshader() method of the webgl api marks a given webglshader object for deletion.
...this method has no effect if the shader has already been deleted, and the webglshader is automatically marked for deletion when it is destroyed by the garbage collector.
... syntax void gl.deleteshader(shader); parameters shader a webglshader object to delete.
... examples deleting a shader gl.deleteshader(shader); specifications specification status comment webgl 1.0the definition of 'deleteshader' in that specification.
WebGLRenderingContext.deleteTexture() - Web APIs
the webglrenderingcontext.deletetexture() method of the webgl api deletes a given webgltexture object.
... syntax void gl.deletetexture(texture); parameters texture a webgltexture object to delete.
... examples deleting a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); // ...
... gl.deletetexture(texture); specifications specification status comment webgl 1.0the definition of 'deletetexture' in that specification.
WebGLRenderingContext.detachShader() - Web APIs
the webglrenderingcontext.detachshader() method of the webgl api detaches a previously attached webglshader from a webglprogram.
... syntax void gl.detachshader(program, shader); parameters program a webglprogram.
... shader a fragment or vertex webglshader.
... specifications specification status comment webgl 1.0the definition of 'detachshader' in that specification.
WebGLRenderingContext.generateMipmap() - Web APIs
the webglrenderingcontext.generatemipmap() method of the webgl api generates a set of mipmaps for a webgltexture object.
... when using a webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
... examples gl.generatemipmap(gl.texture_2d); specifications specification status comment webgl 1.0the definition of 'generatemipmap' in that specification.
... recommendation initial definition for webgl.
WebGLRenderingContext.getActiveAttrib() - Web APIs
the webglrenderingcontext.getactiveattrib() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a vertex attribute.
... syntax webglactiveinfo gl.getactiveattrib(program,index); parameters program a webglprogram containing the vertex attribute.
... return value a webglactiveinfo object.
... examples const numattribs = gl.getprogramparameter(program, gl.active_attributes); for (let i = 0; i < numattribs; ++i) { const info = gl.getactiveattrib(program, i); console.log('name:', info.name, 'type:', info.type, 'size:', info.size); } specifications specification status comment webgl 1.0the definition of 'getactiveattrib' in that specification.
WebGLRenderingContext.getAttachedShaders() - Web APIs
the webglrenderingcontext.getattachedshaders() method of the webgl api returns a list of webglshader objects attached to a webglprogram.
... syntax sequence<webglshader> gl.getattachedshaders(program); parameters program a webglprogram object to get attached shaders for.
... return value an array of webglshader objects that are attached to the given webglprogram.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.getattachedshaders(program); specifications specification status comment webgl 1.0the definition of 'getattachedshaders' in that specification.
WebGLRenderingContext.getContextAttributes() - Web APIs
the webglrenderingcontext.getcontextattributes() method returns a webglcontextattributes object that contains the actual context parameters.
... syntax gl.getcontextattributes(); return value a webglcontextattributes object that contains the actual context parameters, or null if the context is lost.
... examples given this <canvas> element <canvas id="canvas"></canvas> and given this webgl context var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getcontextattributes(); the getcontextattributes method returns an object that describes the attributes set on this context, for example: { alpha: true, antialias: true, depth: true, failifmajorperformancecaveat: false, powerpreference: "default", premultipliedalpha: true, preservedrawingbuffer: false, stencil: false, desynchronized: false } the context attributes can be set when creating the context using the htmlcanvaselement.getcontext() method: canvas.getcontext('webgl', { antialias: false, depth: false }); see getcontext() for more information...
... specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.getcontextattributes' in that specification.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
the webglrenderingcontext.getshaderinfolog returns the information log for the specified webglshader object.
... syntax gl.getshaderinfolog(shader); parameters shader a webglshader to query.
...when a webglshader object is initially created, its information log will be a string of length 0.
...*/ gl.compileshader(shader); var message = gl.getshaderinfolog(shader); if (message.length > 0) { /* message may be an error or a warning */ throw message; } specifications specification status comment webgl 1.0the definition of 'getshaderinfolog' in that specification.
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the webglrenderingcontext.getshaderprecisionformat() method of the webgl api returns a new webglshaderprecisionformat object describing the range and precision for the specified shader numeric format.
... syntax webglshaderprecisionformat gl.getshaderprecisionformat(shadertype, precisiontype); parameters shadertype either a gl.fragment_shader or a gl.vertex_shader.
... return value a webglshaderprecisionformat object or null, if an error occurs.
... var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status comment webgl 1.0the definition of 'getshaderprecisionformat' in that specification.
WebGLRenderingContext.hint() - Web APIs
the webglrenderingcontext.hint() method of the webgl api specifies hints for certain behaviors.
...possible values: gl.generate_mipmap_hint: quality of filtering when generating mipmap images with webglrenderingcontext.generatemipmap().
... when using a webgl 2 context, the following values are available additionally: gl.fragment_shader_derivative_hint: same as ext.fragment_shader_derivative_hint_oes mode sets the behavior.
... gl.hint(gl.generate_mipmap_hint, gl.fastest); specifications specification status comment webgl 1.0the definition of 'hint' in that specification.
WebGLRenderingContext.isContextLost() - Web APIs
the webglrenderingcontext.iscontextlost() method returns a boolean indicating whether or not the webgl context has been lost and must be re-established before rendering can resume.
... usage notes there are several reasons why a webgl context may be lost, making it necessary to re-establish the context before resuming rendering.
...this would cause every webgl context to be lost throughout the entire browser.
... examples for example, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if (!gl.getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.iscontextlost' in that specification.
WebGLRenderingContext.isProgram() - Web APIs
the webglrenderingcontext.isprogram() method of the webgl api returns true if the passed webglprogram is valid, false otherwise.
... syntax glboolean gl.isprogram(program); parameters program a webglprogram to check.
... examples checking a program var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var program = gl.createprogram(); // ...
... gl.isprogram(program); specifications specification status comment webgl 1.0the definition of 'isprogram' in that specification.
WebGLRenderingContext.isShader() - Web APIs
the webglrenderingcontext.isshader() method of the webgl api returns true if the passed webglshader is valid, false otherwise.
... syntax glboolean gl.isshader(shader); parameters shader a webglshader to check.
... examples checking a shader var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var shader = gl.createshader(gl.vertex_shader); // ...
... gl.isshader(shader); specifications specification status comment webgl 1.0the definition of 'isshader' in that specification.
WebGLRenderingContext.lineWidth() - Web APIs
the webglrenderingcontext.linewidth() method of the webgl api sets the line width of rasterized lines.
... the webgl spec, based on the opengl es 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined.
... as of january 2017 most implementations of webgl only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits.
... gl.getparameter(gl.aliased_line_width_range); specifications specification status comment webgl 1.0the definition of 'linewidth' in that specification.
WebGLRenderingContext.linkProgram() - Web APIs
the webglrenderingcontext interface's linkprogram() method links a given webglprogram, completing the process of preparing the gpu code for the program's fragment and vertex shaders.
... syntax void gl.linkprogram(program); parameters program the webglprogram to link.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); if ( !gl.getprogramparameter( program, gl.link_status) ) { var info = gl.getprograminfolog(program); throw new error('could not compile webgl program.
... \n\n' + info); } specifications specification status comment webgl 1.0the definition of 'linkprogram' in that specification.
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the webglrenderingcontext.uniform[1234][fi][v]() methods of the webgl api specify values of uniform variables.
... many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[1234][uif][v]().
...on, v0, v1); void gl.uniform2iv(location, value); void gl.uniform3f(location, v0, v1, v2); void gl.uniform3fv(location, value); void gl.uniform3i(location, v0, v1, v2); void gl.uniform3iv(location, value); void gl.uniform4f(location, v0, v1, v2, v3); void gl.uniform4fv(location, value); void gl.uniform4i(location, v0, v1, v2, v3); void gl.uniform4iv(location, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
... examples gl.uniform1f(u_alpha, 0.8); specifications specification status comment webgl 1.0the definition of 'uniform' in that specification.
WebGLRenderingContext.viewport() - Web APIs
the webglrenderingcontext.viewport() method of the webgl api sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.
... examples when you first create a webgl context, the size of the viewport will match the size of the canvas.
... however, if you resize the canvas, you will need to tell the webgl context a new viewport setting.
...int32array[0, 0, 640, 480] specifications specification status comment webgl 1.0the definition of 'viewport' in that specification.
WebGLSampler - Web APIs
the webglsampler interface is part of the webgl 2 api and stores sampling parameters for webgltexture access inside of a shader.
... when working with webglsampler objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createsampler() webgl2renderingcontext.deletesampler() webgl2renderingcontext.issampler() webgl2renderingcontext.bindsampler() webgl2renderingcontext.getsamplerparameter() examples creating a webglsampler object in this example, gl must be a webgl2renderingcontext.
... webglsampler objects are not available in webgl 1.
... var sampler = gl.createsampler(); specifications specification status comment webgl 2.0the definition of 'webglsample' in that specification.
WebGLSync - Web APIs
WebAPIWebGLSync
the webglsync interface is part of the webgl 2 api and is used to synchronize activities between the gpu and the application.
... when working with webglsync objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.fencesync() webgl2renderingcontext.deletesync() webgl2renderingcontext.issync() webgl2renderingcontext.clientwaitsync() webgl2renderingcontext.waitsync() webgl2renderingcontext.getsyncparameter() examples creating a webglsync object in this example, gl must be a webgl2renderingcontext.
... webglsync objects are not available in webgl 1.
... var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); specifications specification status comment webgl 2.0the definition of 'webglsync' in that specification.
Canvas size and WebGL - Web APIs
« previousnext » this webgl example explores the effect of setting (or not setting) the canvas size to its element size in css pixels, as it appears in the browser window.
... effect of canvas size on rendering with webgl with scissor() and clear() we can demonstrate how the webgl drawing buffer is affected by the size of the canvas.
...ckground-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context.
... " + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Animating textures in WebGL - Web APIs
we need both of these checks because it will produce an error if you upload a video to webgl that has no data available yet.
... checking for both of these events guarantees there is data available and it's safe to start uploading video to a webgl texture.
... the video must be loaded from a secure source in order to be used to provide texture data to webgl.
...webgl knows how to pull the current frame out and use it as a texture.
Using shaders to apply color in WebGL - Web APIs
applying color to the vertices in webgl objects are built using sets of vertices, each of which has a position and a color.
...to do this, we first need to create an array of vertex colors, then store it into a webgl buffer.
...then a new webgl buffer is allocated to store these colors, and the array is converted into floats and stored into the buffer.
... then, drawscene() can have the following added to it so it actually uses these colors when drawing the square: // tell webgl how to pull out the colors from the color buffer // into the vertexcolor attribute.
XRWebGLLayerInit.alpha - Web APIs
the alpha property is a boolean value which, if present and set to true in the xrwebgllayerinit dictionary passed into the xrwebgllayer() constructor, specifies that the new layer's color buffer is to include an alpha channel.
... syntax let layerinit = { alpha: boolvalue }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { alpha: boolvalue }); value a boolean which can be set to true to request that the new webgl layer for rendering the webxr scene is to have an alpha channel.
... example in this example, a new xrwebgllayer is created for a webxr session, xrsession, without an alpha channel.
... xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { alpha: false }); }); specifications specification status comment webxr device apithe definition of 'xrwebgllayerinit.alpha' in that specification.
XRWebGLLayerInit.stencil - Web APIs
when using the xrwebgllayer() constructor to create a new webgl rendering layer for webxr, providing as the layerinit parameter an object whose stencil property is false requests that the new layer be created without a stencil buffer.
... syntax let layerinit = { stencil: false }; let gllayer = new xrwebgllayer(xrsession, gl, layerinit); let gllayer = new xrwebgllayer(xrsession, gl, { stencil: false }); value a boolean which can be set to false to specify that the new webgl layer should not include a stencil buffer.
... example in this example, a new xrwebgllayer is created for a webxr session, xrsession, without a stencil buffer.
... xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { stencil: false }); }); specifications specification status comment webxr device apithe definition of 'xrwebgllayerinit.stencil' in that specification.
XRWebGLLayerInit - Web APIs
the webxr device api's xrwebgllayerinit dictionary is used to provide configuration options when creating a new xrwebgllayer object with the xrwebgllayer() constructor.
...the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.
... examples given an xrsession, xrsession, and a webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position relative to the viewer.
... const layeroptions = { ignoredepthvalues: true }; xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, layeroptions); }); specifications specification status comment webxr device apithe definition of 'xrwebgllayerinit' in that specification.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
the webglcontextcreationerror event of the webgl api is fired if the user agent is unable to create a webglrenderingcontext context.
... this event has a webglcontextevent.statusmessage property, which can contain a platform dependent string with more information about the failure.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('webgl'); // logs statusmessage or "unknown error" if unable to create webgl context specifications specification status comment webgl 1.0the definition of 'webglcontextcreationerror' in that specification.
HTMLCanvasElement: webglcontextlost event - Web APIs
the webglcontextlost event of the webgl api is fired if the user agent detects that the drawing buffer associated with a webglrenderingcontext object has been lost.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextlost event: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // "webglcontextlost" event is logged.
... specifications specification status comment webgl 1.0the definition of 'webglcontextlost' in that specification.
WEBGL_lose_context.restoreContext() - Web APIs
the webgl_lose_context.restorecontext() method is part of the webgl api and allows you to simulate restoring the context of a webglrenderingcontext object.
... syntax gl.getextension('webgl_lose_context').restorecontext(); errors thrown invalid_operation if the context was not lost.
... examples with this method, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); specifications specification status comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification.
WebGL2RenderingContext.beginQuery() - Web APIs
the webgl2renderingcontext.beginquery() method of the webgl 2 api starts an asynchronous query.
... query a webglquery object for which to start the querying.
... specifications specification status comment webgl 2.0the definition of 'beginquery' in that specification.
WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the webgl2renderingcontext.begintransformfeedback() method of the webgl 2 api starts a transform feedback operation.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment webgl 2.0the definition of 'begintransformfeedback' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.bindSampler() - Web APIs
the webgl2renderingcontext.bindsampler() method of the webgl 2 api binds a passed webglsampler object to the texture unit at the passed index.
... sampler a webglsampler object to bind.
... examples var sampler = gl.createsampler(); gl.bindsampler(0, sampler); specifications specification status comment webgl 2.0the definition of 'bindsampler' in that specification.
WebGL2RenderingContext.bindVertexArray() - Web APIs
the webgl2renderingcontext.bindvertexarray() method of the webgl 2 api binds a passed webglvertexarrayobject object to the buffer.
... syntax void gl.bindvertexarray(vertexarray); parameters vertexarray a webglvertexarrayobject (vao) object to bind.
... specifications specification status comment webgl 2.0the definition of 'bindvertexarray' in that specification.
WebGL2RenderingContext.blitFramebuffer() - Web APIs
the webgl2renderingcontext.blitframebuffer() method of the webgl 2 api transfers a block of pixels from the read framebuffer to the draw framebuffer.
... examples gl.blitframebuffer(0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height, gl.color_buffer_bit, gl.nearest); specifications specification status comment webgl 2.0the definition of 'blitframebuffer' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
the webgl2renderingcontext.clearbuffer[fiuv]() methods of the webgl 2 api clear buffers from the currently bound framebuffer.
... examples gl.clearbufferiv(gl.color, 0, new int32array([r, g, b, a])); gl.clearbufferuiv(gl.color, 0, new uint32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, new float32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, [0.0, 0.0, 0.0, 0.0]); gl.clearbufferfi(gl.depth_stencil, 0, 1.0, 0); specifications specification status comment webgl 2.0the definition of 'clearbuffer[fiuv]()' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
... examples gl.compressedtexsubimage3d(gl.texture_3d, 0, 0, 0, 512, 512, 512, gl.compressed_r11_eac, texturedata); specifications specification status comment webgl 2.0the definition of 'compressedtexsubimage3d' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.copyBufferSubData() - Web APIs
the webgl2renderingcontext.copybuffersubdata() method of the webgl 2 api copies part of the data of a buffer to another buffer.
...uffer(gl.array_buffer, srcbuffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); gl.bindbuffer(gl.copy_read_buffer, srcbuffer); gl.bindbuffer(gl.array_buffer, dstbuffer); gl.bufferdata(gl.array_buffer, new float32array(length), gl.static_draw); gl.copybuffersubdata(gl.copy_read_buffer, gl.array_buffer, 0, 0, length); specifications specification status comment webgl 2.0the definition of 'copybuffersubdata' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.deleteVertexArray() - Web APIs
the webgl2renderingcontext.deletevertexarray() method of the webgl 2 api deletes a given webglvertexarrayobject object.
... syntax void gl.deletevertexarray(vertexarray); parameters vertexarray a webglvertexarrayobject (vao) object to delete.
... gl.deletevertexarray(vao); specifications specification status comment webgl 2.0the definition of 'deletevertexarray' in that specification.
WebGL2RenderingContext.drawBuffers() - Web APIs
the webgl2renderingcontext.drawbuffers() method of the webgl 2 api defines draw buffers to which fragment colors are written into.
... examples gl.drawbuffers([gl.none, gl.color_attachment1]); specifications specification status comment webgl 2.0the definition of 'drawbuffers' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.drawRangeElements() - Web APIs
the webgl2renderingcontext.drawrangeelements() method of the webgl api renders primitives from array data in a given range.
... examples gl.drawrangeelements(gl.points, 0, 7, 8, gl.unsigned_byte, 0); specifications specification status comment webgl 2.0the definition of 'drawrangeelements' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.endTransformFeedback() - Web APIs
the webgl2renderingcontext.endtransformfeedback() method of the webgl 2 api ends a transform feedback operation.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'endtransformfeedback' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getFragDataLocation() - Web APIs
the webgl2renderingcontext.getfragdatalocation() method of the webgl 2 api returns the binding of color numbers to user-defined varying out variables.
... syntax glint gl.getfragdatalocation(program, name); parameters program a webglprogram to query.
... examples // program is a linked webglprogram gl.getfragdatalocation(program, 'fragcolor'); specifications specification status comment webgl 2.0the definition of 'getfragdatalocation' in that specification.
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
the webgl2renderingcontext.getinternalformatparameter() method of the webgl 2 api returns information about implementation-dependent support for internal formats.
... examples var samples = gl.getinternalformatparameter(gl.renderbuffer, gl.rgba8, gl.samples); specifications specification status comment webgl 2.0the definition of 'getinternalformatparameter' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.getQueryParameter() - Web APIs
the webgl2renderingcontext.getqueryparameter() method of the webgl 2 api returns parameter information of a webglquery object.
... syntax any gl.getqueryparameter(query, pname); parameters query a webglquery object.
... examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); var result = gl.getqueryparameter(query, gl.query_result); specifications specification status comment webgl 2.0the definition of 'getqueryparameter' in that specification.
WebGL2RenderingContext.getSamplerParameter() - Web APIs
the webgl2renderingcontext.getsamplerparameter() method of the webgl 2 api returns parameter information of a webglsampler object.
... syntax any gl.getsamplerparameter(sampler, pname); parameters sampler a webglsampler object.
... examples var sampler = gl.createsampler(); gl.getsamplerparameter(sampler, gl.texture_compare_func); specifications specification status comment webgl 2.0the definition of 'getsamplerparameter' in that specification.
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
the webgl2renderingcontext.invalidateframebuffer() method of the webgl 2 api invalidates the contents of attachments in a framebuffer.
... examples gl.invalidateframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1]); specifications specification status comment webgl 2.0the definition of 'invalidateframebuffer' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
the webgl2renderingcontext.invalidatesubframebuffer() method of the webgl 2 api invalidates portions of the contents of attachments in a framebuffer.
... examples gl.invalidatesubframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1], 0, 0, 256, 256); specifications specification status comment webgl 2.0the definition of 'invalidatesubframebuffer' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the webgl2renderingcontext.pausetransformfeedback() method of the webgl 2 api pauses a transform feedback operation.
...gl.resumetransformfeedback(); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'pausetransformfeedback' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.readBuffer() - Web APIs
the webgl2renderingcontext.readbuffer() method of the webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.
... examples gl.readbuffer(gl.color_attachment0); specifications specification status comment webgl 2.0the definition of 'readbuffer' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
the webgl2renderingcontext.renderbufferstoragemultisample() method of the webgl 2 api returns creates and initializes a renderbuffer object's data store and allows specifying a number of samples to be used.
... examples gl.renderbufferstoragemultisample(gl.renderbuffer, 4, gl.rbga4, 256, 256); specifications specification status comment webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the webgl2renderingcontext.resumetransformfeedback() method of the webgl 2 api resumes a transform feedback operation.
...gl.resumetransformfeedback(); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment webgl 2.0the definition of 'resumetransformfeedback' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.texStorage3D() - Web APIs
the webgl2renderingcontext.texstorage3d() method of the webgl api specifies all levels of a three-dimensional texture or two-dimensional array texture.
... examples gl.texstorage3d(gl.texture_3d, 1, gl.rgb8, 256, 256, 256); specifications specification status comment webgl 2.0the definition of 'texstorage3d' in that specification.
... editor's draft initial definition for webgl.
WebGL2RenderingContext.vertexAttribI4[u]i[v]() - Web APIs
the webgl2renderingcontext.vertexattribi4[u]i[v]() methods of the webgl 2 api specify integer values for generic vertex attributes.
... examples gl.vertexattribi4i(a_foobar, 10); specifications specification status comment webgl 2.0the definition of 'vertexattribi' in that specification.
... editor's draft initial definition for webgl.
WebGLBuffer - Web APIs
the webglbuffer interface is part of the webgl api and represents an opaque buffer object storing data such as vertices or colors.
... description the webglbuffer object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webglbuffer objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindbuffer() webglrenderingcontext.createbuffer() webglrenderingcontext.deletebuffer() webglrenderingcontext.isbuffer() examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); specifications specification status comment webgl 1.0the definition of 'webglbuffer' in that specification.
WebGLContextEvent.statusMessage - Web APIs
the read-only webglcontextevent.statusmessage property contains additional event status information, or is an empty string if no additional information is available.
...this can occur, for example, if the webglcontextcreationerror event is fired.
... var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log('webgl context creation failed:' + e.statusmessage || 'unknown error'); }, false); specifications specification status comment webgl 1.0the definition of 'webglcontextevent.statusmessage' in that specification.
WebGLFramebuffer - Web APIs
the webglframebuffer interface is part of the webgl api and represents a collection of buffers that serve as a rendering destination.
... description the webglframebuffer object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webglframebuffer objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindframebuffer() webglrenderingcontext.createframebuffer() webglrenderingcontext.deleteframebuffer() webglrenderingcontext.isframebuffer() examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createframebuffer(); specifications specification status comment webgl 1.0the definition of 'webglframebuffer' in that specification.
WebGLRenderbuffer - Web APIs
the webglrenderbuffer interface is part of the webgl api and represents a buffer that can contain an image, or can be source or target of an rendering operation.
... description the webglrenderbuffer object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webglrenderbuffer objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindrenderbuffer() webglrenderingcontext.createrenderbuffer() webglrenderingcontext.deleterenderbuffer() webglrenderingcontext.isrenderbuffer() examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createrenderbuffer(); specifications specification status comment webgl 1.0the definition of 'webglrenderbuffer' in that specification.
WebGLRenderingContext.canvas - Web APIs
the webglrenderingcontext.canvas property is a read-only reference to the htmlcanvaselement or offscreencanvas object that is associated with the context.
... examples canvas element given this <canvas> element: <canvas id="canvas"></canvas> you can get back a reference to it from the webglrenderingcontext using the canvas property: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.canvas; // htmlcanvaselement offscreen canvas example using the experimental offscreencanvas object.
... var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); gl.canvas; // offscreencanvas specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.canvas' in that specification.
WebGLRenderingContext.compileShader() - Web APIs
the webglrenderingcontext.compileshader() method of the webgl api compiles a glsl shader into binary data so that it can be used by a webglprogram.
... syntax void gl.compileshader(shader); parameters shader a fragment or vertex webglshader.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, shadersource); gl.compileshader(shader); specifications specification status comment webgl 1.0the definition of 'compileshader' in that specification.
WebGLRenderingContext.createShader() - Web APIs
the webglrenderingcontext method createshader() of the webgl api creates a webglshader that can then be configured further using webglrenderingcontext.shadersource() and webglrenderingcontext.compileshader().
... syntax webglshader gl.createshader(type); parameters type either gl.vertex_shader or gl.fragment_shader examples see webglshader for usage and examples.
... specifications specification status comment webgl 1.0the definition of 'createshader' in that specification.
WebGLRenderingContext.depthRange() - Web APIs
the webglrenderingcontext.depthrange() method of the webgl api specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
... examples gl.depthrange(0.2, 0.6); to check the current depth range, query the depth_range constant which returns a float32array gl.getparameter(gl.depth_range); // float32array[0.2, 0.6] specifications specification status comment webgl 1.0the definition of 'depthrange' in that specification.
...unlike opengl, webgl requires znear and zfar values to be clamped to the range 0 to 1.
WebGLRenderingContext.getAttribLocation() - Web APIs
the webglrenderingcontext.getattriblocation() method of the webgl api returns the location of an attribute variable in a given webglprogram.
... syntax glint gl.getattriblocation(program, name); parameters program a webglprogram containing the attribute variable.
... examples gl.getattriblocation(program, 'vcolor'); specifications specification status comment webgl 1.0the definition of 'getattriblocation' in that specification.
WebGLRenderingContext.getError() - Web APIs
the webglrenderingcontext.geterror() method of the webgl api returns error information.
... gl.context_lost_webgl if the webgl context is lost, this error is returned on the first call to geterror.
... examples gl.geterror(); // gl.no_error (0) gl.enable(gl.foobar); gl.geterror(); // gl.invalid_enum; specifications specification status comment webgl 1.0the definition of 'geterror' in that specification.
WebGLRenderingContext.getShaderParameter() - Web APIs
the webglrenderingcontext.getshaderparameter() method of the webgl api returns information about the given shader.
... syntax any gl.getshaderparameter(shader, pname); parameters shader a webglshader to get parameter information from.
... examples gl.getshaderparameter(shader, gl.shader_type); specifications specification status comment webgl 1.0the definition of 'getshaderparameter' in that specification.
WebGLRenderingContext.getShaderSource() - Web APIs
the webglrenderingcontext.getshadersource() method of the webgl api returns the source code of a webglshader as a domstring.
... syntax domstring gl.getshadersource(shader); parameters shader a webglshader object to get the source code from.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.getshadersource(shader); specifications specification status comment webgl 1.0the definition of 'getshadersource' in that specification.
WebGLRenderingContext.isBuffer() - Web APIs
the webglrenderingcontext.isbuffer() method of the webgl api returns true if the passed webglbuffer is valid and false otherwise.
... syntax glboolean gl.isbuffer(buffer); parameters buffer a webglbuffer to check.
... examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.isbuffer(buffer); specifications specification status comment webgl 1.0the definition of 'isbuffer' in that specification.
WebGLRenderingContext.isFramebuffer() - Web APIs
the webglrenderingcontext.isframebuffer() method of the webgl api returns true if the passed webglframebuffer is valid and false otherwise.
... syntax glboolean gl.isframebuffer(framebuffer); parameters framebuffer a webglframebuffer to check.
... examples checking a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); gl.isframebuffer(framebuffer); specifications specification status comment webgl 1.0the definition of 'isframebuffer' in that specification.
WebGLRenderingContext.isRenderbuffer() - Web APIs
the webglrenderingcontext.isrenderbuffer() method of the webgl api returns true if the passed webglrenderbuffer is valid and false otherwise.
... syntax glboolean gl.isrenderbuffer(renderbuffer); parameters renderbuffer a webglrenderbuffer to check.
... examples checking a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); gl.isrenderbuffer(renderbuffer); specifications specification status comment webgl 1.0the definition of 'isrenderbuffer' in that specification.
WebGLRenderingContext.isTexture() - Web APIs
the webglrenderingcontext.istexture() method of the webgl api returns true if the passed webgltexture is valid and false otherwise.
... syntax glboolean gl.istexture(texture); parameters texture a webgltexture to check.
... examples checking a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); gl.istexture(texture); specifications specification status comment webgl 1.0the definition of 'istexture' in that specification.
WebGLRenderingContext.shaderSource() - Web APIs
the webglrenderingcontext.shadersource() method of the webgl api sets the source code of a webglshader.
... syntax void gl.shadersource(shader, source); parameters shader a webglshader object in which to set the source code.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.getshadersource(shader); specifications specification status comment webgl 1.0the definition of 'shadersource' in that specification.
WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmask() method of the webgl api controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
... the webglrenderingcontext.stencilmaskseparate() method can set front and back stencil writemasks to different values.
... gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmask' in that specification.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method of the webgl api controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
... the webglrenderingcontext.stencilmask() method can set both, the front and back stencil writemasks to one value at the same time.
... gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmaskseparate' in that specification.
WebGLRenderingContext.stencilOp() - Web APIs
the webglrenderingcontext.stencilop() method of the webgl api sets both the front and back-facing stencil test actions.
... gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc().
... gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_back_fail); gl.getparameter(gl.stencil_back_pass_depth_pass); gl.getparameter(gl.stencil_back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilop' in that specification.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
the webglrenderingcontext.stencilopseparate() method of the webgl api sets the front and/or back-facing stencil test actions.
... gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc().
... gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_back_fail); gl.getparameter(gl.stencil_back_pass_depth_pass); gl.getparameter(gl.stencil_back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilopseparate' in that specification.
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the webglrenderingcontext.uniformmatrix[234]fv() methods of the webgl api specify matrix values for uniform variables.
... syntax webglrenderingcontext.uniformmatrix2fv(location, transpose, value); webglrenderingcontext.uniformmatrix3fv(location, transpose, value); webglrenderingcontext.uniformmatrix4fv(location, transpose, value); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
... return value undefined examples gl.uniformmatrix2fv(loc, false, [2,1, 2,2]); specifications specification status comment webgl 1.0the definition of 'uniformmatrix' in that specification.
WebGLRenderingContext.useProgram() - Web APIs
the webglrenderingcontext.useprogram() method of the webgl api sets the specified webglprogram as part of the current rendering state.
... syntax void gl.useprogram(program); parameters program a webglprogram to use.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.useprogram(program); specifications specification status comment webgl 1.0the definition of 'useprogram' in that specification.
WebGLTexture - Web APIs
the webgltexture interface is part of the webgl api and represents an opaque texture object providing storage and state for texturing operations.
... description the webgltexture object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webgltexture objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindtexture() webglrenderingcontext.createtexture() webglrenderingcontext.deletetexture() webglrenderingcontext.istexture() examples creating a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); specifications specification status comment webgl 1.0the definition of 'webgltexture' in that specification.
WebGLUniformLocation - Web APIs
the webgluniformlocation interface is part of the webgl api and represents the location of a uniform variable in a shader program.
... description the webgluniformlocation object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webgluniformlocation objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.getuniformlocation() webglrenderingcontext.uniform() examples getting an uniform location var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var location = gl.getuniformlocation(webglprogram, 'uniformname'); specifications specification status comment webgl 1.0the definition of 'webgluniformlocation' in that specification.
WebGLVertexArrayObject - Web APIs
the webglvertexarrayobject interface is part of the webgl 2 api, represents vertex array objects (vaos) pointing to vertex array data, and provides names for different sets of vertex data.
... when working with webglvertexarrayobject objects, the following methods are useful: webgl2renderingcontext.createvertexarray() webgl2renderingcontext.deletevertexarray() webgl2renderingcontext.isvertexarray() webgl2renderingcontext.bindvertexarray() webgl 1: the oes_vertex_array_object extension allows you to use vertex array objects in a webgl 1 context.
... specifications specification status comment webgl 2.0the definition of 'webglvertexarrayobject' in that specification.
Lighting in WebGL - Web APIs
« previousnext » as should be clear by now, webgl doesn't have much built-in knowledge.
...instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, which provides a good overview of the most commonly used lighting model or if you'd like to see a webgl based explanation see this artcle.
... then we add the code to drawscene() to bind the normals array to a shader attribute so the shader code can get access to it: // tell webgl how to pull out the normals from // the normal buffer into the vertexnormal attribute.
XRWebGLLayer.framebufferHeight - Web APIs
the read-only xrwebgllayer property framebufferheight indicates the height of the framebuffer, in pixels.
... syntax let bufferheight = xrwebgllayer.framebufferheight; value the height in pixels of the xr device's framebuffer.
... let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); framewidth = gllayer.framebufferheight; frameheight = gllayer.framebufferheight; specifications specification status comment webxr device apithe definition of 'xrwebgllayer.framebufferheight' in that specification.
XRWebGLLayer.framebufferWidth - Web APIs
the read-only xrwebgllayer property framebufferwidth specifies the width of the framebuffer, in pixels.
... syntax let bufferwidth = xrwebgllayer.framebufferwidth; value the width in pixels of the xr device's framebuffer.
... let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); framewidth = gllayer.framebufferwidth; frameheight = gllayer.framebufferheight; specifications specification status comment webxr device apithe definition of 'xrwebgllayer.framebufferwidth' in that specification.
WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
the webgl_compressed_texture_astc.getsupportedprofiles() method returns an array of strings containing the names of the astc profiles supported by the implementation.
... examples var ext = gl.getextension('webgl_compressed_texture_astc'); ext.getsupportedprofiles(); // ["ldr"] specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
the webgl2renderingcontext.copytexsubimage3d() method of the webgl api copies pixels from the current webglframebuffer into an existing 3d texture sub-image.
... examples gl.copytexsubimage3d(gl.texture_3d, 0, 0, 0, 0, 0, 0, 16, 16); specifications specification status comment webgl 2.0the definition of 'copytexsubimage3d' in that specification.
WebGL2RenderingContext.endQuery() - Web APIs
the webgl2renderingcontext.endquery() method of the webgl 2 api marks the end of a given query target.
... gl.endquery(gl.any_samples_passed); specifications specification status comment webgl 2.0the definition of 'endquery' in that specification.
WebGL2RenderingContext.getBufferSubData() - Web APIs
the webgl2renderingcontext.getbuffersubdata() method of the webgl 2 api reads data from a buffer binding point and writes them to an arraybuffer or sharedarraybuffer.
... examples var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw); var arrbuffer = new arraybuffer(vertices.length * float32array.bytes_per_element); gl.getbuffersubdata(gl.array_buffer, 0, arrbuffer); specifications specification status comment webgl 2.0the definition of 'getbuffersubdata' in that specification.
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
the webgl2renderingcontext.samplerparameter[if]() methods of the webgl 2 api set webglsampler parameters.
... syntax void gl.samplerparameteri(sampler, pname, param); void gl.samplerparameterf(sampler, pname, param); parameters sampler a webglsampler object.
WebGLActiveInfo.name - Web APIs
the read-only webglactiveinfo.name property represents the name of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.name; var activeuniform = gl.getactiveuniform(program, index); activeuniform.name; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.name' in that specification.
WebGLActiveInfo.size - Web APIs
the read-only webglactiveinfo.size property is a number representing the size of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.size; var activeuniform = gl.getactiveuniform(program, index); activeuniform.size; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.size' in that specification.
WebGLActiveInfo.type - Web APIs
the read-only webglactiveinfo.type property represents the type of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.type; var activeuniform = gl.getactiveuniform(program, index); activeuniform.type; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.type' in that specification.
WebGLRenderingContext.activeTexture() - Web APIs
the webglrenderingcontext.activetexture() method of the webgl api specifies which texture unit to make active.
... gl.activetexture(gl.texture0); gl.getparameter(gl.active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status comment webgl 1.0the definition of 'activetexture' in that specification.
WebGLRenderingContext.blendColor() - Web APIs
the webglrenderingcontext.blendcolor() method of the webgl api is used to set the source and destination blending factors.
... gl.getparameter(gl.blend_color); // float32array[0, 0.5, 1, 1] specifications specification status comment webgl 1.0the definition of 'blendcolor' in that specification.
WebGLRenderingContext.clear() - Web APIs
the webglrenderingcontext.clear() method of the webgl api clears buffers to preset values.
... gl.getparameter(gl.color_clear_value); gl.getparameter(gl.depth_clear_value); gl.getparameter(gl.stencil_clear_value); specifications specification status comment webgl 1.0the definition of 'clear' in that specification.
WebGLRenderingContext.clearColor() - Web APIs
the webglrenderingcontext.clearcolor() method of the webgl api specifies the color values used when clearing color buffers.
... gl.getparameter(gl.color_clear_value); // float32array[1, 0.5, 0.5, 1] specifications specification status comment webgl 1.0the definition of 'clearcolor' in that specification.
WebGLRenderingContext.clearDepth() - Web APIs
the webglrenderingcontext.cleardepth() method of the webgl api specifies the clear value for the depth buffer.
... gl.getparameter(gl.depth_clear_value); // 0.5 specifications specification status comment webgl 1.0the definition of 'cleardepth' in that specification.
WebGLRenderingContext.clearStencil() - Web APIs
the webglrenderingcontext.clearstencil() method of the webgl api specifies the clear value for the stencil buffer.
... gl.getparameter(gl.stencil_clear_value); // 1 specifications specification status comment webgl 1.0the definition of 'clearstencil' in that specification.
WebGLRenderingContext.colorMask() - Web APIs
the webglrenderingcontext.colormask() method of the webgl api sets which color components to enable or to disable when drawing or rendering to a webglframebuffer.
... gl.getparameter(gl.color_writemask); // [true, true, true, false] specifications specification status comment webgl 1.0the definition of 'colormask' in that specification.
WebGLRenderingContext.commit() - Web APIs
the webglrenderingcontext.commit() method pushes frames back to the original htmlcanvaselement, if the context is not directly fixed to a specific canvas.
... syntax void webglrenderingcontext.commit() examples var htmlcanvas = document.createelement('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcontext('webgl'); // ...
WebGLRenderingContext.copyTexImage2D() - Web APIs
the webglrenderingcontext.copyteximage2d() method of the webgl api copies pixels from the current webglframebuffer into a 2d texture image.
... examples gl.copyteximage2d(gl.texture_2d, 0, gl.rgba, 0, 0, 512, 512, 0); specifications specification status comment webgl 1.0the definition of 'copyteximage2d' in that specification.
WebGLRenderingContext.copyTexSubImage2D() - Web APIs
the webglrenderingcontext.copytexsubimage2d() method of the webgl api copies pixels from the current webglframebuffer into an existing 2d texture sub-image.
... examples gl.copytexsubimage2d(gl.texture_2d, 0, 0,0, 0, 0, 16, 16); specifications specification status comment webgl 1.0the definition of 'copytexsubimage2d' in that specification.
WebGLRenderingContext.cullFace() - Web APIs
the webglrenderingcontext.cullface() method of the webgl api specifies whether or not front- and/or back-facing polygons can be culled.
... gl.getparameter(gl.cull_face_mode) === gl.front_and_back; // true specifications specification status comment webgl 1.0the definition of 'cullface' in that specification.
WebGLRenderingContext.depthFunc() - Web APIs
the webglrenderingcontext.depthfunc() method of the webgl api specifies a function that compares incoming pixel depth to the current depth buffer value.
... gl.getparameter(gl.depth_func) === gl.never; // true specifications specification status comment webgl 1.0the definition of 'depthfunc' in that specification.
WebGLRenderingContext.depthMask() - Web APIs
the webglrenderingcontext.depthmask() method of the webgl api sets whether writing into the depth buffer is enabled or disabled.
... gl.getparameter(gl.depth_writemask); // false specifications specification status comment webgl 1.0the definition of 'depthmask' in that specification.
WebGLRenderingContext.disableVertexAttribArray() - Web APIs
the webglrenderingcontext.disablevertexattribarray() method of the webgl api turns the generic vertex attribute array off at a given index position.
... examples gl.disablevertexattribarray(0); specifications specification status comment webgl 1.0the definition of 'disablevertexattribarray' in that specification.
WebGLRenderingContext.drawArrays() - Web APIs
the webglrenderingcontext.drawarrays() method of the webgl api renders primitives from array data.
... examples gl.drawarrays(gl.points, 0, 8); specifications specification status comment webgl 1.0the definition of 'drawarrays' in that specification.
WebGLRenderingContext.drawElements() - Web APIs
the webglrenderingcontext.drawelements() method of the webgl api renders primitives from array data.
... examples gl.drawelements(gl.points, 8, gl.unsigned_byte, 0); specifications specification status comment webgl 1.0the definition of 'drawelements' in that specification.
WebGLRenderingContext.drawingBufferHeight - Web APIs
the read-only webglrenderingcontext.drawingbufferheight property represents the actual height of the current drawing buffer.
... syntax gl.drawingbufferheight; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the height of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferheight; // 150 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferheight' in that specification.
WebGLRenderingContext.drawingBufferWidth - Web APIs
the read-only webglrenderingcontext.drawingbufferwidth property represents the actual width of the current drawing buffer.
... syntax gl.drawingbufferwidth; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the width of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferwidth; // 300 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferwidth' in that specification.
WebGLRenderingContext.finish() - Web APIs
the webglrenderingcontext.finish() method of the webgl api blocks execution until all previously called commands are finished.
... specifications specification status comment webgl 1.0the definition of 'finish' in that specification.
WebGLRenderingContext.flush() - Web APIs
the webglrenderingcontext.flush() method of the webgl api empties different buffer commands, causing all commands to be executed as quickly as possible.
... specifications specification status comment webgl 1.0the definition of 'flush' in that specification.
WebGLRenderingContext.frontFace() - Web APIs
the webglrenderingcontext.frontface() method of the webgl api specifies whether polygons are front- or back-facing by setting a winding orientation.
... examples gl.frontface(gl.cw); specifications specification status comment webgl 1.0the definition of 'frontface' in that specification.
WebGLRenderingContext.getVertexAttribOffset() - Web APIs
the webglrenderingcontext.getvertexattriboffset() method of the webgl api returns the address of a specified vertex attribute.
... examples gl.getvertexattriboffset(i, gl.vertex_attrib_array_pointer); specifications specification status comment webgl 1.0the definition of 'getvertexattriboffset' in that specification.
WebGLRenderingContext.polygonOffset() - Web APIs
the webglrenderingcontext.polygonoffset() method of the webgl api specifies the scale factors and units to calculate depth values.
... gl.getparameter(gl.polygon_offset_factor); // 2 gl.getparameter(gl.polygon_offset_units); // 3 specifications specification status comment webgl 1.0the definition of 'polygonoffset' in that specification.
WebGLRenderingContext.sampleCoverage() - Web APIs
the webglrenderingcontext.samplecoverage() method of the webgl api specifies multi-sample coverage parameters for anti-aliasing effects.
... gl.getparameter(gl.sample_coverage_value); // 0.5 gl.getparameter(gl.sample_coverage_invert); // false specifications specification status comment webgl 1.0the definition of 'samplecoverage' in that specification.
WebGLRenderingContext.scissor() - Web APIs
the webglrenderingcontext.scissor() method of the webgl api sets a scissor box, which limits the drawing to a specified rectangle.
... gl.scissor(0, 0, 200, 200); gl.getparameter(gl.scissor_box); // int32array[0, 0, 200, 200] specifications specification status comment webgl 1.0the definition of 'scissor' in that specification.
WebGLRenderingContext.stencilFunc() - Web APIs
the webglrenderingcontext.stencilfunc() method of the webgl api sets the front and back function and reference value for stencil testing.
... gl.getparameter(gl.stencil_func); gl.getparameter(gl.stencil_value_mask); gl.getparameter(gl.stencil_ref); gl.getparameter(gl.stencil_back_func); gl.getparameter(gl.stencil_back_value_mask); gl.getparameter(gl.stencil_back_ref); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilfunc' in that specification.
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
the webglrenderingcontext.stencilfuncseparate() method of the webgl api sets the front and/or back function and reference value for stencil testing.
... gl.getparameter(gl.stencil_func); gl.getparameter(gl.stencil_value_mask); gl.getparameter(gl.stencil_ref); gl.getparameter(gl.stencil_back_func); gl.getparameter(gl.stencil_back_value_mask); gl.getparameter(gl.stencil_back_ref); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilfuncseparate' in that specification.
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
the webglrenderingcontext.vertexattrib[1234]f[v]() methods of the webgl api specify constant values for generic vertex attributes.
...e want to load the following 3x3 matrix into attribute named "matrix3x3" // 0 1 2 // 3 4 5 // 6 7 8 const matrix3x3location = gl.getattriblocation(shaderprogram, 'matrix3x3'); gl.vertexattrib3f(matrix3x3location, 0, 3, 6); gl.vertexattrib3f(matrix3x3location + 1, 1, 4, 7); gl.vertexattrib3f(matrix3x3location + 2, 2, 5, 8); specifications specification status comment webgl 1.0the definition of 'vertexattrib' in that specification.
WebGLShaderPrecisionFormat.precision - Web APIs
the read-only webglshaderprecisionformat.precision property returns the number of bits of precision that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).precision; // 23 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).precision; // 0 specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat.precision' in that specification.
WebGLShaderPrecisionFormat.rangeMax - Web APIs
the read-only webglshaderprecisionformat.rangemax property returns the base 2 log of the absolute value of the maximum value that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).rangemax; // 127 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).rangemax; // 24 specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat.rangemax' in that specification.
WebGLShaderPrecisionFormat.rangeMin - Web APIs
the read-only webglshaderprecisionformat.rangemin property returns the base 2 log of the absolute value of the minimum value that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).rangemin; // 127 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).rangemin; // 24 specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat.rangemin' in that specification.
Creating 3D objects using WebGL - Web APIs
// tell webgl how to pull out the positions from the position // buffer into the vertexposition attribute { const numcomponents = 3; ...
... drawing the cube next we need to add code to our drawscene() function to draw using the cube's index buffer, adding new gl.bindbuffer() and gl.drawelements() calls: // tell webgl which indices to use to index the vertices gl.bindbuffer(gl.element_array_buffer, buffers.indices); ...
Data in WebGL - Web APIs
WebAPIWebGL APIData
glsl data types <<document the basic types, vectors, etc; see data type (glsl) on the khronos webgl wiki>> glsl variables there are three kinds of "variable" or data storage available in glsl, each of which with its own purpose and use cases: attributes, varyings, and uniforms.
Index - Web APIs
WebAPIIndex
2 angle_instanced_arrays api, reference, webgl, webgl extension the angle_instanced_arrays extension is part of the webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type.
... 3 angle_instanced_arrays.drawarraysinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawarraysinstancedangle() method of the webgl api renders primitives from array data like the gl.drawarrays() method.
... 4 angle_instanced_arrays.drawelementsinstancedangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.drawelementsinstancedangle() method of the webgl api renders primitives from array data like the gl.drawelements() method.
...And 306 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
screenshot of this example in action the core of this example—the spinning, textured, lighted cube—is taken from our webgl tutorial series; namely, the penultimate article in the series, covering lighting in webgl.
... when rendering the left eye, the xrwebgllayer has its viewport configured to restrict drawing to the left half of the drawing surface.
... setup and utility functions next, we declare the variables and constants used throughout the application, starting with those used to store webgl and webxr specific information: let polyfill = null; let xrsession = null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various ve...
...And 20 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
there's no magic object provided by either the webgl or the webxr api that represents the viewer that you can simply rotate and move around to automatically change what's seen on the screen.
... in this guide we show how use webgl to simulate camera movements without having a camera to move.
... these techniques can be used in any webgl (or webxr) project.
...And 19 more matches
Clearing with colors - Web APIs
« previousnext » an example showing how to clear a webgl rendering context to a solid color.
... clearing the webgl context with a solid color the simplest graphical webgl program.
...note that css sets the background color of the canvas to black, so when the canvas turns green we know that webgl's magic has worked.
...And 16 more matches
Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
...this became webgl, which gained traction among browser vendors, and was standardized around 2009–2010.
... webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex.
...And 13 more matches
Index - Game development
a testament to what can be done with javascript, webgl, and related technologies.
... 14 bounding volume collision detection with three.js 3d, games, javascript, webgl, bounding boxes, collision detection, three.js this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
... 15 3d games on the web games, graphics, needscontent, needsexample, webgl, webvr, three.js for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on html <canvas>.
...And 10 more matches
3D games on the Web - Game development
for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on html <canvas>.
... webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
... documentation and browser support the webgl project documentation and specification is maintained by the khronos group, not the w3c as with most of the web apis.
...And 9 more matches
Compressed texture formats - Web APIs
the webgl api provides methods to use compressed texture formats.
... usage unless otherwise specified, this article applies to both webgl 1 and 2 contexts.
... as compressed textures require hardware support, therefore no specific formats are required by webgl; instead, a context can make different formats available, depending on hardware support.
...And 9 more matches
EXT_disjoint_timer_query - Web APIs
the ext_disjoint_timer_query extension is part of the webgl api and provides a way to measure the duration of a set of gl commands, without stalling the rendering pipeline.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 8 more matches
OffscreenCanvas.getContext() - Web APIs
note: this api is currently implemented for webgl1 and webgl2 contexts only.
... "webgl" creates a webglrenderingcontext object representing a three-dimensional rendering context.
... this context is only available on browsers that implement webgl version 1 (opengl es 2.0).
...And 8 more matches
WebXR Device API - Web APIs
in webxr, a viewport represents the area of a drawing surface corresponding to a particular xrview, such as the portion of the webgl framebuffer used to render one of the two eyes' perspectives on the scene.
... xrwebgllayer a layer which serves as a webgl frame buffer into which a scene's view is rendered.
... using webgl to render the scene gains substantial performance benefits due to graphics acceleration.
...And 8 more matches
HTMLCanvasElement.getContext() - Web APIs
"webgl" (or "experimental-webgl") which will create a webglrenderingcontext object representing a three-dimensional rendering context.
... this context is only available on browsers that implement webgl version 1 (opengl es 2.0).
... "webgl2" which will create a webgl2renderingcontext object representing a three-dimensional rendering context.
...And 7 more matches
OES_vertex_array_object - Web APIs
the oes_vertex_array_object extension is part of the webgl api and provides vertex array objects (vaos) which encapsulate vertex array states.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 7 more matches
Basic scissoring - Web APIs
« previousnext » in this example, we see how to draw simple rectangles and squares using webgl scissoring operations.
...a fragment refers to the pixel while it is being handled by the webgl pipeline.
...scissoring is a distinct stage in the webgl/opengl graphics pipeline (it occurs after color clearing, but before color masking).
...And 7 more matches
Rendering and the WebXR frame animation callback - Web APIs
preparing the renderer once the xr session has been set up, with the webgl framebuffer connected and webgl primed with the data it needs in order to render the scene, you can set up the renderer to start running.
... hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other relevant data, such as models and textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl backbuffer.
...this pseudocode outlines that process: for each view in the pose's views list: get the webxr gl layer's viewport set the webgl viewport to match for each object in the scene bindprogram() bindvertices() bindmatrices() binduniforms() bindbuffers() bindtextures() drawmyobject() put simply, this form of renderer is using view-first order.
...And 7 more matches
Starting up and shutting down a WebXR session - Web APIs
assuming you're already familiar with 3d graphics in general and webgl in particular, taking that next bold step into mixed reality—the idea of presenting artificial scenery or objects in addition to or in place of the real world—is not overly complicated.
... obtain a webgl context for the canvas into which you intend to render your frames by calling the htmlcanvaselement method getcontext() on the target context.
... set up your webgl data and models and prepare to render the scene.
...And 7 more matches
EXT_color_buffer_float - Web APIs
the ext_color_buffer_float extension is part of webgl and adds the ability to render a variety of floating point formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 6 more matches
Building up a basic demo with Three.js - Game development
note: we chose three because it is one of the most popular webgl libraries, and it is easy to get started with.
... we are not trying to say it is better than any other webgl library available, and you should feel free to try another library, such as copperlicht, glge, or playcanvas.
...you should: make sure you are using a modern browser with good webgl support, such as the latest firefox or chrome.
...And 5 more matches
Shader Editor - Firefox Developer Tools
the shader editor enables you to see and edit the vertex and fragment shaders used by webgl.
... webgl is a javascript api for rendering interactive 3d graphics and 2d graphics in the browser without using plugins.
... with webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
...And 5 more matches
EXT_float_blend - Web APIs
the webgl api's ext_float_blend extension allows blending and draw buffers with 32-bit floating-point components.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 5 more matches
OES_texture_float - Web APIs
the oes_texture_float extension is part of the webgl api and exposes floating-point pixel types for textures.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 5 more matches
OES_texture_half_float - Web APIs
the oes_texture_half_float extension is part of the webgl api and adds texture formats with 16- (aka half float) and 32-bit floating-point components.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 5 more matches
Clearing by clicking - Web APIs
« previousnext » this example demonstrates how to combine user interaction with webgl graphics operations by clearing the rendering context with a random color when the user clicks.
... clearing the rendering context with random colors this example provides a simple illustration of how to combine webgl and user interaction.
... note how we embed the webgl function calls inside the event handler function.
...And 5 more matches
XRViewport - Web APIs
the webxr device api's xrviewport interface provides properties used to describe the size and position of the current viewport within the xrwebgllayer being used to render the 3d scene.
... x read only the offset from the origin of the destination graphics surface (typically a xrwebgllayer) to the left edge of the viewport, in pixels.
... y read only the offset from the origin of the viewport to the bottom edge of the viewport; webgl's coordinate system places (0, 0) at the bottom left corner of the surface.
...And 5 more matches
EXT_blend_minmax - Web APIs
the ext_blend_minmax extension is part of the webgl api and extends blending capabilities by adding two new blend equations: the minimum or maximum color components of the source and destination colors.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 4 more matches
Color masking - Web APIs
« previousnext » this webgl example modifies random colors by applying color masking to limit the range of displayed colors to specific shades.
...the color mask state of webgl is preserved, so we do not need to call colormask() every frame to set up the color mask.
... this is an important aspect of the webgl state machine.
...And 4 more matches
Geometry and reference spaces in WebXR - Web APIs
at a fundamental level, rendering of scenes for webxr presentation in either augmented reality or virtual reality contexts is performed using webgl, so the two apis share much of the same design language.
... in this article, we introduce the ways in which webxr expands upon the geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces.
... lengths and distances webgl measures all distances and lengths in meters.
...And 4 more matches
Examples - Game development
a testament to what can be done with javascript, webgl, and related technologies.
... bananabread a multiplayer, 3d first-person shooter game developed using emscripten, webgl, and webrtc.
... monster madness a webgl and asm.js-based multiplayer online shooter, developed by nom nom games and trendy entertainment.
...And 3 more matches
EXT_color_buffer_half_float - Web APIs
the ext_color_buffer_half_float extension is part of the webgl api and adds the ability to render to 16-bit floating-point color buffers.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
EXT_sRGB - Web APIs
WebAPIEXT sRGB
the ext_srgb extension is part of the webgl api and adds srgb support to textures and framebuffer objects.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
OES_element_index_uint - Web APIs
the oes_element_index_uint extension is part of the webgl api and adds support for gl.unsigned_int types to webglrenderingcontext.drawelements().
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
OES_standard_derivatives - Web APIs
the oes_standard_derivatives extension is part of the webgl api and adds the glsl derivative functions dfdx, dfdy, and fwidth.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
OVR_multiview2 - Web APIs
the ovr_multiview2 extension is part of the webgl api and adds support for rendering into multiple views simultaneously.
... for more information, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 3 more matches
Boilerplate 1 - Web APIs
« previousnext » this example describes repeated pieces of code that will be hidden from now on, as well as defining a javascript utility function to make webgl initialization easier.
... boilerplate code for setting up webgl rendering context by now you are quite used to seeing the same pieces of html, css, and javascript repeated again and again.
...this would allow us to focus on the interesting pieces of code that are most relevant for learning webgl.
...And 3 more matches
Scissor animation - Web APIs
« previousnext » a simple webgl example in which we have some animation fun using scissoring and clearing operations.
...this is a nice demonstration of webgl as a state machine.
...the clear color state of webgl remains at the set value, until we change it again when a new square is created.
...And 3 more matches
Simple color animation - Web APIs
« previousnext » a very basic color animation created using webgl, performed by clearing the drawing buffer with a different random color every second.
... color animation with clear this example provides a simple illustration of color animation with webgl, as well as user interaction.
... this time we put the webgl function calls within a timer event handler.
...And 3 more matches
Fundamentals of WebXR - Web APIs
fortunately, webgl and the various webgl-based frameworks and libraries are available to make it much easier to deal with all of that.
... the role of frameworks because 3d graphics—and mixed reality in particular—involve a lot of often intricate math, data management, and other complex tasks, it's unlikely that you'll directly use webgl to render your scene in most cases.
... instead, you'll probably do most of your work making use of one of the frameworks or libraries that are built atop webgl to make it more convenient to use.
...And 3 more matches
GLSL Shaders - Game development
note: remember that you don't have to use three.js or any other library to write your shaders — pure webgl (web graphics library) is more than enough.
...three.js and other 3d libraries abstract a lot of things for you — if you wanted to create such an example in raw webgl, you'd have to write a lot of extra code to actually make it work.
... environment setup to start with the webgl shaders you don't need much.
...And 2 more matches
ANGLE_instanced_arrays - Web APIs
the angle_instanced_arrays extension is part of the webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
Canvas API - Web APIs
the webgl api, which also uses the <canvas> element, draws hardware-accelerated 2d and 3d graphics.
...ent.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
... html5 canvas deep dive a hands-on, book-length introduction to the canvas api and webgl.
...And 2 more matches
EXT_frag_depth - Web APIs
the ext_frag_depth extension is part of the webgl api and enables to set a depth value of a fragment from within the fragment shader.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
EXT_shader_texture_lod - Web APIs
the ext_shader_texture_lod extension is part of the webgl api and adds additional texture functions to the opengl es shading language which provide the shader writer with explicit control of lod (level of detail).
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
HTMLCanvasElement - Web APIs
calling getcontext with "2d" returns a canvasrenderingcontext2d object, whereas calling it with "webgl" (or "experimental-webgl") returns a webglrenderingcontext object.
... this context is only available on browsers that implement webgl.
... webglcontextcreationerror fired if the user agent is unable to create a webglrenderingcontext or webgl2renderingcontext context.
...And 2 more matches
OES_fbo_render_mipmap - Web APIs
the oes_fbo_render_mipmap extension is part of the webgl api and makes it possible to attach any level of a texture to a framebuffer object.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
OES_texture_float_linear - Web APIs
the oes_texture_float_linear extension is part of the webgl api and allows linear filtering with floating-point pixel types for textures.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
OES_texture_half_float_linear - Web APIs
the oes_texture_half_float_linear extension is part of the webgl api and allows linear filtering with half floating-point pixel types for textures.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
...And 2 more matches
Raining rectangles - Web APIs
« previousnext » a simple webgl game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.
...it is a preview of a full graphical application that manipulates various phases of the webgl graphics pipeline and state machine.
... in addition, the example demonstrates how to integrate the webgl function calls within a game loop.
...And 2 more matches
Matrix math for the web - Web APIs
while this article uses css to simplify explanations, matrices are a core concept used by many different technologies including webgl, the webxr (vr and ar) api, and glsl shaders.
...check out the webgl model view projection article for a look into how it comes in handy.
... another mind-bender is that matrix multiplication in webgl and css needs to happen in the reverse order that the operations intuitively happen.
...And 2 more matches
Lighting a WebXR setting - Web APIs
because the webxr device api relies on other technologies—namely, webgl and frameworks based upon it—to perform all rendering, texturing, and lighting of a scene, the same general lighting concepts apply to webxr settings or scenes as to any other webgl-generated display.
...the webgl shader program takes the color, directionality, brightness, and other factors for each light source and computes the final color of each pixel.
...the rate at which the brightness of a point light falls off is called attenuation, and is a configurable feature of the light source in webgl and other lighting systems.
...And 2 more matches
XRRenderState.baseLayer - Web APIs
the read-only baselayer property of the xrrenderstate interface returns the xrwebgllayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.
... syntax var xrwebgllayer = xrrenderstate.baselayer; value a xrwebgllayer object which is used as the source of the world's contents when rendering each frame of the scene.
... see the examples below to see how to use updaterenderstate() to set the current xrwebgllayer used for rendering the scene.
...And 2 more matches
2015 MDN Fellowship Program - Archive of obsolete content
github: brittanystoroz twitter: @brittanystoroz webgl brief project description webgl is the latest incarnation of the opengl family of real time rendering immediate mode graphics apis.
... webgl is getting some cool new features in 2015 with the standardization efforts around the webgl 2.0 spec being published.
... activities and deliverables help us develop a curriculum on mdn for teaching developers new to graphics programming the webgl apis.
... required skills and experience computer graphics experience with programmable shaders and the opengl, opengl es, webgl, or direct3d apis.
EXT_texture_compression_bptc - Web APIs
the ext_texture_compression_bptc extension is part of the webgl api and exposes 4 bptc compressed texture formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
... this extension is available to both, webgl1 and webgl2 contexts.
EXT_texture_compression_rgtc - Web APIs
the ext_texture_compression_rgtc extension is part of the webgl api and exposes 4 rgtc compressed texture formats.
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
... this extension is available to both, webgl1 and webgl2 contexts.
EXT_texture_filter_anisotropic - Web APIs
the ext_texture_filter_anisotropic extension is part of the webgl api and exposes two constants for anisotropic filtering (af).
... webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the webgl tutorial.
... availability: this extension is available to both, webgl1 and webgl2 contexts.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
the ovr_multiview2.framebuffertexturemultiviewovr() method of the webgl api attaches a multiview texture to a webglframebuffer.
... gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.co...
...lor_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
... texture a webgltexture object whose image to attach.
Hello vertex attributes - Web APIs
« previousnext » this webgl example demonstrates how to combine shader programming and user interaction by sending user input to the shader using vertex attributes.
... #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#f...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.arra...
... false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return g...
Textures from code - Web APIs
« previousnext » this webgl example provides a simple demonstration of procedural texturing with fragment shaders.
... that is, using code to generate textures for use in shading webgl objects.
...x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#f...
..., 0.0]), gl.static_draw); gl.vertexattribpointer(0, 2, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return g...
XRSession.updateRenderState() - Web APIs
baselayer optional an xrwebgllayer object from which the webxr compositor will obtain imagery.
... examples this example creates a webgl context that is compatible with an immersive xr device and then uses it to create an xrwebgllayer.
... updaterenderstate() is then called to associate the new xrwebgllayer.
... function onxrsessionstarted(xrsession) { let glcanvas = document.createelement("canvas"); let gl = glcanvas.getcontext("webgl", { xrcompatible: true }); loadwebglresources(); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); } specifications specification status comment webxr device apithe definition of 'xrsession.updaterenderstate()' in that specification.
Web APIs
WebAPI
nt request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
...figuration usbdevice usbendpoint usbintransferresult usbinterface usbisochronousintransferpacket usbisochronousintransferresult usbisochronousouttransferpacket usbisochronousouttransferresult usbouttransferresult usvstring userdatahandler userproximityevent v vttcue vttregion validitystate videoconfiguration videoplaybackquality videotrack videotracklist visualviewport w webgl_color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc 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 wakelock wakelocksentinel waveshapernode webgl2renderingcontex...
...t webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglrenderingcontext webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xr...
...inputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrreferencespace xrreferencespaceevent xrreferencespaceeventinit xrreferencespacetype xrrenderstate xrrenderstateinit xrrigidtransform xrsession xrsessionevent xrsessioneventinit xrsessioninit xrsessionmode xrspace xrsystem xrtargetraymode xrview xrviewerpose xrviewport xrvisibilitystate xrwebgllayer xrwebgllayerinit xsltprocessor ...
Building up a basic demo with A-Frame - Game development
the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
... a-frame is built on top of webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc.
...you should start off by: making sure you are using a modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher).
Index - MDN Web Docs Glossary: Definitions of Web-related terms
18 alpha (alpha channel) alpha, alpha channel, drawing, glossary, graphics, translucency, translucent, transparency, transparent, webgl, webxr, channel, color, pixel colors are represented in digital form as a collection of numbers, each representing the strength or intensity level of a given component of the color.
... 457 three js browser, codingscripting, javascript, programming language, three.js three.js is a javascript-based webgl engine that can run gpu-powered games and other graphics-powered apps straight from the browser.
... 495 webgl advanced, codingscripting, glossary, web graphics, webgl webgl (web graphics library) is a javascript api that draws interactive 2d and 3d graphics.
Experimental features in Firefox
nightly 80 no developer edition 80 no beta 80 no release 80 no preference name layout.css.prefers-contrast.enabled apis graphics: canvas, webgl, and webgpu interface: offscreencanvas the offscreencanvas interface provides a canvas that can be rendered offscreen.
... nightly 30 no developer edition 30 no beta 30 no release 30 no preference name canvas.hitregions.enabled webgl: draft extensions when this preference is enabled, any webgl extensions currently in "draft" status which are being tested are enabled for use.
... currently, there are no webgl extensions being tested by firefox.
EXT_disjoint_timer_query.createQueryEXT() - Web APIs
the ext_disjoint_timer_query.createqueryext() method of the webgl api creates and initializes webglquery objects, which track the time needed to fully complete a set of gl commands.
... syntax webgltimerqueryext ext.createqueryext(); parameters none.
... return value a webglquery object.
EXT_disjoint_timer_query.isQueryEXT() - Web APIs
the ext_disjoint_timer_query.isqueryext() method of the webgl api returns true if the passed object is a webglquery object.
... syntax glboolean ext.isqueryext(query); parameters query a webglquery object to test.
... return value a glboolean indicating whether the given object is a webglquery object (true) or not (false).
OES_vertex_array_object.createVertexArrayOES() - Web APIs
the oes_vertex_array_object.createvertexarrayoes() method of the webgl api creates and initializes a webglvertexarrayobject object that represents a vertex array object (vao) pointing to vertex array data and which provides names for different sets of vertex data.
... syntax webglvertexarrayobjectoes ext.createvertexarrayoes(); parameters none.
... return value a webglvertexarrayobject representing a vertex array object (vao) which points to vertex array data.
OES_vertex_array_object.isVertexArrayOES() - Web APIs
the oes_vertex_array_object.isvertexarrayoes() method of the webgl api returns true if the passed object is a webglvertexarrayobject object.
... syntax glboolean ext.isvertexarrayoes(arrayobject); parameters arrayobject a webglvertexarrayobject (vao) object to test.
... return value a glboolean indicating whether the given object is a webglvertexarrayobject object (true) or not (false).
OffscreenCanvas - Web APIs
var one = document.getelementbyid("one").getcontext("bitmaprenderer"); var two = document.getelementbyid("two").getcontext("bitmaprenderer"); var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
... main.js (main thread code): var htmlcanvas = document.getelementbyid("canvas"); var offscreen = htmlcanvas.transfercontroltooffscreen(); var worker = new worker("offscreencanvas.js"); worker.postmessage({canvas: offscreen}, [offscreen]); offscreencanvas.js (worker code): onmessage = function(evt) { var canvas = evt.data.canvas; var gl = canvas.getcontext("webgl"); // ...
...}; you can also use requestanimationframe in workers onmessage = function(evt) { const canvas = evt.data.canvas; const gl = canvas.getcontext("webgl"); function render(time) { // ...
Hello GLSL - Web APIs
« previousnext » this webgl example demonstrates a very basic glsl shader program that draws a solid color square.
...uto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#f...
...gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return g...
XRRigidTransform.matrix - Web APIs
usage notes matrix format all 4x4 transform matrices used in webgl are stored in 16-element float32arrays.
...)1-2(qx2+qy2)pz0001]\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix} examples in this example, a transform is created to create a matrix which can be used as a transform during rendering of webgl objects, in order to place objects to match a given offset and orientation.
... the matrix is then passed into a library function that uses webgl to render an object matching a given name using the transform matrix specified to position and orient it.
Audio and video manipulation - Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.
... video and webgl webgl is a powerful api that uses canvas to draw hardware-accelerated 3d or 2d scenes.
... you can combine webgl and the <video> element to create video textures, which means you can put video inside 3d scenes.
Anatomy of a video game - Game development
your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in webgl).
...you could draw every pixel individually on a canvas or you could layer dom elements (including multiple webgl canvases with transparent backgrounds if you want) into a complex hierarchy.
Introduction to game development for the Web - Game development
as we like to say, "the web is the platform." let's take a look at the core of the web platform: function technology audio web audio api graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether...
... webgl lets you create high-performance, hardware-accelerated 3d (and 2d) graphics from web content.
Explaining basic 3D theory - Game development
webgl uses the right-hand coordinate system — the x axis points to the right, the y axis points up, and the z axis points out of the screen, as seen in the above diagram.
...the standard phong lighting model implemented in webgl has four basic types of lighting: diffuse: a distant directional light, like the sun.
Audio for Web games - Game development
we can relate: the position of objects the direction and movement of objects the environment (cavernous, underwater, etc.) this is especially useful in a three-dimensional environment rendered using webgl, where the web audio api makes it possible to tie audio to the objects and viewpoints.
... see also web audio api on mdn <audio> on mdn developing game audio with the web audio api (html5rocks) mixing positional audio and webgl (html5rocks) songs of diridum: pushing the web audio api to its limits making html5 audio actually work on mobile audio sprites (and fixes for ios) ...
Initialize the framework - Game development
the three options are auto, canvas and webgl.
...it usually uses webgl if available in the browser, falling back to canvas 2d if not.
Visual-js game engine - Game development
( + server engine tools + server part of web apps ) -3d part : webgl based on three.js engine -3d part : webgl2 based on glmatrix 2.0 -2d part (new): this is typescript based game engine (client part ts).
...http://creativecommons.org/licenses/by-nc-sa/3.0/ download from : https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html webrtc - webcam communication is under : creator muaz khan www.muazkhan.com mit license - www.webrtc-experiment.com/licence socket.io.js - http://socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyright (c) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast747/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative comm...
Texel - MDN Web Docs Glossary: Definitions of Web-related terms
texture mapping is typically done prior to lighting the scene; however, in webgl, lighting is performed as part of the texture mapping process.
... learn more general knowledge texel (graphics) on wikipedia learn about it using textures in webgl lighting in webgl animating textures in webgl ...
Introduction to web APIs - Learn web development
apis for drawing and manipulating graphics are now widely supported in browsers — the most popular ones are canvas and webgl, which allow you to programmatically update the pixel data contained in an html <canvas> element to create 2d and 3d scenes.
... for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl.
What is JavaScript? - Learn web development
the canvas and webgl apis allow you to create animated 2d and 3d graphics.
... people are doing some amazing things using these web technologies —see chrome experiments and webglsamples.
Handling common JavaScript problems - Learn web development
webgl api for real 3d graphics.
...for example, the webgl api is really complex and challenging to use when you write it directly, so the three.js library (and others) is built on top of webgl and provides a much easier api for creating common 3d objects, lighting, textures, etc.
Shumway
the whats and whys of shumway shumway is a renderer for adobe flash built entirely in web standards (javascript, webgl, and others).
...users who disable flash because of security or performance concerns can still see content through shumway because it cannot be forced to behave worse than javascript (and webgl, etc.) allows.
ANGLE_instanced_arrays.drawArraysInstancedANGLE() - Web APIs
the angle_instanced_arrays.drawarraysinstancedangle() method of the webgl api renders primitives from array data like the gl.drawarrays() method.
... note: when using webgl2, this method is available as gl.drawarraysinstanced() by default.
ANGLE_instanced_arrays.drawElementsInstancedANGLE() - Web APIs
the angle_instanced_arrays.drawelementsinstancedangle() method of the webgl api renders primitives from array data like the gl.drawelements() method.
... note: when using webgl2, this method is available as gl.drawelementsinstanced() by default.
ANGLE_instanced_arrays.vertexAttribDivisorANGLE() - Web APIs
the angle_instanced_arrays.vertexattribdivisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().
... note: when using webgl2, this method is available as gl.vertexattribdivisor() by default.
EXT_disjoint_timer_query.beginQueryEXT() - Web APIs
the ext_disjoint_timer_query.beginqueryext() method of the webgl api starts a timer query.
... query a webglquery object for which to start the time querying.
EXT_disjoint_timer_query.deleteQueryEXT() - Web APIs
the ext_disjoint_timer_query.deletequeryext() method of the webgl api deletes a given webglquery object.
... syntax void ext.deletequeryext(query); parameters query a webglquery object to delete.
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
the ext_disjoint_timer_query.getqueryext() method of the webgl api returns information about a query target.
... return value depends on pname: if pname is ext.current_query_ext: a webglquery object, which is the currently active query for the given target.
EXT_disjoint_timer_query.getQueryObjectEXT() - Web APIs
the ext_disjoint_timer_query.getqueryobjectext() method of the webgl api returns the state of a query object.
... syntax any ext.getqueryobjectext(query, pname); parameters query a webglquery object from which to return information.
EXT_disjoint_timer_query.queryCounterEXT() - Web APIs
the ext_disjoint_timer_query.querycounterext() method of the webgl api records the current time into the corresponding query object.
... syntax void ext.querycounterext(query, target); parameters query a webglquery object for which to record the current time.
OES_vertex_array_object.bindVertexArrayOES() - Web APIs
the oes_vertex_array_object.bindvertexarrayoes() method of the webgl api binds a passed webglvertexarrayobject object to the buffer.
... syntax void ext.bindvertexarrayoes(arrayobject); parameters arrayobject a webglvertexarrayobject (vao) object to bind.
OES_vertex_array_object.deleteVertexArrayOES() - Web APIs
the oes_vertex_array_object.deletevertexarrayoes() method of the webgl api deletes a given webglvertexarrayobject object.
... syntax void ext.deletevertexarrayoes(arrayobject); parameters arrayobject a webglvertexarrayobject (vao) object to delete.
OffscreenCanvas() - Web APIs
we then initialize a webgl context on it using the getcontext() method.
... let offscreen = new offscreencanvas(256, 256); let gl = offscreen.getcontext('webgl'); specifications specification status comment html living standardthe definition of 'offscreencanvas()' in that specification.
Using bounded reference spaces - Web APIs
sionstarted(session) { xrsession = session; spacetype = "bounded-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(() => { spacetype = "local-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(handleerror); }); } function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); // now set up matrices, create a secondary reference space to // transform the viewer's pose, and so forth.
... this would change the onrefspacecreated() method from the above snippet to: function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); let startposition = vec3.fromvalues(0, 1.5, 0); const startorientation = vec3.fromvalues(0, 0, 1.0); xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, startorientation)); xrsession.requestanimationframe(ondrawframe); } in this code, executed after the reference space has been created, we create an xrrig...
Inputs and input sources - Web APIs
to do this, it's necessary to use the transform to convert the grip space to the world coordinate system used by webgl for rendering purposes.
... after that, everything proceeds as usual, getting the viewer's pose from the updated reference frame, requesting the next frame callback through requestanimationframe(), and then continuing to set up webgl and draw the scene.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the world space; the origin of this space is the origin of the webgl coordinate system underlying the entire 3d canvas.
...you can then apply controlpose's transform to the vertices in the object model representing the controller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer.
XRRenderState - Web APIs
these properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the xrwebgllayer being used as the target for rendering the scene prior to it being presented on the xr device's display or displays.
... baselayer read only the xrwebgllayer from which the browser's compositing system obtains the image for the xr session.
XRView - Web APIs
WebAPIXRView
the destination rendering layer to render a frame, you just iterate over the xrviewerpose's views, rendering each of them into the appropriate viewport within the frame's xrwebgllayer.
... currently, the specification (and therefore all current implementations of webxr) is designed around rendering every xrview into a single xrwebgllayer, which is then presented on the xr device with half used for the left eye and half for the right eye.
XRViewerPose - Web APIs
by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface.
...(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered output to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the output device.
XRViewport.y - Web APIs
WebAPIXRViewporty
the read-only xrviewport interface's y property indicates the offset from the bottom edge of the destination surface (typically a xrwebgllayer to the bottom edge of the viewport within the surface into which webxr content is to be rendered.
... note: although other web apis typically consider the y axis to begin at the top and grow larger progressing downward, webgl reverses this, with y growing larger as it goes upward on the screen.
Index - Developer guides
WebGuideIndex
16 audio and video manipulation audio, canvas, examples, guide, html5, media, video, web audio api, webgl, developer recommendation the ability to read the pixel values from each frame of a video can be very useful.
... 27 graphics on the web 2d, 3d, canvas, graphics, html5, svg, web, webgl, webrtc websites and applications often need to present graphics, such as images.these articles provide insight into how you can accomplish this.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and 3d graphics on the web.
... see our webgl tutorial to find out more.
SharedArrayBuffer - JavaScript
apis which use sharedarraybuffer objects webglrenderingcontext.bufferdata() webglrenderingcontext.buffersubdata() webgl2renderingcontext.getbuffersubdata() security requirements shared memory and high-resolution timers were effectively disabled at the start of 2018 in light of spectre.
... examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(1024); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { bytelength: 1024 } sab.slice(2); // sharedarraybuffer { bytelength: 1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } using it in a webgl buffer const canvas = document.queryselector('canvas'); const gl = canvas.getcontext('webgl'); const buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, sab, gl.static_draw); specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer' in that specification.
Web media technologies
this technique can be used in both standard webgl applications presented on a flat computer screen, or in a webxr-generated virtual or augmented reality environment.
... webgl webgl provides an opengl es compatible api on top of the existing canvas api, making it possible to do powerful 3d graphics on the web.
Animation performance and frame rate - Web Performance
animation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
...code based animations, be it css, svg, <canvas>, webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small.
Performance fundamentals - Web Performance
high-level declarative languages), or use low-level imperative interfaces offered by the <canvas> element (which includes webgl).
...developers draw to canvases using either a familiar 2d drawing api, or webgl, a "close to the metal" binding that mostly follows opengl es 2.0.
Optimizing startup performance - Web Performance
while you can use web workers to run even very large, long-duration chunks of javascript code asynchronously, there's a huge caveat that: workers don't have access to webgl or audio, and they can't send synchronous messages to the main thread, so you can't even proxy those apis to the main thread.
... if you need to decode asset files (for example, decoding jpeg files and turning them into raw texture data for later use by webgl), that's great to do in workers.
Graphic design for responsive sites - Progressive web apps (PWAs)
webgl/canvas you can create a canvas to draw interactive graphics on using the html <canvas> element, then use the canvas api to create shapes, lines, import image files, create text, do compositing operations, and much more.
...you can create 2d imagery using the regular 2d canvas context, or 3d imagery using the more nascent webgl api.
Building up a basic demo with Babylon.js - Game development
you should start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome.
Building up a basic demo with the PlayCanvas engine - Game development
you should start off by: making sure you are using a modern browser with good webgl support, such as the latest firefox or chrome.
Building up a basic demo with PlayCanvas - Game development
playcanvas is a popular 3d webgl game engine, originally created by will eastcott and dave evans.
Crisp pixel art look with image-rendering - Game development
this article discusses a useful technique for giving your canvas/webgl games a crisp pixel art look, even on high definition monitors.
Tiles and tilemaps overview - Game development
one simple technique consists of pre-rendering the map in a canvas on its own (when using the canvas api) or on a texture (when using webgl), so tiles don't need to be re-drawn every frame and rendering can be done in just one blitting operation.
Tools for game development - Game development
shumway shumway is a renderer for adobe flash built entirely in javascript, webgl, etc., bridging the gap between flash and web standards.
2D maze game with device orientation - Game development
var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also webgl and auto options available) and the optional id of the dom container we want to put the canvas in.
Visual JS GE - Game development
the server is based on node.js vs mysql, the client made in four variant on a javascript frameworks for 2d canvas js , three.js , webgl2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack.
Visual typescript game engine - Game development
implementing ar and webgl2.
Canvas - MDN Web Docs Glossary: Definitions of Web-related terms
it provides an empty graphic zone on which specific javascript apis can draw (such as canvas 2d or webgl).
Quaternion - MDN Web Docs Glossary: Definitions of Web-related terms
while mathematical quaternions are more involved than this, the unit quaternions (or rotational quaternions) used to represent rotation while using webgl or webxr, for example, are represented using the same syntax as a 3d point.
RGB - MDN Web Docs Glossary: Definitions of Web-related terms
in opengl, webgl, and glsl the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers.
Three js - MDN Web Docs Glossary: Definitions of Web-related terms
three.js is a javascript-based webgl engine that can run gpu-powered games and other graphics-powered apps straight from the browser.
MDN Web Docs Glossary: Definitions of Web-related terms
usenet user agent utf-8 ux v validator value variable vendor prefix viewport visual viewport voip w w3c wai wcag web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 ...
CSS and JavaScript accessibility best practices - Learn web development
complex functionality like 3d games are not so easy to make accessible — a complex 3d game created using webgl will be rendered on a <canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of.
What is accessibility? - Learn web development
if you are planning to include a whizzy 3d pie chart graphic made using webgl, you might want to include a data table as an accessible alternative representation of the data.
The web and web standards - Learn web development
the w3c is the best known web standards body, but there are others such as the whatwg (who were responsible for the modernization of the html language), ecma (who publish the standard for ecmascript, which javascript is based on), khronos (who publish technologies for 3d graphics, such as webgl), and others.
Index - Learn web development
58 drawing graphics api, article, beginner, canvas, codingscripting, graphics, javascript, learn, webgl at this point, you should have a useful idea of the basics of graphics programming using canvas and webgl and what you can do with these apis, as well as a good idea of where to go for further information.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
if, however, you are doing something more complex and involving objects that are not directly accessible inside the dom (such as 2d canvas api or webgl objects), requestanimationframe() is the better option in most cases.
Client-side web APIs - Learn web development
drawing graphics the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
Handling common accessibility problems - Learn web development
for example, it would be unreasonable to expect you to make a complex 3d game written using webgl 100% accessible to a blind person, but you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.
Introduction to cross browser testing - Learn web development
for example, if the e-commerce site owner wants a webgl-powered 3d tour of each product built into the product pages, they will need to accept that this just won't work in ie versions before 11.
Debugging OpenGL
this is generally only useful in cases where you know that no error should occur, since there are cases where perfectly valid webgl code may generate opengl errors.
Web Replay
webgl is not supported yet, as it uses a pretty different rendering path from normal web content.
WebReplayRoadmap
media elements (bug 1304146) web audio (bug 1304147) webrtc (bug 1304149) webassembly (bug 1481007) webgl (bug 1506467) support more operating systems (not yet implemented) only macos is supported right now.
imgIRequest
by default, all images are loaded with cors_none and cannot be used cross-origin in context like webgl.
Deprecated tools - Firefox Developer Tools
shader editor bugzilla issue: bug 1342237 removed as of firefox 67 description the shader editor allowed users to examine and edit the source of the webgl vertex and fragment shaders.
Index - Firefox Developer Tools
104 shader editor the shader editor enables you to see and edit the vertex and fragment shaders used by webgl.
CanvasRenderingContext2D - Web APIs
blink only canvasrenderingcontext2d.iscontextlost() inspired by the same webglrenderingcontext method it returns true if the canvas context has been lost, or false if not.
Basic usage of canvas - Web APIs
other contexts may provide different types of rendering; for example, webgl uses a 3d context based on opengl es.
Finale - Web APIs
WebAPICanvas APITutorialFinale
other web apis these apis might be useful when working further with canvas and graphics: webgl advanced api for rendering complex graphics, including 3d.
EXT_disjoint_timer_query.endQueryEXT() - Web APIs
the ext_disjoint_timer_query.endqueryext() method of the webgl api ends a timer query.
Event - Web APIs
WebAPIEvent
event mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller.
Using the Gamepad API - Web APIs
technologies like <canvas>, webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks previously requiring native code.
HTMLCanvasElement.transferControlToOffscreen() - Web APIs
examples var htmlcanvas = document.createelement('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcontext('webgl'); // ...
ImageBitmap.close() - Web APIs
WebAPIImageBitmapclose
syntax void imagebitmap.close() examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
ImageBitmap - Web APIs
imagebitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in webgl.
ImageBitmapRenderingContext.transferFromImageBitmap() - Web APIs
examples html <canvas id="htmlcanvas"></canvas> javascript var htmlcanvas = document.getelementbyid("htmlcanvas").getcontext("bitmaprenderer"); // draw a webgl scene offscreen var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.convertToBlob() - Web APIs
examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.convertToBlob() - Web APIs
examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.convertToBlob() - Web APIs
examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.transferToImageBitmap() - Web APIs
examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ...
RenderingContext - Web APIs
renderingcontext is a webidl typedef which can refer to any one of the interfaces that represent a graphics rendering context within a <canvas> element: canvasrenderingcontext2d, webglrenderingcontext, or webgl2renderingcontext.
Video textures - Web APIs
« previous this example demonstrates how to use video files as textures for webgl surfaces.
WebXR application life cycle - Web APIs
each requestanimationframe() callback should use the information provided about the objects located in the 3d world to render the frame using webgl.
Functions and classes available to Web Workers - Web APIs
21 (21) and 26 (26) for url() constructor no support no support no support webgl with offscreencanvas 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.
Worklet - Web APIs
WebAPIWorklet
css layout api for 3d rendering with webgl, you don't use worklets.
XRRenderStateInit - Web APIs
properties baselayer optional an xrwebgllayer object from which the webxr compositor will obtain imagery.
XRRigidTransform.position - Web APIs
example to create a reference space which can be used to place an object at eye level (assuming eye level is 1.5 meters): function onsessionstarted(xrsession) { xrsession.addeventlistener("end", onsessionended); gl = initgraphics(xrsession); let gllayer = new xrwebgllayer(xrsession, gl); xrsession.updaterenderstate({ baselayer: gllayer }); if (immersivesession) { xrsession.requestreferencespace("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); }); } else { session.requestreferencespace("viewer").then(refspacecreated); } } f...
XRSession.renderState - Web APIs
the information provided covers the minimum and maximum distance at which to render objects, the vertical field of view to use when rendering the in the inline session mode, and the xrwebgllayer to render into for inline composition.
XRSession.requestAnimationFrame() - Web APIs
// obtain xr object const xr = navigator.xr // request a new xrsession xr.requestsession("inline").then((xrsession) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace) gl.bindframebuffer(xrwebgllayer.framebuffer) for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview) gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height) // webgl draw calls will now be rendered into the appropriate viewport.
XRSession - Web APIs
WebAPIXRSession
const xr = navigator.xr; if (xr) { xr.requestsession("inline").then((xrsession) => { xrsession.requestreferencespace("local").then((xrreferencespace) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); } }); }); }); } else { /* webxr is not available */ } specifications specification status comment webxr device apith...
XRView.transform - Web APIs
WebAPIXRViewtransform
for each view, we obtain its viewport and pass that to webgl using gl.viewport().
XRViewerPose.views - Web APIs
(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered output to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the output device.
XRViewport.x - Web APIs
WebAPIXRViewportx
the read-only xrviewport interface's x property indicates the offset from the left edge of the destination surface (typically a xrwebgllayer to the left edge of the viewport within the surface into which webxr content is to be rendered.
Web accessibility for seizures and physical reactions - Accessibility
see also mdn accessibility: what users can to to browse more safely accessibility: understanding color and luminance applying svg effects to html content basic animations (canvas tutorial) canvas api canvasrenderingcontext2d.drawimage() <color> document object model mediaquerylist using dynamic styling information webgl: 2d and 3d graphics for the web color color tutorial: describing color tom jewett.
Web Accessibility: Understanding Colors and Luminance - Accessibility
webgl is usually in the rgba format; see an example of how it is used in "clearing with colors".
Demos of open web technologies
mmer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with cust...
Guide to Web APIs - Developer guides
WebGuideAPI
nt request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
Graphics on the Web - Developer guides
3d graphics webgl a guide to getting started with webgl, the 3d graphics api for the web.
HTML5 - Developer guides
WebGuideHTMLHTML5
webgl webgl brings 3d graphics to the web by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements.
Developer guides
having native audio and video in the browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
WebHTMLElementcanvas
use the html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations.
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
the <script> element can also be used with other languages, such as webgl's glsl shader programming language and json.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
element description <canvas> use the html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
76 <canvas>: the graphics canvas element canvas, element, html, html scripting, html5, reference, web use the html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations.
Reason: CORS request not HTTP - HTTP
to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets.
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
webgl textures.
Clear-Site-Data - HTTP
depending on the browser, this might also clear out things like pre-rendered pages, script caches, webgl shader caches, or address bar suggestions.
JavaScript typed arrays - JavaScript
this lets you, for example, interact with complex data structures from webgl, data files, or c structures you need to use while using js-ctypes.
Web Performance
we cover them in this section: key performance guides animation performance and frame rateanimation on the web can be done via svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
Mobile first - Progressive web apps (PWAs)
imagine you wanted to include some kind of webgl chart in the desktop version of the site requiring a webgl library like three but didn't want it included in the mobile version?
Web API reference - Web technology reference
WebReferenceAPI
these can be accessed using javascript code, and let you do anything from making minor adjustments to any window or element, to generating intricate graphical and audio effects using apis such as webgl and web audio.
WebAssembly Concepts - WebAssembly
a set of web apis that the web app can call to control web browser/device functionality and make things happen (dom, cssom, webgl, indexeddb, web audio api, etc.).