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

No 'webgl' context in Chrome 52

This is a pretty baffling issue to me: one of my projects (using three.js) suddenly stopped working. Turns out, calling document.createElement('canvas').getContext('webgl') now inexplicably returns null. It works fine in other browsers, but Chrome…
Max Roncace
  • 1,127
  • 1
  • 14
  • 39
2
votes
0 answers

Conditions for WebGL in android WebView

Background: I have two apps written for Android using Xamarin. Both try to use a WebView to display webGL content. Both compile against Android 6, Minimum 4.0.3, target version 6.0. Both are run on a Samsung S7. One app (the 'newer') can show…
bpylearner
  • 438
  • 3
  • 12
2
votes
2 answers

What kind of data does texImage2D accept?

I want to offload some matrix computations to a fragment shader, using WebGL. I'm trying to send my matrix as an RGB 2D texture, using texImage2D, but I don't know how the data must be formated. I tried this (for a square 2x2 matrix): var…
Antoine
  • 1,601
  • 14
  • 27
2
votes
1 answer

Rendering artifacts when using dot(n,l) as texture lookup coordinate Webgl

I'm implementing the xToon shader(pdf) in glsl to use as a shader with Three.js. I'm getting some rendering artifacts, and I think the problem is due to webgl strangeness that I am not knowledgable about, perhaps relating to a Nan or Inf or…
Nick Gimbal
  • 70
  • 7
2
votes
1 answer

why i got this error "WebGL: INVALID_OPERATION: drawArrays: front and back stencils settings do not match"

my code is below. error line is the last line. gl.enable(gl.STENCIL_TEST); gl.stencilFuncSeparate(gl.FRONT, gl.ALWAYS, 1, 0xFF); gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.REPLACE); gl.stencilMaskSeparate(gl.FRONT, 0xFF); …
PeakFish
  • 25
  • 4
2
votes
1 answer

Why is this WebGL shader type invalid?

Disclaimer: I just started using WebGL today. I am attempting to draw some basic things on an HTML5 canvas using WebGL context in lieu of the "standard" 2d context. I am using the developer.Mozilla.org WebGL documentation as reference, and have…
pward
  • 829
  • 1
  • 7
  • 17
2
votes
0 answers

How to use WebGL with CefSharp

How do I have to use CefSharp to render a 3d WebGL scene? If I use the following code in my WPF application to initialize Cef. It works but it is very very slow. var settings = new CefSettings(); //settings.CefCommandLineArgs.Add("disable-gpu",…
koalabruder
  • 2,582
  • 7
  • 29
  • 36
2
votes
1 answer

Three.js toDataUrl blank

When I try to save an image from a three.js WebGl render it comes out totally blank, but it does return a ton of…
brandon cox
  • 51
  • 9
2
votes
3 answers

Making a NaN on purpose in WebGL

I have a GLSL shader that's supposed to output NaNs when a condition is met. I'm having trouble actually making that happen. Basically I want to do this: float result = condition ? NaN : whatever; But GLSL doesn't seem to have a constant for NaN,…
Craig Gidney
  • 16,378
  • 4
  • 62
  • 124
2
votes
1 answer

Fragment shader - determine min/max values for the entire (monochrome) image and use them for further pixel manipulations

I'd like to normalize monochrome image pixels in that way the minimum value is black, the maximum is white and values in between are spread proportionally. Currently I do it in canvas in two steps, but I believe it should be faster in WebGL. I can…
Jan Tosovsky
  • 382
  • 3
  • 13
2
votes
1 answer

How to detect dedicated or integrated graphics card used for WebGL?

I need to detect whether the dedicated or integrated graphics card is used within an application that uses WebGL. What is the easiest way to do this ?
Bill Lumbert
  • 3,421
  • 2
  • 15
  • 24
2
votes
1 answer

Smoothly interpolate two meshes in WebGL / three.js

Is it possible in Three.js to interpolate two meshes like this? At the area where they intersect should have a nice smooth transition. I think I've seen it somewhere, but I can't find it. EDIT The metaball/cube concept is much closer to what I'd…
Tibor Szasz
  • 2,430
  • 2
  • 16
  • 22
2
votes
1 answer

How to map different textures to different faces of a cube in WebGL?

I have the following cube coordinates: var vertices = [ // Front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // Back face -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, …
dtem052996
  • 829
  • 2
  • 8
  • 14
2
votes
0 answers

Tune WebGL application rendering latency on Linux

I wonder how to reduce the rendering latency of my WebGL application on Linux. I am using chromium-browser for rendering, as it seems to achieve fastest framerates for simple WebGL graphics. But I guess a browser is somewhat more complex than a…
dronus
  • 9,208
  • 8
  • 45
  • 72
2
votes
2 answers

WebGL - apply several programs successively

How can I get WebGl to apply several programs successively, like draw something convert it to black and white In this example, it's easy to put all that in a single shader, but I'd like to be able to keep things separated for reusability of larger…
Guig
  • 8,612
  • 5
  • 47
  • 99
1 2 3
…
99
100