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

5896 questions
48
votes
4 answers

Differences between WebGL and OpenGL

Can anyone give me a simple answer about the exact difference between OpenGL and WebGL? I need more specific on the following: programming semantics, API's inheritence, API's extensions etc. I've looked at the following site but it is not very clear…
Deepak
  • 936
  • 2
  • 8
  • 14
45
votes
6 answers

Tools for GLSL editing

I'm looking for some kind of tool to work with GLSL. I want to experiment with shaders in the WebGL application, so what I'm looking for is something like RenderMonkey. As far as I know - RenderMonkey is not supported anymore, so there must be some…
Juriy
  • 4,591
  • 8
  • 32
  • 51
44
votes
8 answers

Deploy WebGL applications as native iOS or Android applications?

Does anyone know of a way in which you can deploy a WebGL app as a native iOS or Android app? Commercial middleware is acceptable, although an open project would be preferable. Thanks.
Serafina Brocious
  • 29,643
  • 11
  • 85
  • 111
43
votes
4 answers

Optimising the drawing of overlapping rectangles

I have a large number of rectangles, and some overlap others; each rectangle has an absolute z-order and a colour. (Each 'rectangle' is actually the axis-aligned bounding box of a particle effect, mesh or texture and may be semi-transparent. But…
Will
  • 68,898
  • 35
  • 156
  • 231
41
votes
3 answers

Get CPU/GPU/memory information

I need to get any information about the CPU/GPU/memory.The number of cores, memory value, memory and cpu usage... I found a way to do this for IE:How to Use JavaScript to Find Hardware Information solutions for other browsers I do not know. Any idea…
Alex Nester
  • 411
  • 1
  • 4
  • 3
40
votes
8 answers

Thickness of lines using THREE.LineBasicMaterial

I am using the code below to create hundreds of lines in my three.js scene edgeGeometry[i] = new THREE.Geometry(); edgeGeometry[i].vertices[0] = v(x1,y1,z1); edgeGeometry[i].vertices[1] = v(x2,y2,z2); edgesMat[i] = new THREE.LineBasicMaterial({ …
Dimitris
  • 2,937
  • 4
  • 21
  • 27
38
votes
3 answers

Three.js detect webgl support and fallback to regular canvas

Can anyone who has used three.js tell me if its possible to detect webgl support, and, if not present, fallback to a standard Canvas render?
Bachalo
  • 5,885
  • 22
  • 86
  • 175
37
votes
13 answers

WebGL - is there an alternative to embedding shaders in HTML?

The popular way of using GLSL shaders in WebGL seems to be to embed them in the main html file. The vertex and fragments shaders are embedded in tags like: