webgl2examples | Rendering algorithms implemented in raw WebGL | Graphics library

by tsherif HTML Version: Current License: MIT

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

kandi X-RAY | webgl2examples Summary

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

rendering algorithms implemented in raw webgl 2. currently include: - [just a triangle] (vertex arrays) - [phong-shaded cube] (vertex arrays, uniform buffers, immutable textures) - [particles] (vertex arrays, uniform buffers, transform feedback) - [deferred rendering] (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelfetch, ext_color_buffer_float) - [depth of field] (vertex arrays, uniform buffers, immutable textures, depth textures, texelfetch, hardware instancing) - [weighted, blended order-independent transparency] (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelfetch, hardware instancing, ext_color_buffer_float) - [order-independent transparency using dual depth peeling] (vertex arrays, uniform buffers, immutable textures, multiple render targets, float textures, texelfetch, hardware instancing, ext_color_buffer_float) - [screen space ambient

Support

Quality

Security

License

Reuse

Support

webgl2examples has a low active ecosystem.

It has 464 star(s) with 89 fork(s). There are 18 watchers for this library.

It had no major release in the last 6 months.

There are 0 open issues and 1 have been closed. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of webgl2examples is current.

Quality

webgl2examples has no bugs reported.

Security

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

License

webgl2examples is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

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

Get all kandi verified functions for this library.

webgl2examples Key Features

No Key Features are available at this moment for webgl2examples.

webgl2examples Examples and Code Snippets

No Code Snippets are available at this moment for webgl2examples.

Community Discussions

Trending Discussions on webgl2examples

Why is my occlusion culling failed with Three.js?

QUESTION

Why is my occlusion culling failed with Three.js?

Asked 2021-Feb-01 at 03:07

First I knew that Three.js does not have official support for occlusion culling. However, I thought it's possible to do occlusion culling in an offscreen canvas and copy the result back to my Three.js WebGLCanvas.

Basically, I want to transform this demo to a Three.JS demo. I use Three.js to create everything, and in a synced offscreen canvas, I test occlusion culling against each bounding box. If any bounding box is occluded, I turn off the visibility of that sphere in the main canvas. Those are what I did in this snippet. but I don't know why it failed to occlude any sphere.

I think a possible issue might be coming from calculating the ModelViewProjection matrix of the bounding box, but I don't see anything wrong. Could somebody please help?

...

ANSWER

Answered 2021-Feb-01 at 03:07

At a minimum, these are the issues I found.

you need to write to the depth buffer (otherwise how would anything occlude?)

so remove gl.depthMask(false)
you need to gl.flush the OffscreenCanvas because being offscreen, one is not automatically added for you. I found this out by using a normal canvas and adding it to the page. I also turned on drawing by commenting out gl.colorMask(false, false, false, false) just to double check that your boxes are drawn correctly. I noticed that when I got something kind of working it behaved differently when I switched back to the offscreen canvas. I found the same different behavior if I didn't add the normal canvas to the page. Adding in the gl.flush fixed the different behavior.
depthSort was not working

I checked this by changing the shader to use a color and I passed in i / NUM_SPHERES as the color which made it clear they were not being sorted. The issue was this

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

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

Vulnerabilities

No vulnerabilities reported

Install webgl2examples

You can download it from GitHub.

Support

Contributions are welcome! Especially new examples that show features that aren’t included in the current set. The only requirement is that new examples use a similar basic structure: - All GL calls are made at the top level (without being split up into "helper functions"). A reader should be able to read through the source HTML and see all GL calls that are made, in the order that they made. - Shader code should be included at the top of the HTML file in script elements. - Small utility functions are fine (but shouldn’t contain any GL calls!) and should go in [utils/utils.js](https://github.com/tsherif/webgl2examples/blob/master/utils/utils.js). - Use [glMatrix](https://github.com/tsherif/webgl2examples/blob/master/utils/gl-matrix.js) for the math.

Find more information at: