webgl-examples | Code examples that accompany the MDN WebGL documentation | Learning library
kandi X-RAY | webgl-examples Summary
kandi X-RAY | webgl-examples Summary
This repository is hope to examples for the MDN Web Docs content about the WebGL API, which is used for 2D and 3D graphics on the web. Specifically, each of these examples pairs with an article in the MDN WebGL tutorial.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Draws the scene .
- Main program .
- Load a texture
- Initializes rectangle buffers .
- Create a video .
- create texture
- Load a shader
- Initialize a shader program
- Render the scene
- Updates a texture
webgl-examples Key Features
webgl-examples Examples and Code Snippets
Community Discussions
Trending Discussions on webgl-examples
QUESTION
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:15You'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.
QUESTION
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:24Edit: 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:
QUESTION
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:19Your canvas is there, but it's not on-top. Set some additional CSS for positioning. For example:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install webgl-examples
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
