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

My threeJS class only apply meshs settings to 1 of 2 models in my scene

I am creating a scene in three js with two models in .glb format; I am following a pre-recorded class and I have followed exactly all the steps. We create a class for the models in model.js and in index.js we define them. Everything was working fine…
AlMustieles
  • 43
  • 5
2
votes
2 answers

3D map in browser with elevation

I'm trying to find 3d map js library with support for custom elevation data. I have DTED2 which I would like to load by library. Second format I have is xyz. I tried https://openglobus.org/ without success. Libraries I found so far but had no time…
Jurij Hladuk
  • 39
  • 3
2
votes
1 answer

Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js"

I am having a really hard time understanding why my program is crashing due to this error: Uncaught TypeError: Failed to resolve module specifier "three/examples/jsm/loaders/GLTFLoader.js". Relative references must start with either "/", "./", or…
cluelesscoder
  • 35
  • 1
  • 5
2
votes
1 answer

Image rendered from useLoader @react-three/fiber using shaderMaterial has different color from its original color

Here is my problem, my project is generated from create-react-app, followed by some @react-three/fiber and glsl dependencies, I render simple planeBufferGeometry and for the material I use shaderMaterial here is code for planeBufferGeometry:…
Reynald Lamury
  • 165
  • 1
  • 2
  • 9
2
votes
1 answer

load shaders from next.js

I am using next.js for my web app. I use WebGL to render a 2d scene. I have a fragment and a vertex shader hardcoded as strings in my javascript: var fragmentShaderSource = [ ` #ifdef GL_ES`, `precision highp float;`, ` #endif`, …
Th0rgal
  • 703
  • 8
  • 27
2
votes
0 answers

Instantiating AmazonCognitoIdentityProviderClient in Unity (WebGL build) gives the error "Value cannot be null. Parameter name: stream"

I am trying to build a unity project for WebGL. The project includes AWS SDK and the dll's are added into the project as in here https://docs.aws.amazon.com/sdk-for-net/v3/developer-guide/unity-special.html. The project builds fine without errors…
Nadun Liyanage
  • 463
  • 3
  • 10
2
votes
1 answer

video chatting in WebGL

I would like to develop a virtual classroom contains projector for presenting power point's slides and video chatting.all these tools will be developed using WebGL. Is there any possibility for including video chatting, and presenting power point's…
Abdulkareem
  • 119
  • 3
  • 9
2
votes
0 answers

How to make a proper planar reflection using ogl with a perspective camera?

I'm trying to reflect a WebGL scene in a plane with ogl, as a mirror would do. I made a naive implementation of the three.js reflector but all I got is a distorted image that doesn't match what an actual reflection would look like. I get the…
Julien Dargelos
  • 356
  • 1
  • 12
2
votes
0 answers

I need help programming the Heat Equation in REGL (WebGL Library)

I am new to how WEBGL works so I do not understand why the Heat Equation is not working like it is supposed to. In my fragment shader, I used a sampler 2D, prevState, and a texture coordinate, uv. With the heat equation having the formula, U(i,j) +=…
Juggernaut
  • 21
  • 1
2
votes
1 answer

WebGL: read from a texture and write the output to a second texture

I am using WebGL2. I have two programs. Program 1 renders my favorite triangle, in my favorite color, into a texture, for safe keeping. Program 2 reads the output of program 1 (the first texture) and then renders the contents of that texture. This…
Avery
  • 57
  • 1
  • 4
2
votes
1 answer

What is the precision of a uniform mat4's float values?

Are the floats 32 bits, since that is what I provide it, or are they the precision of a highp float?
Xavier
  • 8,828
  • 13
  • 64
  • 98
2
votes
0 answers

Display large vector collections in WebGL

I was looking at three.js as a replacement of deck.gl in our existing WebGL software, for reasons not relevant to this question. One of the input data sources is large vector data exported from CAD systems. One scene integrates about 5 collections…
Pavel Zdenek
  • 7,146
  • 1
  • 23
  • 38
2
votes
1 answer

How to add custom shadermaterial to an obj 3D object in Three.js

The following is a working example with ObjLoader for 3D object. Is there anyone that can teach me how to add shader material to this 3D object? Most tutorials are like using standard three.geometry and then add the geometry and shader to a scene.…
Sloan
  • 79
  • 7
2
votes
0 answers

WebGL (1.0). Using multiple programs to render both a 3D object and a small drawing application

We are currently working on a project, which requires us to render a 3D object and a small drawing application next to each other. We are drawing them in the same canvas and use viewport and scissor to give them their separate area. So far, we have…
K_Klok
  • 21
  • 1
2
votes
1 answer

Can I store signed 16bit value in single channel in webgl2?

Is there a way to store signed 16bit value inside single channel? Im trying to store it inside red channel like this: gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16I, width, height, 0, gl.RED, gl.SHORT, image); but it results in…
ffsa
  • 55
  • 5
1 2 3
…
99 100