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
28
votes
1 answer

How to cast int to float in GLSL (WebGL)?

My code is (inside the void main): float res; for(int i=0; i<15; i++) { res = float(i)/15.0; //... } Unfortunately I get a syntax error at float(i)/15.0 If I just write i/15.0, then the error is: wrong operand types no operation '/'…
Iter Ator
  • 8,226
  • 20
  • 73
  • 164
28
votes
3 answers

Drawing a line with three.js dynamically

This is what I'd like to achieve (a modifiable polygon where the red circles are vertices) and I'd like to build the polygon dynamically. When initiating the geometry as var geometry = new…
user3960875
  • 965
  • 1
  • 13
  • 24
28
votes
6 answers

Antialiasing not working in Three.js

I am new to three.js and have starting working with it a lot recently. I really enjoy it and I have created some incredible things. However, I'm unsure why but when setting antialiasing to true I see no difference. renderer = new…
zaidi92
  • 355
  • 1
  • 3
  • 11
28
votes
3 answers

Why do shaders have to be in html file for webgl program?

I have seen the following question where someone asked how to remove shaders from html: WebGL - is there an alternative to embedding shaders in HTML? There are elaborate workarounds to load in a file containing the shader suggested in the answers to…
Dov
  • 8,000
  • 8
  • 46
  • 75
27
votes
6 answers

Is there a working THREE.js API documentation?

I am trying to learn the basics of THREE.js. I have read a couple of tutorial, and I would like to start experimenting. My problem is that I am not able to find any documentation This is supposed to be an API browser, but I was not able to find the…
Andrea
  • 20,253
  • 23
  • 114
  • 183
26
votes
4 answers

Javascript and WebGL, external scripts

Just curious; How do I place my webgl shaders, in an external file? Currently I'm having;