webglsamples / webglsamples.github.io

WebGL Samples and Examples

WebGL Samples

A place to host and work on some WebGL sample applications. Feel free to contribute if you want.

Looking for the Google IO Samples? Google I/O 2011 WebGL Techniques and Performance Samples

---

Aquarium

By Greggman and Human Engines

You can also run the Aquarium synced across multiple machines. See here for more info.

---

Blob

By Henrik Rydg�rd

---

Caves

by Jasmine Kent Langridge

---

Collectibles

By Human Engines

---

Color Adjust

By Greggman

---

Dynamic Cubemap

By Greggman

---

Electricflower

By Henrik Rydg�rd

---

Field

By Greggman

---

Fishtank

By Greggman

---

Halo

By Kenneth Waters

---

Imagesphere

By Greggman

---

Lots-O-Images

By Greggman

---

Lots-O-Objects

By Greggman

---

Multiple Views

By Greggman

---

Persistence

By Greggman

---

Spacerocks

By Greggman

---

Sprites

By Ken Russell

---

Flexible Toon Shading

By Greggman

---

Book (Cloth Simulation Demo)

By Joshua Trask

---

Video Texture

By Greggman

---

ROYGBIV Electroshock

By Oguz Eroglu

webglsamples.github.io's Issues

More max fish

Thanks for the Aquarium demo! We use it for comparative benchmarking of WebGL implementations. However, we've run into a problem where in some cases 4k fish is not enough. It would be useful to have an 8k fish view, and maybe even 16k.

WebGLSamples code licence

Good afternoon,

I'm currently working on integrating a web browser onto i.MX-based embedded systems via a custom Yocto layer. As part of the layer, I was thinking of integrating a recipe for the WebGL samples in this repo.

The idea is that, when building a Yocto project with this layer, said recipe would download this repo and install a subset of the examples into the Yocto Linux image, so that they are accessible on the device as soon as the image boots. The main reason I want to install the samples in the device instead of accessing them via the already available webpage (https://webglsamples.org/) is to be able to test the browser's WebGL capabitilies without having to be connected to the internet, in cases where internet access isn't possible or just to serve as examples for local web applications that make use of WebGL.

Having said this, I haven't found any information on the licence of this project, so I don't know if the scenario I mentioned is possible. Does this project have any limitations regarding distribution/modification of its code? If so, would a Yocto recipe that downloads this repo and install a subset of samples onto a Yocto image fit within said limitations?

Otherwise, I can link directly to https://webglsamples.org/.

Best regards and thanks in advance,
Gabriel

Sprites => WebGL Shaders render a solid background for transparent PNGs

I've recently come across your awesome sprite solution in WebGL, thanks for the awesome work!

Back story: I have restructured and simplified your WebGL solution to work strictly with simple spritesheet animations so I can add it to a small spritesheet animation library, which mainly plays spritesheet animations in WebGL and falls back to canvas if WebGL is not supported.

Problem: In WebGL, the fragment shader (I believe) is unable to render the alpha channel properly from PNG files, as it renders a solid background.

JsFiddle here

You have two animations there with the same spritesheet, first one is in WebGL, second on is run in Canvas, to tell the difference.

Any clues as to what triggers this and a work around it?

Graphics artifacts can be seen with aquarium

Launch aquarium within browser (such as Chromium and FireFox), and change its view to some outside ones (such as outside 1 and outside original), we may see a lot of graphics artifacts.

The possible root cause is as below:
Some vectors, such as v_tangent, v_binormal and v_normal are interpolated from vertex shader. According to spec, these vectors have default precision highp in vertext shader. But after interpolated into fragment shader, float is designated to have default precision mediump. In some graphics driver, mediump is implemented as 16-bit float, while highp is 32-bit float, which will result in accuracy loss. Even with the function normalize() later on, there is a possibility 16-bit is not accurate enough, then 32-bit float is required.

I manually changed all the designated default precision in fragment shader to highp, and the graphics artifacts seem gone.

I will send out a PR, and any comments are welcome!

Web GL Aquarium modification / job offer

Hello,
we have seen your aquarium webgl project on github. it is verry cool.
We are planning for a client of us (a child clinic) an interactive version of an aquarium and we would be glad if you could support us. For this we need an cost estimate from you.
If you are interested i can send you more project details via E-Mail.
you can reply to s.schmotz@entwúrfswerk.de

Thanks

best from the other side of the world.
Stephan Schmotz

ps. hope you understand my german - english

Aquarium normal maps load in a different way depending on browser (artifacts on MS Edge)

It seems as if color space handling of loaded images differs between MS Edge and other browsers. This causes normal maps to be distorted on MS Edge. The fix for this according to the spec would be setting UNPACK_COLORSPACE_CONVERSION_WEBGL to NONE, but unfortunately MS Edge doesn't implement that at the moment. Another possible fix would be to decode the normal map PNG files in JS.

GLSL renders to squared output

After using square-sized sprites and everything worked great, the moment I have tried a rectangular sprite with the size of 20x200, I have realized that it forces the output to 20x20, it only considers the width of the sprite and forces the height to be the same as the width

jsFiddle here

If you will inspect the canvas, you will see that it has the proper sizes: 20x200

I have used your shaders to render:

Vertex Shader:

        uniform float u_frameOffset;
        uniform vec4 u_screenDims;
        attribute vec2 centerPosition;
        attribute float rotation;
        attribute float perSpriteFrameOffset;
        attribute float spriteSize;
        attribute vec2 cornerOffset;
        attribute vec2 spriteTextureSize;
        attribute float spritesPerRow;
        attribute float numFrames;
        attribute vec4 textureWeights;
        varying vec2 v_texCoord;
        varying vec4 v_textureWeights;

        void main() {
          float frameNumber = mod(u_frameOffset + perSpriteFrameOffset, numFrames);
          float row = floor(frameNumber / spritesPerRow);  // Compute the upper left texture coordinate of the sprite
          vec2 upperLeftTC = vec2(spriteTextureSize.x * (frameNumber - (row * spritesPerRow)),
                                  spriteTextureSize.y * row);
          vec2 tc = upperLeftTC + spriteTextureSize * (cornerOffset + vec2(0.5, 0.5));
          v_texCoord = tc;
          v_textureWeights = textureWeights;
          float s = sin(rotation);
          float c = cos(rotation);
          mat2 rotMat = mat2(c, -s, s, c);
          // vec2 scaledOffset = spriteSize * cornerOffset;
          vec2 scaledOffset = spriteSize * cornerOffset;
          vec2 pos = centerPosition + rotMat * scaledOffset;
          gl_Position = vec4(pos * u_screenDims.xy + u_screenDims.zw, 1.0, 1.0);
        }

Fragment Shader:

        precision mediump float;
        uniform sampler2D u_texture0;
        uniform sampler2D u_texture1;
        uniform sampler2D u_texture2;
        uniform sampler2D u_texture3;
        varying vec2 v_texCoord;
        varying vec4 v_textureWeights;
        void main() {
          vec4 color;
          if (v_textureWeights.x > 0.0)
            color = texture2D(u_texture0, v_texCoord);
          else if (v_textureWeights.y > 0.0)
            color = texture2D(u_texture1, v_texCoord);
          else if (v_textureWeights.z > 0.0)
            color = texture2D(u_texture2, v_texCoord);
          else // v_textureWeights.w > 0.0
            color = texture2D(u_texture3, v_texCoord);
          gl_FragColor = color;
        }

My GLSL knowledge isn't very strong yet and I'd appreciate any help to make it render with the original width & height.
Right now I see that the Vertex Shader accepts only spriteSize (which is only the width of the sprite) as a parameter when calculating position & sizes.

WebVR : Enable VR Mode for Aquarium

Currently, WebVR 1.1 is supported by lots of browsers, like firefox, chrome, etc. However , there isn't any ready benchmark or workload for browser based VR experience.
Since Aquarium is one of the famous benchmark of WebGL, we'd like to align it as the benchmark for browser based VR experience, too.
I've worked out the prototype of VR Mode for Aquarium now. And if you agree, I''m very happy to contribute this !

Could the Aquarium Be Run Dynamically and use Three.js?

Thanks for all the work you have contributed to WebGL.

I have been drawn to this Aquarium example for a long time and I have two questions:

A. Could you use a library such as Three.js to make this?

B. My real question is about the general technique:

Is the example playing synched video or is there an actual 3D scene rendered somewhere (like on a server), that each monitor / computer has a "view" into?

I am wondering if it is possible, using Three.js and Websockets, to make a flat canvas looking into a single 3D scene using different computers. That way I could roll a ball in the 3D scene on one computer, and have it roll onto the screen of another.

This last sentence is what I am all about and would love to know if you think I could accomplish this. Thanks

Terrible performance

Hello, i am experiencing awful performance running those examples on a modern system. From what i can tell the examples do not utilize dedicated graphic card at all, leaving it all on CPU. Even when rendering single fish (aquarium example) in a small resized window, the fps are around 25 max with maxing out the CPU. 🤔

Browser: Chrome 66
OS: Windows 10

See Recording here

Any ideas what could be causing this? Or is the WebGL not up to take such a challange yet?

"Collectibles" Example Page is Incorrect

I would have simply forked+fixed+pushed, however, I was unsure how the maintainers would prefer to change this. The index page/site links the Collectibles example to ~/collectibles/collectibles.html, however, no such file exists (requires an edit to ~/collectibles/index.html or a rename of the file to avoid 404 error).

How do i change Canvas background color of "imagesphere".

I want to change my canvas background color and i tried and searching out to get any solution or way, i get some examples but that not working on "imagesphere".

here is an example what i tried to change the color.
https://developer.mozilla.org/en-US/docs/Learn/WebGL/By_example/Clearing_with_colors

Thanks.