webgl-examples | WebGL Examles - including THREE | Augmented Reality library

by MarkusSprunck JavaScript Version: v98 License: No License

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

kandi X-RAY | webgl-examples Summary

webgl-examples is a JavaScript library typically used in Virtual Reality, Augmented Reality, Three.js, WebGL applications. webgl-examples has no bugs, it has no vulnerabilities and it has low support. You can download it from GitHub.

Collection of WebGL Examles - including THREE.SimpleDatGuiDemo.html for Oculus Rift

Support

Quality

Security

License

Reuse

Support

webgl-examples has a low active ecosystem.

It has 26 star(s) with 6 fork(s). There are 3 watchers for this library.

It had no major release in the last 12 months.

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

It has a neutral sentiment in the developer community.

The latest version of webgl-examples is v98

Quality

webgl-examples has 0 bugs and 0 code smells.

Security

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

webgl-examples code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

webgl-examples 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-examples releases are available to install and integrate.

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

Get all kandi verified functions for this library.

webgl-examples Key Features

No Key Features are available at this moment for webgl-examples.

webgl-examples Examples and Code Snippets

No Code Snippets are available at this moment for webgl-examples.

Community Discussions

Trending Discussions on webgl-examples

How do I apply a 2d shader to a webgl canvas in js?

WebGL textures from YouTube video frames

Canvas added to YouTube is not visible

QUESTION

How do I apply a 2d shader to a webgl canvas in js?

Asked 2022-Mar-24 at 14:13

I hope I'm not taking the wrong approach here but I feel like I'm on the right track and this shouldn't be too complicated. I want to take a simple function of x and y on the screen and return a color applied to each pixel of a webGL canvas.

For example: f(x,y) -> rgb(x/canvasWidth,y/canvasHeight) where x and y are positions on the canvas and color is that of the pixel.

My first thought is to take this example and modify it so that the rectangle fills the screen and the color is as described. I think this is achieved by modifying the vertex shader so that the rectangle covers the canvas and fragment shader to implement the color but I'm not sure how to apply the vertex shader based on window size or get my x and y variables in the context of the fragment shader.

Here's the shader code for the tutorial I'm going off of. I Haven't tried much besides manually changing the constant color in the fragment shader and mutating the square by changing the values in the intitBuffers method.

...

ANSWER

Answered 2022-Mar-17 at 10:15

You're on the right track, for having a quad fill the screen you can skip all the matrix transforms in the vertex shader and just feed normalized device coordinates (-1 ... +1) directly into gl_Position then use gl_FragCoord to access the position of the pixel in the fragment shader.

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

QUESTION

WebGL textures from YouTube video frames

Asked 2022-Jan-08 at 15:24

I'm using the technique described here (code, demo) for using video frames as WebGL textures, and the simple scene (just showing the image in 2D, rather than a 3D rotating cube) from here.

The goal is a Tampermonkey userscript (with WebGL shaders, i.e. video effects) for YouTube.

The canvas is filled grey due to gl.clearColor(0.5,0.5,0.5,1). But the next lines of code, which should draw the frame from the video, have no visible effect. What part might be wrong? There are no errors.

I tried to shorten the code before posting, but apparently even simple WebGL scenes require a lot of boilerplate code.

...

ANSWER

Answered 2022-Jan-08 at 15:24

Edit: As it has been pointed out, first two sections of this answer are completely wrong.

TLDR: This might not be feasible without a backend server first fetching the video data.

If you check the MDN tutorial you followed, the video object passed to texImage2D is actually an MP4 video. However, in your script, the video object you have access to (document.getElementsByTagName("video")[0]) is just a DOM object. You don't have the actual video data. And it is not easy to get access to that for YouTube. The YouTube player do not fetch the video data in one shot, rather the YouTube streaming server makes sure to stream chunks of the video. I am not absolutely sure on this, but I think it'll be very difficult to work around this if your goal is to have a real time video effects. I found some discussion on this (link1, link2) which might help.

That being said, there are some issues in your code from WebGL perspective. Ideally the code you have should be showing a blue rectangle as that is the texture data you are creating, instead of the initial glClearColor color. And after the video starts to play, it should switch to the video texture (which will show as black due to the issue I have explained above).

I think it is due to the way you had setup your position data and doing clip space calculation in the shader. That can be skipped to directly send normalized device coordinate position data. Here is the updated code, with some cleaning up to make it shorter, which behaves as expected:

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

QUESTION

Canvas added to YouTube is not visible

Asked 2022-Jan-06 at 02:35

I'm following the WebGL tutorial from MDN (code, demo (black rectangle)) to create a WebGL canvas.

The goal is a userscript (with WebGL shaders, i.e. video effects) for YouTube. So I opened a YouTube video page and put the code below (from the link above) into the JavaScript console. The canvas got created, but it is invisible.

The canvas inherits a lot of CSS from YouTube by default. Am I overlooking some CSS properties that make it invisible? What to look out for in such cases? It should be black.

...

ANSWER

Answered 2022-Jan-04 at 02:19

Your canvas is there, but it's not on-top. Set some additional CSS for positioning. For example:

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

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

Vulnerabilities

No vulnerabilities reported

Install webgl-examples

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: