shaders | First steps with GLSL shaders

Why using a core profile OpenGL Context (GLFW_OPENGL_CORE_PROFILE) it is mandatory to create a Vertex Array Object. There is no default VAO when using a core profile.

e.g.:

I think the intended way to deal with this is function constants. This is an example of how I deal with this in my vertex shaders.

By default OpenGL assumes that the start of each row of an image is aligned to 4 bytes. This is because the GL_UNPACK_ALIGNMENT parameter by default is 4. Since the image has 3 color channels (GL_RGB), and is tightly packed the size of a row of the image may not be aligned to 4 bytes.
When a RGB image with 3 color channels is loaded to a texture object and 3*width is not divisible by 4, GL_UNPACK_ALIGNMENT has to be set to 1, before specifying the texture image with glTexImage2D:

You currently are using glEnable(GL_DEPTH_TEST) withglDepthFunc(GL_LESS), which means only fragments having a smaller z (or depth) component are rendered when rendering overlapped triangles. Since your vertex positions are defined with the back-face having a smaller z coordinate than the front-face, all front-face fragments are ignored (since their z coordinate is larger).

Solutions are:

• Using glDepthFunc(GL_GREATER) instead of glDepthFunc(GL_LESS) (which may not work in your case, considering your vertices have z <= 0.0 and the depth buffer is cleared to 0.0)
• Modify your vertex positions to give front-face triangles a smaller z component than back-face triangles.

I believe that when using matrix transforms, a smaller z component normally indicates the fragment is closer to the camera, which is why glDepthFunc(GL_LESS) is often used.

I don't know if it is critical for your problem but modifying this

This is not a complete answer to your question, but I think it should give you a start on where to go. vDSP is part of Accelerate, and it's built to speed up mathematical operations on arrays. This code uses multiple steps, so probably could be more optimised, and it's not taking any other filters than linear into account, but I don't have enough knowledge to make the steps more effective. However, on my machine, vDSP is 4x faster than map for the following processing:

You need to bind the texture to the image unit before executing the compute shader. The binding between the texture object and the shader is established through the texture image unit. The shader knows the unit because you set the unit variable or specify the binding point with a layout qualifier, but you also need to bind the object to the unit:

This is perfectly fine that command buffer is committed. In fact if it wouldn't be committed you'll never get to notify block.

GPU and CPU runs in parallel. So when you use MTLEvent you don't stop executing CPU code (all the Swift code actually). You just tell GPU in what order to execute GPU code.

So what's happening in your case:

1. All your code runs in a single CPU thread without any interruption.
2. GPU starts executing command buffer commands only when you call commit(). Before it GPU actually don't do anything. You just scheduled command to be performed on GPU but don't perform them.
3. When GPU executes commands it checks for your MTLEvent. It performs part 1, then encodes value 1 to event, performs notify block, encodes value 2, performs second GPU block.

But again all the actual GPU work starts only when you call commit() on command buffer. That's why buffer is already committed in notify block. Because it is performed after commit().

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: