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
33
votes
8 answers

How can I implement a FPS view with WebGL inside a browser?

I'm using Copperlicht, and I want to create a usable FPS. The demo controls shows why the browser environment makes this a pain. In order to implement FPS camera control, you need to track the relative mouse position - in other words, its motion,…
JRowe
  • 363
  • 4
  • 7
33
votes
7 answers

Is there a limit of vertices in WebGL?

Three.js says that it can't load more than 65k vertices. In my pure webgl application, it doesn't say anything, but it doesn't show the entire object when I try big objects. I could split my objects into smaller buffers, but it would make me sad. Is…
zVictor
  • 3,610
  • 3
  • 41
  • 56
33
votes
1 answer

Multiple transparent textures on the same mesh face in Three.js

Is it possible to lay multiple textures on top of each other on the same face in Three.js so that the alpha blending is done GPU accelerated in webGL? The textures are (or should be) applied to the same face so that the bottom texture (texture 1) is…
Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
33
votes
4 answers

How can I launch Chrome with flags from command line more concisely?

I am developing a WebGL driven application and I want to launch chrome like this from the command line: open -a Google\ Chrome --args --disable-web-security I just don't want to have to type that in every single time. Is there a way to easily turn…
smuggledPancakes
  • 9,881
  • 20
  • 74
  • 113
32
votes
4 answers

canvas vs. webGL vs. CSS 3d -> which to choose?

For basic 3d web application i.e. a few cubes, rotation and translation in 3d space - which is better to choose? CSS 3d seems the easiest, but is not supported on IE9 or on the roadmap for IE10, and offers less control than the other options. Canvas…
Elad Katz
  • 7,483
  • 5
  • 35
  • 66
32
votes
2 answers

three.js outer glow for sphere object?

I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture. I came across this example…
Kyeno
  • 592
  • 2
  • 7
  • 16
30
votes
5 answers

Is WebGL or Canvas the only way to get SVG Keyframe Animations Hardware Accelerated?

What I'm looking is a flash alternative for mobile phones using html5. I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual…
Shai UI
  • 50,568
  • 73
  • 204
  • 309
30
votes
1 answer

Three.js - Change Material on Runtime

I have some .js files exported from Blender and load them with THREE.JSONLoader(); my callback: var callback = function( geometry ) { createMesh(geometry); my loading: loader.load( "Models/sculp.js", callback ); my create method: function…
Phipps
  • 355
  • 1
  • 3
  • 10
30
votes
4 answers

Displaying a 3D model in JavaScript/HTML5

I am looking at rendering a 3D model in a browser. What tools should I use/what places should I look at? I don't know what data format the model will be, I can likely request that data to formatted in any way I want. I am looking at three.js but it…
Goro
  • 9,919
  • 22
  • 74
  • 108
29
votes
3 answers

Using WebGL Shader Language (GLSL) for arbitrary vector mathematics in JavaScript

The WebGL Shader Language (GLSL) is a very powerful tool for multidimensional vector mathematics. Is there any possibility to use that power from JavaScript (running in web browser) for private non-3D calculations? Getting data in is possible, but…
Tero Niemi
  • 1,057
  • 11
  • 13
29
votes
3 answers

Better Quality Text in WebGL

I am searching a method to draw better quality (arbitrary) text inside WebGL. Currently I am using bitmap font rendering on a 2D canvas and blitting them into the WebGL context. This method is described here http://delphic.me.uk/webgltext.html This…
Markus Moenig
  • 1,614
  • 1
  • 16
  • 17
29
votes
2 answers

PhantomJS compile with WebGL

I am trying to compile PhantomJS to add WebGL. Apparently it is possible because of: post on groups.google.com post on trac.webkit.org However, I have no idea how to do this. I have looked in all the configuration for compiling and I tried and…
charly
  • 956
  • 13
  • 23
29
votes
2 answers

three.js how to make double sided object

Blender export obj don't export double sided objects. How can I render objects in double sided mode. I tried this without succes: var loader = new THREE.OBJMTLLoader(); loader.load('models/test.obj'); loader.addEventListener( 'load',…
user2244365
  • 577
  • 2
  • 5
  • 10
29
votes
2 answers

recommended way to make a 2d HUD in webgl

For a game in webgl where fps performance is important, what is the most efficient way to make a 2D HUD? I can think of 3 options, but its unclear to me what is the performance cost of each and which would be recommended as most efficient. So what…
JayDee
  • 949
  • 1
  • 13
  • 20
28
votes
8 answers

Is there a WEBGL Manual?

Is there some kind of WebGL manual that lists all the functions etc. ? I tried Google but found nothing.
Martin
  • 710
  • 2
  • 11
  • 18
1 2
3
…
99 100