Stack Overflow
Stack Overflow

Questions tagged [webgl]

WebGL extends the capability of the HTML canvas element to allow it to render accelerated graphics in any compatible web browser. **DO NOT TAG QUESTIONS ABOUT 3D LIBRARIES (like THREE.js) WITH THIS TAG** unless the question is specifically about a WebGL API feature. **DO NOT TAG QUESTION ABOUT UNITY WEBGL WITH THIS TAG!!**

WebGL is OpenGL ES 2.0 for web pages. It extends the capability of the HTML canvas element to allow it to render accelerated graphics in any compatible web browser.

WebGL is based on OpenGL ES 2.0 and is driven via a JavaScript API. It does not require the use of plug-ins. Official specifications and additional information can be found at Khronos.

Images for minimal reproducible examples

If possible you should try to make minimal reproducible example in a snippit. If you need to load images to show your issue you can access images from imgur. Here's some image URLs you can use

256x256 F        : https//i.imgur.com/ZKMnXce.png
16x16 F          : https://i.imgur.com/fqgm8uh.png
dog              : https://i.imgur.com/KjUybBD.png
plushy bean      : https://i.imgur.com/UKBsvV0.jpg
plushy bean depth: https://i.imgur.com/arPMCZl.jpg
dice with alpha  : https://i.imgur.com/iFom4eT.png
4x2 ramen atlas  : https://i.imgur.com/MuiZgpu.jpg
giraffe          : https://i.imgur.com/TSiyiJv.jpg
jelly donut sign : https://i.imgur.com/v38pV.jpg
zelda fingernails: https://i.imgur.com/CwQSMv9.jpg
earth            : https://i.imgur.com/BpldqPj.jpg

Getting started with WebGL:

Webglfundamentals.org will get you setup with a basic understanding of WebGL and how it works.

Libraries:

WebGL itself only rasterizes graphics. Libraries are generally used to provide 3D or 2D functionality.

Some 3D libraries:

2D libraries

Helper Libraries

References

6702 questions
2
votes
1 answer

Docker + WebGL + Headless Chrome Error: Passthrough is not supported, GL is disabled

I want to take a screenshot of a web page with a 3D canvas like this: import {createServer} from 'http' import puppeteer from 'puppeteer' const url = "https://webglfundamentals.org/webgl/webgl-load-obj-w-extents.html"; async function main()…
Florian Ludewig
  • 4,338
  • 11
  • 71
  • 137
2
votes
1 answer

Can I capture stream from a hidden canvas in javascript?

I'm currently developing an API which takes a videoTrack as input and return a processed videoTrack. I've managed to draw the processed video on a canvas and hoping use the canvas.captureStream() to capture the videoStream from it. As it turns out…
古今中
  • 333
  • 1
  • 2
  • 8
2
votes
1 answer

Progressively reveal circle in loop

I currently have this: Codepen (embedded snippet below). I would like to be able to change the color progressively after the scanline, something like this: After searching online and trying to find something in three.js / WebGL I failed to procure…
rosaqq
  • 426
  • 4
  • 16
2
votes
0 answers

Unity inside React JS: Magic header problem

I'm trying to insert a build unity of type WebGL in the react JS application. However, I am having a problem with the file called WASM (WebAssembly) provided by Unity. My purpose is to show the game on the webpage. NOTE: If there are easier…
YMELO
  • 41
  • 1
  • 6
2
votes
1 answer

WebGL2 : incomplete framebuffer

I'm porting a C++/OpenGL application into WebGL and I'm trying to create and configure a framebuffer. The framebuffer has 3 textures we can write into of types : vec2, vec2, uint. (gl.RG32F, gl.RG32F, gl.R32UI) Here is how I initialize the…
bamia
  • 333
  • 3
  • 15
2
votes
0 answers

Bloom or some other post-processing (filter) on a webpage?

Is it possible to apply post-processing effects, such as bloom or chromatic aberration, over a whole web page? I know that we can write shaders for a canvas element, but would they take effect on whatever is rendered beneath said canvas element, if…
Daniel Hadad
  • 51
  • 4
2
votes
0 answers

Is it possible to filter integer texture in WebGL?

I have read other posts (for example this) that shows how to render integer texture (R16I) via WebGL. However, it is using the gl.NEAREST for texture filtering for minification and magnification gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,…
lorraine
  • 124
  • 1
  • 10
2
votes
0 answers

How do you render to an R8UI, RedIntegerFormat, UnsignedByteType WebGLRenderTarget?

I'm trying to render to a single component 8 bit render target in three.js but I'm getting a number of errors I'm not sure how to solve and searching doesn't seem to come up with a lot of other hits. The WebGLRenderTarget is created with the…
Garrett Johnson
  • 2,413
  • 9
  • 17
2
votes
1 answer

fragment shader Webgl ERROR: 0:7: 'return' : function return is not matching type:

I don't understand why the return type doesn't match. working with webgl ERROR: 0:7: 'return' : function return is not matching type: precision mediump float; uniform sampler2D previousState; float NablaAHelper(vec2 coord){ if (coord.x < 0.0…
user5895228
2
votes
1 answer

THREE.js flickering result with Frame Buffer Object

I am working on a scene in THREE.js that uses a Frame Buffer Object. For some reason, I'm seeing a crazy flickering / strobe effect. (The strobe goes away if one comments out the line: mesh.material.uniforms.fboData.value =…
duhaime
  • 25,611
  • 17
  • 169
  • 224
2
votes
1 answer

Three.js creating a mirror VS. steel effect on material?

In three.js I'm a bit confused about metalness and roughness. What would be the difference in the metalness and/or roughness in a mirror and metal/steel example, and how would I make them? For example, how can I make a mirror, like this: and a…
user16434953
2
votes
1 answer

Threejs WebXR and GPGPU issue, calculated texture turns black on some angles in VR

I have a problem and wonder if someone could help... I have a reaction-diffusion simulation shader (calculated on a compute shader) and I wanted to try it in VR, in a browser... so, based on https://threejs.org/examples/?q=vr#webxr_vr_ballshooter…
nicovernio
  • 21
  • 1
2
votes
1 answer

ThreeJS Points (Point Cloud) with Lighting using custom Shader Material

Coded using: Using ThreeJS v0.130.1 Framework: Angular 12, but that's not relevant to the issue. Testing on Chrome browser. I am building an application that gets more than 100K points. I use these points to render a THREE.Points object on the…
Pawan Pillai
  • 1,955
  • 5
  • 37
  • 64
2
votes
0 answers

Is it guaranteed that quads later in the vertex buffer will be drawn on top of previous quads?

Let's say we are drawing a bunch of rectangles in OpenGL. That is, we're filling up a vertex buffer and then drawing them all in a single call call via drawArrays, like this: let count = 3; gl.bindBuffer(gl.ARRAY_BUFFER,…
Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
2
votes
1 answer

Add blurriness to drawn elements and frag color of fragment shader

I'm currently trying to achieve an animated kind of gradient by melting 3 blobs with each other where each blob is separately animated. You can find an image of the desired result in the end. I have been able to create and animated 3 blobs/circles…
Johnny Kontrolletti
  • 727
  • 1
  • 10
  • 22
1 2 3
…
99
100