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
3 answers

Load GLTF model in next.js / Error: Could not load response.body.getReader is not a function

How to load a model GLTF model in next.js? I spend hours looking for this. Nothing works :( What I tried so far: use different loaders ( useLoader(GLTFLoader,url) / useGLTF(url) and some more wrap the component in a next/dynamic component / dont…
Alex
  • 111
  • 2
  • 9
2
votes
1 answer

Threejs Reactjs : TypeError: Cannot read properties of null (reading 'addEventListener')

I follow this tutorial : https://youtu.be/V8GnInBUMLo but... when I finish I got this error TypeError: Cannot read properties of null (reading 'addEventListener') I try to had if(element) inside my addeventlisters function but I got a new…
DELORME Joris
  • 97
  • 1
  • 7
2
votes
0 answers

What is the meaning of WebGL: INVALID_VALUE: texImage2D: width or height out of range

I want to use UnrealBloomPass in three.js postprocessing, but I get a black screen after adding effectComposer.addPass(unrealBloomPass), on the console I get the following WebGL: INVALID_VALUE: texImage2D: width or height out of…
user16414673
2
votes
1 answer

Why doesn't this WebGL code render a square on React Native?

To give some context I'm trying to implement Conway's Game of Life as a mobile app using React Native and WebGL (the expo-gl module); the included code is from some of the modules of this project and targets its rendering to a component on the…
Ste1891
  • 75
  • 8
2
votes
1 answer

Apply transformation in a fragment shader

I know that I can perform a transformation(rotation,scale) in the vertex shader. However I wonder if I can do the similar thing in the fragment shader. shadertoy.com - transformation_in_fragment_shade I tried to apply transformation in fragment…
kalan
  • 23
  • 4
2
votes
0 answers

Is it possible to check whether a "experimental feature" in Safari is active?

I precisely require this for the WebGL 2.0 as well as WebGL via Metal experimental features. Is it possible to check whether they're active via some API call?
Georg Molzer
  • 45
  • 1
  • 6
2
votes
1 answer

Implementing series approximation/perturbation theory for WebGL2 based Mandelbrot viewer application

I have started building a mandelbrot viewer application with WebGL2 and JavaScript and am trying to implement series approximation at a basic level. I'm currently getting weird/distored/incomplete images depending on the number of iterations and the…
badross92
  • 93
  • 3
  • 6
2
votes
1 answer

How to run a shader from Shadertoy in your J/s file with WebGL and GLSL?

I'm new to programming shaders and I want to create a shader with WebGL and GLSL. To see how it really works, I want to test a shader from Shadertoy. But how do you take the code from Shadertoy and actually get to run it in a J/S file? Do you just…
GottaGaming
  • 51
  • 1
  • 10
2
votes
2 answers

How do you increase the space between pixels in a fragment shader?

I'm currently working on a shader for a very mundane effect I'd like to achieve. It's a little bit hard to explain, but the basic gist is that I'm trying to "pull apart" the pixels of a pixel art image. You can see my current progress, however…
2
votes
1 answer

Cypress gpu_init.cc(441) passthrough is not supported GL is Swiftshader

I'm trying to setup Cypress in my project to run e2e tests and when I start it up I get the error Cypress gpu_init.cc(441) passthrough is not supported GL is Swiftshader. I've seen some people on here with the same error but with 'disabled' at the…
Pazulay
  • 215
  • 1
  • 3
  • 11
2
votes
1 answer

Transparency z-fighting withing a single transparent plane

I am trying to get transparency working within a wavy plane terrain Here is my demo: console.clear() const t = THREE //////////////////////////////////// const scene = new t.Scene() const renderer = new…
Georgi B. Nikolov
  • 976
  • 2
  • 13
  • 24
2
votes
1 answer

JavaScript DOM image preload

https://webgl2fundamentals.org/webgl/lessons/webgl-3d-textures.html In the link above, I have to create a new image and after loading I have to send it to the buffer. var image = new Image(); image.src = "resource/1.png"; image.onload = ()=>{ …
user16657004
2
votes
1 answer

Why isn't this drawing a triangle?

I don't know why my WebGL code is not drawing a simple triangle on the screen and I'm not sure how to debug it. The shaders are able to compile so I believe that's not the problem. main.js: const canvas = document.querySelector("#gl-canvas") const…
2
votes
1 answer

Rotate an image via GLSL/WebGL

I am trying to use GLSL to rotate an image (via glfx.js). I have checked prior answers such as this and this but the results are still a skewed picture (first answer), or the answer is a bit too terse for my beginner level (the second). The fragment…
simone
  • 4,667
  • 4
  • 25
  • 47
2
votes
1 answer

Convert fragment shader gradient result from black to transparent in GL ES

I'm trying to generate realistic stars for an open source game I'm working on. I'm generating the stars using principles covered here. I'm using the three.js library in a Chromium engine (NW.js). The problem I've found is that the star glow fades…
aggregate1166877
  • 2,196
  • 23
  • 38
1 2 3
99
100