shader | Creates darker or lighter shades of a hex code color | Theme library

Here is my question, i will list them to make it clear:

1. I am writing a program drawing squares in 2D using instancing.
2. My camera direction is (0,0,-1), camera up is (0,1,0), camera position is (0,0,3), and the camera position changes when i press some keys.
3. What I want is that, when I zoom in (the camera moves closer to the square), the square's size(in the screen) won't change. So in my shader:

I am currently learning DirectX 12 and trying to get a demo application running. I am currently stuck at creating a pipeline state object using a root signature. I am using dxc to compile my vertex shader:

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.

What stages can be set for srcStageMask/dstStageMask when submitting a vkCmdPipelineBarrier out of a renderpass, because in such case there is no subpass bind point to graphics pipeline?

The same question for when submitting vkCmdPipelineBarrier in subpass that has a bind point to a compute pipeline which I guess doesn't have stages like VK_PIPELINE_STAGE_VERTEX_SHADER_BIT and maybe many more.

Thanks

Edit

First, thanks to @Nicol Bolas comment, a compute shader can not be dispatched in middle of subpass.

And I would like to clarify my question:

Say I have an image that after a renderpass will have the layout of VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL.

After the renderpass, I want to update the image with new data and wish to change its layout to VK_IMAGE_LAYOUT_TRANSFER_DST_OPTIMAL.

Thus, after recording vkCmdEndRenderPass I record a vkCmdPipelineBarrier command as follows:

I have trouble understanding something about simd_packed vectors in the simd module in Swift. I use the example of float4, I hope someone can help.

My understanding is that simd_float4 is a typealias of SIMD4< Float>, and MemoryLayout< Float>>.alignment = 16 (bytes), hence MemoryLayout.alignment = 16. Makes sense.

But the following I do not understand: simd_packed_float4 is also a typealias of SIMD4. And so MemoryLayout.alignment = 16.

What is the point of the "packed" in simd_packed_float4, then? Where is the "relaxed alignment" that the documentation talks about?

In the Metal Shader Language Specification (Version 2.4) ( https://developer.apple.com/metal/Metal-Shading-Language-Specification.pdf) in Table 2.4 (p.28), it says the alignment of packed_float4 is 4 (which is also the alignment of the scalar type, float), so this IS a "relaxed alignment" (as compared to the 16). That makes sense on its own, but how do I reconcile this to the above (simd_packed_float4 is typealias of SIMD4 and MemoryLayout = 16)?

I'm creating a 3d scene using a-frame (https://aframe.io) and I need some sort of way to mirror an html div onto a plane inside a-frame. For example, lets say that there is a div with some code where I can draw on it similar a whiteboard on the bottom left corner of the screen. Everything that I draw on the whiteboard should be mirrored to the a-frame plane. That way I should be able to see my whiteboard drawing in my a-frame scene.

I've tried using two components the a-frame html embed component (https://github.com/supereggbert/aframe-htmlembed-component) and the a-frame shader component (https://github.com/mayognaise/aframe-html-shader) and both work for displaying html in my scene on a 2d plane however the 2d plane in my scene doesn't mirror the whiteboard and doesn't update. That means when I draw something on my whiteboard, instead of mirroring onto 2d plane and showing what I've drawn in vr, there is just a whiteboard with nothing drawn on it.

I need to be able to create a div in html with a whiteboard or other code on it and have the same html be displayed on a 2d plane in my scene. The 2d html on the plane should update meaning if I draw the letter "a" on my whiteboard, the letter a will appear on the 2d plane in my scene. As long as there is a div where I am able to put my 2d html (my whiteboard) and the div mirrors in vr, that would be the ideal solution. Is there some code that could accomplish this?

Am I missing something with the two component I've tried that allow me to accomplish this? (Two components: https://github.com/supereggbert/aframe-htmlembed-component and https://github.com/mayognaise/aframe-html-shader) Or maybe a different A-frame component?

Ideally I am seeking the code for a component that allows me to mirror a div onto a 3d plane in my scene, or recommend a component that allows me to display interactable content on a 2d div.

I am new to Glsl and have absolutely no idea what I am doing. I have been looking for resources to learn however, most of them are either incredibly general like the book of shaders or really overwhelming like this reference.

Anyways, I am looking for what exactly a "fragment" is. I think it is just referring to pixels that need to be rendered. If this is the case what does gl_FragCoord return? I've messed around with it and I don't think it returns the x,y of the current fragment but the book of shaders says

"vec4 gl_FragCoord, which holds the screen coordinates of the pixel or screen fragment that the active thread is working on."

I have also seen that it returns values from 0 to 1, initially (0.5,0.5). I have no idea what (0.5,0.5) is referring to though. Is it percentage of the screen? Like on a 800px by 800px screen will 0.5,0.5 correspond to 400,400? If so than why doesn't this sort of thing work:

I am trying to write a compute shader that works on a state. I want to store the initial value of this state in a single channel texture. However, this does not work.

I have the following code:

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.