WebGL | The Official Khronos WebGL Repository | Graphics library

 by   KhronosGroup HTML Version: Current License: Non-SPDX

kandi X-RAY | WebGL Summary

kandi X-RAY | WebGL Summary

WebGL is a HTML library typically used in User Interface, Graphics, WebGL applications. WebGL has no bugs, it has no vulnerabilities and it has medium support. However WebGL has a Non-SPDX License. You can download it from GitHub.

This is the official home of the Khronos WebGL repository for the WebGL specifications and the WebGL conformance test suite. Before adding a new test or editing an existing test please read these guidelines. You can find live versions of the specifications at The newest work in progress WebGL conformance test suite for the next version of the spec can be accessed at. Official live versions of the conformance test suite can be found at The WebGL Wiki can be found here

            kandi-support Support

              WebGL has a medium active ecosystem.
              It has 2466 star(s) with 678 fork(s). There are 182 watchers for this library.
              It had no major release in the last 6 months.
              There are 183 open issues and 285 have been closed. On average issues are closed in 118 days. There are 21 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of WebGL is current.

            kandi-Quality Quality

              WebGL has no bugs reported.

            kandi-Security Security

              WebGL has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

            kandi-License License

              WebGL has a Non-SPDX License.
              Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

            kandi-Reuse Reuse

              WebGL releases are not available. You will need to build from source code and install.
              Installation instructions are not available. Examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of WebGL
            Get all kandi verified functions for this library.

            WebGL Key Features

            No Key Features are available at this moment for WebGL.

            WebGL Examples and Code Snippets

            Initialize the WebGL object
            javascriptdot img1Lines of Code : 34dot img1License : Permissive (MIT License)
            copy iconCopy
            function init_webgl(canvasObj) {
            		// Fail fast for invalid canvas object
            		if( !isCanvas(canvasObj) ) {
            			throw new Error("Invalid canvas object - "+canvasObj);
            		// Fail fast if browser previously detected no support
            		if( browserSupport  
            Get a WebGL node string
            javascriptdot img2Lines of Code : 17dot img2License : Permissive (MIT License)
            copy iconCopy
            function functionNode_webgl( inNode, _opt ) {
            		gpu = inNode.gpu;
            		opt = _opt || {};
            		if (opt.debug) {
            		jsFunctionString = inNode.jsFunctionString;
            		if (opt.prototypeOnly) {
            			return ast_FunctionPrototype( inNode.getJ  
            Get the name of a WebGL prototype chain .
            javascriptdot img3Lines of Code : 10dot img3License : Permissive (MIT License)
            copy iconCopy
            function webglPrototypeString(functionName, opt) {
            		if (opt == undefined) {
            			opt = {};
            		if(functionName) {
            			return this.webglPrototypeString_fromFunctionNames( this.traceFunctionCalls(functionName, [], opt).reverse(), opt );

            Community Discussions


            getUniformLocation return null
            Asked 2021-Jun-13 at 18:45

            I have a uniform in my fragment shader and when I try to get the value of the location of the uniform, it returns null.

            I checked the spelling and I don't find any spelling error and this uniform is also used in the shader code.

            My error is:

            error in getUniformLocation([object WebGLProgram], materialAmbient): uniform 'materialAmbient' does not exist in WebGLProgram("unnamed")

            This is my code in WebGL to get a uniform location.



            Answered 2021-Jun-13 at 06:22

            The uniforms materialAmbient, ambientLight and specularLight are not "used" in the shader program. They are not required to calculate the output outColor (Actually materialAmbient are ambientLight use to calculate effectiveAmbient. effectiveAmbient, however is not used).
            The compiler and linker optimize the program and removes unnecessary calculations and unnecessary variables. Therefore this variables become no active program resource and you cannot get the resource index (uniform location) for this variables.

            Source https://stackoverflow.com/questions/67955038


            threebox "projectToWorld" returns values exceeding canvas, how do I fix this? (with sample code)
            Asked 2021-Jun-12 at 22:39

            I recently found out there is a very handy method in three-box for placing three.js objects on the map which is "projectToworld".

            While trying to place my three.js objects using the method, I realized that the Vector3 the method returns are really huge and not on the map.

            According to the documentation of threebox, it says


            tb.projectToWorld(lnglat) : THREE.Vector3

            Calculate the corresponding THREE.Vector3 for a given lnglat. It's inverse method is tb.unprojectFromWorld.

            So I decided to use this method to locate my animated object in three js canvas. But what the methods returns are really huge.

            So as I expected, these values don't place the three objects on the map and all the objects disappeared because they presumably are placed at very distant locations.

            How do I fix this issue?

            I made a minimal code to demonstrate this issue as below.

            1. instantiating map


            Answered 2021-Jun-12 at 22:39

            It's strange that no one could answer this question. So I finally figured out how to make it by myself.

            The solution is in the following link.

            The primary reason was that mapbox plots things not based on its vector configuration. It renders things through its matrix as follows.

            var m = new THREE.Matrix4().fromArray(matrix); var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ) .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))

            Source https://stackoverflow.com/questions/67864751


            WebGL: INVALID_OPERATION: useProgram: program not valid
            Asked 2021-Jun-10 at 15:47

            I'm learning WebGl and trying to convert a web mining script to do elliptical curve addition. I started by replacing the working GL code with the code from vanitygen-plus, even though it does more than I need/want. I also began replacing the variables passed to the expected ones and removed a bunch of unneeded JavaScript. I now get the error "glminer.js:54 WebGL: INVALID_OPERATION: useProgram: program not valid" currently testing in chrome 91 on windows 10. unfortunately this doesn't help me much as it doesn't tell me what is invalid.



            Answered 2021-Jun-10 at 15:47

            To get more info on why your program is failing you can output the program info log. Add the following debugging code between linking and using the program:

            Source https://stackoverflow.com/questions/67900673


            3d cube not showing perfectly
            Asked 2021-Jun-09 at 15:56

            I trying to make a pure 3d cube, using my vectors. I thought it was perfect at once, but when rotate it, I can see some lines are not drawn correctly and it is not perfect.

            I can't find why it is not perfect. Is some of my vectors wrong?

            I'm using p5.js to draw it. I know they have methods of 3d rotation and some 3d primitives. But I don't want to use them. I want to draw my own 3d cube.

            Here's the code I used as reference: https://github.com/OneLoneCoder/videos/blob/master/OneLoneCoder_olcEngine3D_Part1.cpp



            Answered 2021-Jun-09 at 15:54

            You need to close the outline around the triangles:

            Source https://stackoverflow.com/questions/67907449


            Vector attraction when mouse pressed
            Asked 2021-Jun-08 at 11:29

            Currently trying to create attraction effect on 3D cubes using createVector function. The attraction designed to trigger when mouse pressed but currently it's stating the error:



            Answered 2021-Jun-08 at 11:29
            • You're using index a for argument of Cubes.attraction which is expecting an object with a pos vector field (a Cubes ?)
            • You're trying to position your cubes using this.x / this.y, which aren't changed by update. Use the this.pos vector instead
            • You can optimize by checking for mouse pressed only once, and only then calling attraction on every cube with mouse coordinates as vector argument
            • In physics, force drives acceleration, not velocity. I changed that but maybe it was deliberate of you.
            • You should change your class name to Cube rather than Cubes

            Source https://stackoverflow.com/questions/67884977


            How can I make my WebGL Coordinate System "Top Left" Oriented?
            Asked 2021-Jun-07 at 08:43

            Because of computation efficiency, I use a fragment shader to implement a simple 2D metaballs algorithm. The data of the circles to render is top-left oriented.

            I have everything working, except that the origin of WebGL's coordinate system (bottom-left) is giving me a hard time: Obviously, the rendered output is mirrored along the horizontal axis.

            Following https://webglfundamentals.org/webgl/lessons/webgl-2d-rotation.html (and others), I tried to rotate things using a vertex shader. Without any success unfortunately.

            What is the most simple way of achieving the reorientation of WebGL's coordinate system?

            I'd appreciate any hints and pointers, thanks! :)

            Please find a working (not working ;) ) example here: https://codesandbox.io/s/gracious-fermat-znbsw?file=/src/index.js



            Answered 2021-Jun-07 at 08:43

            Since you are using gl_FragCoord in your pixels shader, you can't do it from the vertex shader becasuse gl_FragCoord is the canvas coordinates but upside down. You could easily invert it in javascript in your pass trough to WebGL

            Source https://stackoverflow.com/questions/67733712


            uniform1i switches to wrong texture unit
            Asked 2021-Jun-06 at 17:12

            I'm trying to convert an old OpenGL screen saver to WebGL. It's supposed to render a Möbius strip with numbers from "00" to "23" written along it like the numbers on an analog clock's face. This is what the original looks like:

            For reasons I don't fully remember now, the texture of the strip is divided into 4 separate files named hours?.bmp, where the ? stands for 0..3. Accordingly, I tried to load each file into a different texture unit as follows



            Answered 2021-Jun-05 at 20:53

            gl.bindTexture binds the texture to the active texture unit. The active texture unit is a global state and can be changed with gl.activeTexture. Every time gl.activeTexture is called, the active texture unit is changed. This affects all subsequent calls to gl.bindTexture.
            The 2nd line in loadTexture is gl.bindTexture(gl.TEXTURE_2D, texture) and binds the texture to the randomly set texture unit.
            Use the texture unit 0 (gl.TEXTURE0) in loadTexture to load the texture. After loading the textures, bind them to specific texture units. Alternatively, you can pass a specific texture unit to loadTexture and use it when loading the texture.

            Source https://stackoverflow.com/questions/67853512


            Error: undefined Unable to resolve module
            Asked 2021-Jun-06 at 06:44

            I am trying to load glb file as:



            Answered 2021-Jun-06 at 06:44

            Well, I performed some experiments loading assets, it looks like there is a problem with the bundler when using require inline, e.g., using the image component like this fires the same error

            Try requiring your asset in a previous line and then pass it to the .fromModule call.

            Source https://stackoverflow.com/questions/67756848


            clearColor and background-color
            Asked 2021-Jun-04 at 09:08

            In the fragment shader the alpha of gl_Fragcolor is null : gl_FragColor = vec4(0.88,0.33,0.55,0.0);

            When you look the color of the point (size 24) , the color is the background-color of the canvas.

            Where is the clearColor ? ( gl.clearColor(0.12, 0.34, 0.56, 1.0);)



            Answered 2021-Jun-04 at 09:08

            You neeed to enable and setup alpha blending using

            Source https://stackoverflow.com/questions/67828987


            Can't seem to multiply something in fragment shader...precision issue?
            Asked 2021-Jun-03 at 11:28

            I'm trying to unravel a bit of the dark unknown that is webgl via PixiJS library. At this point, it probably should be noted that I haven't used PixiJS for awhile either, but it seemed to be a much more preferable approach than to manipulate the lower level underlying webgl state.

            My logic is currently this: I create two buffers ("current" and "previous") with the same fragment shader as well as a render buffer and a "render" fragment shader. Both buffers start off with the same content: a fill that is rgb(255, 10, 0) for every pixel.

            Right now, the fragment shader does this:



            Answered 2021-Jun-03 at 11:28

            The problem is related to the texture format. The color channels are stored in a single byte using a normalized floating point format. The floating point values in range [0.0, 1.0] are mapped to the integral values in range [0, 255].

            The start value of the green color channel is 10. 10 * 1.05 is 10.5. Since the value is truncated when stored in the texture, the result is 10.

            The simples solution is to change the factor:

            pixel.y = pixel.y * 1.05; // increase green a bit

            Source https://stackoverflow.com/questions/67817626

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install WebGL

            You can download it from GitHub.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone KhronosGroup/WebGL

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Explore Related Topics

            Reuse Pre-built Kits with WebGL

            Consider Popular Graphics Libraries


            by mrdoob


            by pixijs


            by pixijs


            by tensorflow


            by google

            Try Top Libraries by KhronosGroup


            by KhronosGroupHTML


            by KhronosGroupC++


            by KhronosGroupC++


            by KhronosGroupC++


            by KhronosGroupJavaScript