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
31
votes
2 answers

How WebGL works?

I'm looking for deep understanding of how WebGL works. I'm wanting to gain knowledge at a level that most people care less about, because the knowledge isn't necessary useful to the average WebGL programmer. For instance, what role does each…
Oscar
  • 1,005
  • 2
  • 13
  • 24
31
votes
1 answer

Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

I have a three.js scene like the following: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new…
confile
  • 29,115
  • 44
  • 187
  • 340
31
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
  • 10,897
  • 8
  • 64
  • 105
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
  • 45,518
  • 63
  • 187
  • 278
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
  • 987
  • 10
  • 12
29
votes
5 answers

Rendering WebGL image in headless chrome without a GPU

I'm trying to export an image rendered with WebGL on a linux server without a GPU. To do this I'm using headless Chrome however the exported image is black (example exported image, taking a screenshot of page shows its just canvas that is black). I…
James Hollingworth
  • 13,192
  • 12
  • 37
  • 56
29
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
  • 345
  • 1
  • 3
  • 10
29
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
  • 8,787
  • 20
  • 65
  • 106
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
  • 700
  • 2
  • 11
  • 18
28
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
  • 899
  • 1
  • 11
  • 19
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
  • 19,377
  • 21
  • 107
  • 177
27
votes
1 answer

How do Shadertoy's audio shaders work?

To start off, I couldn't really find any appropriate community to post this question in so I picked this one. I was wondering how the audio shaders of the popular webGL based shader tool worked, because when, even though I had obviously heard of…
tbvanderwoude
  • 507
  • 6
  • 16
27
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
  • 527
  • 2
  • 7
  • 15
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;