WebGL | The Official Khronos WebGL Repository | Graphics library
kandi X-RAY | WebGL Summary
kandi X-RAY | WebGL Summary
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
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of WebGL
WebGL Key Features
WebGL Examples and Code Snippets
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
function functionNode_webgl( inNode, _opt ) {
gpu = inNode.gpu;
opt = _opt || {};
if (opt.debug) {
console.log(inNode);
}
jsFunctionString = inNode.jsFunctionString;
if (opt.prototypeOnly) {
return ast_FunctionPrototype( inNode.getJ
function webglPrototypeString(functionName, opt) {
if (opt == undefined) {
opt = {};
}
if(functionName) {
return this.webglPrototypeString_fromFunctionNames( this.traceFunctionCalls(functionName, [], opt).reverse(), opt );
}
return
Community Discussions
Trending Discussions on WebGL
QUESTION
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.
...ANSWER
Answered 2021-Jun-13 at 06:22The 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.
QUESTION
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
projectToWorld
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.
...
- instantiating map
ANSWER
Answered 2021-Jun-12 at 22:39It'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))
QUESTION
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.
...ANSWER
Answered 2021-Jun-10 at 15:47To 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:
QUESTION
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
...ANSWER
Answered 2021-Jun-09 at 15:54You need to close the outline around the triangles:
QUESTION
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:
...ANSWER
Answered 2021-Jun-08 at 11:29- You're using index
a
for argument ofCubes.attraction
which is expecting an object with apos
vector field (a Cubes ?) - You're trying to position your cubes using
this.x
/this.y
, which aren't changed byupdate
. Use thethis.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 thanCubes
QUESTION
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
...ANSWER
Answered 2021-Jun-07 at 08:43Since 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
QUESTION
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
ANSWER
Answered 2021-Jun-05 at 20:53gl.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.
QUESTION
I am trying to load glb file as:
...ANSWER
Answered 2021-Jun-06 at 06:44Well, 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.
QUESTION
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);)
...ANSWER
Answered 2021-Jun-04 at 09:08You neeed to enable and setup alpha blending using
QUESTION
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:
...ANSWER
Answered 2021-Jun-03 at 11:28The 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
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install WebGL
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page