webgl | webgl examples | Graphics library

by lucefer HTML Version: Current License: No License

X-Ray Key Features Code Snippets(3)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | webgl Summary

webgl is a HTML library typically used in User Interface, Graphics, Three.js, WebGL applications. webgl has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.

webgl examples

Support

Quality

Security

License

Reuse

Support

webgl has a low active ecosystem.

It has 95 star(s) with 72 fork(s). There are 5 watchers for this library.

It had no major release in the last 6 months.

There are 0 open issues and 1 have been closed. On average issues are closed in 3 days. There are 1 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of webgl is current.

Quality

webgl has no bugs reported.

Security

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

License

webgl does not have a standard license declared.

Check the repository for any license declaration and review the terms closely.

Without a license, all rights are reserved, and you cannot use the library in your applications.

Reuse

webgl releases are not available. You will need to build from source code and install.

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

javascript

Lines of Code : 34

License : Permissive (MIT License)

Copy

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

javascript

Lines of Code : 17

License : Permissive (MIT License)

Copy

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

Get the name of a WebGL prototype chain .

javascript

Lines of Code : 10

License : Permissive (MIT License)

Copy

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

getUniformLocation return null

threebox "projectToWorld" returns values exceeding canvas, how do I fix this? (with sample code)

WebGL: INVALID_OPERATION: useProgram: program not valid

3d cube not showing perfectly

Vector attraction when mouse pressed

How can I make my WebGL Coordinate System "Top Left" Oriented?

uniform1i switches to wrong texture unit

Error: undefined Unable to resolve module

clearColor and background-color

Can't seem to multiply something in fragment shader...precision issue?

QUESTION

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.

...

ANSWER

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

QUESTION

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

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: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

QUESTION

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.

...

ANSWER

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

QUESTION

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

...

ANSWER

Answered 2021-Jun-09 at 15:54

You need to close the outline around the triangles:

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

QUESTION

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:

...

ANSWER

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

QUESTION

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

...

ANSWER

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

QUESTION

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

...

ANSWER

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

QUESTION

Error: undefined Unable to resolve module

Asked 2021-Jun-06 at 06:44

I am trying to load glb file as:

...

ANSWER

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

QUESTION

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);)

...

ANSWER

Answered 2021-Jun-04 at 09:08

You neeed to enable and setup alpha blending using

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

QUESTION

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:

...

ANSWER

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

Vulnerabilities

No vulnerabilities reported

Install webgl

You can download it from GitHub.

Support

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: