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

5896 questions
152
votes
8 answers

Learning WebGL and three.js

I'm new and starting to learn about 3D computer graphics in web browsers. I'm interested in making 3D games in a browser. For anyone who has learned both WebGL and three.js... Is knowledge of WebGL required to use three.js? What are the advantages…
r1nzler
  • 2,423
  • 8
  • 26
  • 30
133
votes
9 answers

Is there any reason for using WebGL instead of 2D Canvas for 2D games/apps?

Is there any reason, except performance, for using WebGL instead of 2D-Canvas for 2D games/apps? In other word what 2D functionalities are offered by WebGL which are not possible to achieve easily with 2D-Canvas?
Ali Shakiba
  • 18,573
  • 17
  • 59
  • 86
84
votes
4 answers

In WebGL what are the differences between an attribute, a uniform, and a varying variable?

Is there an analogy that I can think of when comparing these different types, or how these things work? Also, what does uniforming a matrix mean?
Skorpius
  • 1,943
  • 2
  • 20
  • 29
70
votes
5 answers

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); …
corazza
  • 27,785
  • 32
  • 104
  • 177
67
votes
5 answers

Javascript Typed Arrays and Endianness

I'm using WebGL to render a binary encoded mesh file. The binary file is written out in big-endian format (I can verify this by opening the file in a hex editor, or viewing the network traffic using fiddler). When I try to read the binary response…
Bob
  • 758
  • 1
  • 7
  • 8
60
votes
1 answer

Interior Mapping shader self shadowing

I'm tinkering with Joost van Dongen's Interior mapping shader and I'm trying to implement self-shadowing. Still I couldn't quite figure out what coordinates shadow casting light vectors need to be in. You can see somewhat working demo at here I've…
shaderology
  • 599
  • 3
  • 7
60
votes
1 answer

What does `precision mediump float` mean?

In the learningwebgl tutorial1 I've found an interesting line in the fragment shader. precision mediump float; I've found an article about it here, but I still can't understand what does it mean? And if I remove this line, nothing changes.…
Hard Rain
  • 1,170
  • 3
  • 13
  • 19
59
votes
5 answers

WebGL/GLSL - How does a ShaderToy work?

I've been knocking around Shadertoy - https://www.shadertoy.com/ - recently, in an effort to learn more about OpenGL and GLSL in particular. From what I understand so far, the OpenGL user first has to prepare all the geometry to be used and…
Charlie
  • 3,852
  • 3
  • 36
  • 52
59
votes
5 answers

Improved Area Lighting in WebGL & ThreeJS

I have been working on an area lighting implementation in WebGL similar to this demo: http://threejs.org/examples/webgldeferred_arealights.html The above implementation in three.js was ported from the work of ArKano22 over on…
wagerfield
  • 860
  • 1
  • 8
  • 11
57
votes
4 answers

Is it important to call glDisableVertexAttribArray()?

I'm not entirely clear on the scope of enabling vertex attrib arrays. I've got several different shader programs with differing numbers of vertex attributes. Are glEnableVertexAttribArray calls local to a shader program, or global? Right now I'm…
Grumdrig
  • 14,990
  • 11
  • 53
  • 68
57
votes
2 answers

Rendering meshes with multiple indices

I have some vertex data. Positions, normals, texture coordinates. I probably loaded it from a .obj file or some other format. Maybe I'm drawing a cube. But each piece of vertex data has its own index. Can I render this mesh data using…
Nicol Bolas
  • 378,677
  • 53
  • 635
  • 829
56
votes
4 answers

How do I learn WebGL the fast way?

I am learning WebGL these days, but I found that it's really hard to understand the pipeline. Is there any head first WebGL tutorial online ? Should I learn GLSL ? The code to draw something with WebGL is too complex, is there any way to reduce…
WoooHaaaa
  • 17,162
  • 29
  • 79
  • 130
53
votes
7 answers

Proper way to detect WebGL support?

I am attempting to detect WebGL support across multiple browsers and I've encountered the following scenario. The current version of Firefox appears to report positive support using the following check, even when the visitor's video card is…
Derek Hunziker
  • 12,518
  • 3
  • 53
  • 103
51
votes
5 answers

How to detect collision in three.js?

I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with three.js? If three.js…
eqiproo
  • 1,396
  • 4
  • 14
  • 18
50
votes
4 answers

SceneJS vs Three.JS vs others

Pros and cons anyone? Couldn’t find a complete feature set for three.js library. Though I do know it’s popular and in active development. Maybe someone have done some R&D on WebGL engines and can suggest which benefits each library gives?
oddy
  • 1,879
  • 2
  • 16
  • 25
1
2 3
…
99 100