Search completed in 1.11 seconds.
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
the
webgl_draw_buffers.drawbuffers
webgl() 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
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 xr
webgllayer 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 = xr
webgllayer.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 xr
webgllayer 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 xr
webgllayer 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 xr
webgllayer.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 xr
webgllayer to configure the xr
webgllayerinit property framebufferscalefactor in the options specified when calling the xr
webgllayer() constructor.
... syntax let nativescaling = xr
webgllayer.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 xr
webgllayer() constructor creates and returns a new xr
webgllayer object, providing the linkage between the webxr device and the
webgl graphics layer used to render the 3d scene.
... syntax let gllayer = new xr
webgllayer(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
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 xr
webgllayer property antialias is a boolean value which is true if the rendering layer's frame buffer supports antialiasing.
... syntax let antialiasingsupported = xr
webgllayer.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 xr
webgllayer 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 xr
webgllayer is instantiated, by setting the corresponding value in the xr
webgllayerinit object specified as the constructor's layerinit parameter.
... syntax let ignoringdepthbuffer = xr
webgllayer.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 xr
webgllayerinit object provided as the xr
webgllayer() constructor's layerinit parameter, requests that the new
webgl rendering layer support anti-aliasing.
... syntax let layerinit = { antialias: boolvalue }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(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 xr
webgllayer 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 xr
webgllayer interface's getviewport() method returns the xrviewport that should be used to render the specified xrview into the
webgl layer.
... syntax let viewport = xr
webgllayer.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 xr
webgllayer are not part of the same webxr session.
...And 2 more matches
XRWebGLLayerInit.depth - Web APIs
when using the xr
webgllayer() 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 xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(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 xr
webgllayer.ignoredepthvalues.
...And 2 more matches
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
the xr
webgllayerinit dictionary's framebufferscalefactor property, when specified upon instantiating a new xr
webgllayer using its constructor, xr
webgllayer(), 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 xr
webgllayer.getnativeframebufferscalefactor() static function.
... syntax let layerinit = { framebufferscalefactor: scalefactor }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(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 xr
webgllayer.
...And 2 more matches
XRWebGLLayerInit.ignoreDepthValues - Web APIs
the xr
webgllayerinit dictionary's boolean ignoredepthvalues property can be provided in the options passed into the xr
webgllayer() 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 xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(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 xr
webgllayer() 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
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 xr
webgllayerinit dictionary passed into the xr
webgllayer() constructor, specifies that the new layer's color buffer is to include an alpha channel.
... syntax let layerinit = { alpha: boolvalue }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(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 xr
webgllayer is created for a webxr session, xrsession, without an alpha channel.
... xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl, { alpha: false }); }); specifications specification status comment webxr device apithe definition of 'xr
webgllayerinit.alpha' in that specification.
XRWebGLLayerInit.stencil - Web APIs
when using the xr
webgllayer() 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 xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(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 xr
webgllayer is created for a webxr session, xrsession, without a stencil buffer.
... xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl, { stencil: false }); }); specifications specification status comment webxr device apithe definition of 'xr
webgllayerinit.stencil' in that specification.
XRWebGLLayerInit - Web APIs
the webxr device api's xr
webgllayerinit dictionary is used to provide configuration options when creating a new xr
webgllayer object with the xr
webgllayer() constructor.
...the static xr
webgllayer function xr
webgllayer.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 xr
webgllayer(xrsession, gl, layeroptions); }); specifications specification status comment webxr device apithe definition of 'xr
webgllayerinit' 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 xr
webgllayer property framebufferheight indicates the height of the framebuffer, in pixels.
... syntax let bufferheight = xr
webgllayer.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 'xr
webgllayer.framebufferheight' in that specification.
XRWebGLLayer.framebufferWidth - Web APIs
the read-only xr
webgllayer property framebufferwidth specifies the width of the framebuffer, in pixels.
... syntax let bufferwidth = xr
webgllayer.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 'xr
webgllayer.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
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
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 xr
webgllayer 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.
... xr
webgllayer 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 xr
webgllayer being used to render the 3d scene.
... x read only the offset from the origin of the destination graphics surface (typically a xr
webgllayer) 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
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 xr
webgllayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.
... syntax var xr
webgllayer = xrrenderstate.baselayer; value a xr
webgllayer 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 xr
webgllayer 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", setup
webgl, false); var gl, program; function setup
webgl (evt) { window.removeeventlistener(evt.type, setup
webgl, 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 clickxin
webglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxin
webglcoords]), 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", setup
webgl, false); var gl, program; function setup
webgl (evt) { window.removeeventlistener(evt.type, setup
webgl, 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 xr
webgllayer 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 xr
webgllayer.
... updaterenderstate() is then called to associate the new xr
webgllayer.
... function onxrsessionstarted(xrsession) { let glcanvas = document.createelement("canvas"); let gl = glcanvas.getcontext("
webgl", { xrcompatible: true }); load
webglresources(); xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl) }); } specifications specification status comment webxr device apithe definition of 'xrsession.updaterenderstate()' in that specification.
Web APIs
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 api
webglwebrtcwebvttwebxr 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 xr
webgllayer xr
webgllayerinit 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", setup
webgl, false); var gl, program; function setup
webgl (evt) { window.removeeventlistener(evt.type, setup
webgl, 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) ...
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.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.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 xr
webgllayer(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 xr
webgllayer(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 xr
webgllayer 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 xr
webgllayer from which the browser's compositing system obtains the image for the xr session.
XRView - Web APIs
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 xr
webgllayer.
... currently, the specification (and therefore all current implementations of webxr) is designed around rendering every xrview into a single xr
webgllayer, 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
the read-only xrviewport interface's y property indicates the offset from the bottom edge of the destination surface (typically a xr
webgllayer 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Finale - Web APIs
other web apis these apis might be useful when working further with canvas and graphics:
webgl advanced api for rendering complex graphics, including 3d.
Event - Web APIs
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.
ImageBitmap.close() - Web APIs
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"); // ...
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.
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.
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 xr
webgllayer(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 xr
webgllayer 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(xr
webgllayer.framebuffer) for (xrview of viewer.views) { let xrviewport = xr
webgllayer.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
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(xr
webgllayer.framebuffer); for (xrview of viewer.views) { let xrviewport = xr
webgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); } }); }); }); } else { /* webxr is not available */ } specifications specification status comment webxr device apith...
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
the read-only xrviewport interface's x property indicates the offset from the left edge of the destination surface (typically a xr
webgllayer 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.
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
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 api
webglwebrtcwebvttwebxr device apiwebsockets api ...
HTML5 - Developer guides
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.
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.
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
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.).