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

How to convert coordinate from NDC to camera space in vertex shader?

I'm maintaining a vertex shader encapsulated in a custom material class (inherited from ShaderMaterial but now from MeshStandardMaterial) which convert 3D coordinate to NDC as usual: vec4 ndcPos = projectionMatrix * modelViewMatrix * vec4( position,…
Delmo
  • 2,188
  • 2
  • 20
  • 29
2
votes
1 answer

How to render videos in PixiJS without lowering performance

I am building a game with PixiJS and need to use videos as the background. I am able to load the video and have it fill the canvas but when the video plays I get a major performance hit on the rest of the game. I have seen something about rendering…
whoMe
  • 227
  • 2
  • 13
2
votes
0 answers

Error with stockfish library when building a unity project for WebGl

I have a chess game where I integrated stockfish and saved it in "Assets/Plugins/stockfish_15_win_x64_popcnt". folder content The game is working in the unity playmode, but when I try to build it for WebGL i get errors in the files from…
2
votes
1 answer

WebGLRenderingContext.createShader returning null

I have a webgl canvas on a page that's loaded into an iframe. On occasion, when navigating the iframe away then back to the webgl content, the call to WebGLRenderingContext.createShader() returns a null value. No errors are thrown, just null. Around…
Reahreic
  • 596
  • 2
  • 7
  • 26
2
votes
1 answer

passing multiple secondary geometries into vertex shaders using threejs

Lets say I have a geometry which I am using the vertices of to create Points or an InstancedMesh. But then I want change this underlying geometry to something else, let's as a cone to a sphere or something which has the same number of vertices. I…
Alex
  • 3,732
  • 5
  • 37
  • 59
2
votes
1 answer

When perspective division is necessary?

I'm very confused when it is necessary for a homogeneous coordinate (x, y, z, w) get divided by w (ie. converting to (x/w, y/w, z/w, 1)). According to this page, when a homogeneous vertex coordinate is passed through a orthographical or projective…
Real Donald Trump
  • 412
  • 1
  • 5
  • 15
2
votes
1 answer

UnityWebRequest WebGL Missing Cookie Response Header

I'm posting log in form data containing username and password to an endpoint using Unity. I receive a success response containing expected credentials (as a session cookie) and subsequent communications are completed successfully when testing this…
TVOHM
  • 2,740
  • 1
  • 19
  • 29
2
votes
0 answers

How to prevent WebGL from clipping outside bounds when drawing a wavy circle?

I have a shader that draws a bunch of instanced circles, and it works great! It works by basically drawing a bunch of rectangles at every given location, and then in the fragment shader it effectively discards pixels that are outside the radius, and…
Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
2
votes
1 answer

How to prevent compositing with an HTML canvas?

I am developing an application using a WebGL canvas, and I notice through benchmarking that a significant amount of time is spent "compositing layers". But I don't think this should be occurring, because my entire HTML page only has a single element…
Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
2
votes
1 answer

How to profile a WebGL app using the unity profiler tool?

I am working on a Unity project, and I want to export it on Android, and WebGL. For stability purposes I have to use the profiler provided by Unity, and I managed to make it work with an APK version of my project, running on an Android device. But…
2
votes
1 answer

How to get indices from three.js OBJLoader

I use three.js OBJLoader to get mesh info, use traverse to get geometry info, but only get position, normal, uv, no indices. Is anyone know how to get indices from OBJLoader? enter image description here async function loadObj2(filename) { let…
薛潇宇
  • 31
  • 3
2
votes
0 answers

How to manipulate a set of images collectively along the screen in Three js

I have been trying to recreate https://anatoletouvron.fr/ portfolio and cannot recreate the convex and concave type of distortion of the images when we scroll fast on the site. Does anyone have any pointers? I tried applying all the shaders I…
kash_moha
  • 31
  • 2
2
votes
1 answer

p5.js — "Error: [object Arguments]is not a valid color representation" only when working with WEBGL

I'm trying to draw a field of stars (among other things) using p5.js. I get this error when I create my canvas using WEBGL, but the error goes away when I don't use it. However, I need the canvas to use WEBGL for other aspects of the project.…
Patrick
  • 21
  • 2
2
votes
2 answers

WebGL Cannot Draw More Than 44 Points Even If Enough Buffer Space

As the title says I have a WebGL application. I am making use of drawArrays in such a fashion gl.drawArrays(gl.LINES, 0, 44); But I seem to be running into a problem where if I try to draw more than 44 points than I get the following…
NullPointer7
  • 101
  • 7
2
votes
1 answer

How to render caps with clipping planes and stencil in Threejs with outer and inner mesh objects

I’m new to three.js and stackoverflow. I’m trying to clip and cap three.js objects that have been rendered so I can move the helperPlane back and forth through the object to see inside it. There's an object inside it. What I’m looking to do is…
Fraserr 01
  • 51
  • 6