Hot answers tagged

40 votes
Accepted

How to do color post processing in WebGL, when you can not read the color of the current pixel?

This is not a WebGL 2 restriction. This is fundamentally how GPUs and their 3D rendering APIs all work. Because they're designed to render many triangles and fragments in parallel, they structurally ...
DMGregory's user avatar
  • 134k
12 votes

Performance degrading when resolution increases for a 4k screen

One way to limit the resolution of your game is to have your camera render to a RenderTexture. You can create a RenderTexture in script to match the current aspect ratio of your window/screen, or even ...
DMGregory's user avatar
  • 134k
11 votes
Accepted

Noisy edges, smoothing out edges between faces via fragment shader

Other answers here suggest using a texture. Here's a technique that doesn't use textures. You want the boundaries between hexagons to be interesting. It's easier to make interesting boundaries when ...
amitp's user avatar
  • 6,036
10 votes

Difference between "buffer" and "array" in OpenGL?

A Vertex Array Object (VAO) is an object which contains one or more Vertex Buffer Objects and is designed to store the information for a complete rendered object. (pulled from khronos) Each ...
Engineer's user avatar
  • 29.4k
9 votes
Accepted

lookAt with orthographic camera (gl-matrix)

When I use the identity view matrix, I can see my model, but when I use LookAt, it is not visible. How can I see my model using ...
Jimmy's user avatar
  • 9,029
7 votes
Accepted

Difference between "buffer" and "array" in OpenGL?

The naming of Vertex Array Object is somewhat unfortunate. There's three different things that appear (used to appear) in/with/around your application, and which are (have been, historically) named ...
Damon's user avatar
  • 1,384
7 votes
Accepted

What causes some web game engines work in "slow mo" mode instead of reducing FPS but continuing to show the true time/tick state of things?

One simple way to get this slow-mo effect is if you have a variable rate update and no delta time correction to make it "framerate independent". For example if each update you say: ...
DMGregory's user avatar
  • 134k
6 votes
Accepted

File saved to IndexedDB lost unless we change scenes

D'oh! This is covered in the WebGL troubleshooting documentation (which did not come up in my web search results for 'Unity IndexedDB'). Unity does not flush changes to IndexedDB immediately when you ...
Kevin's user avatar
  • 5,465
6 votes

Performance degrading when resolution increases for a 4k screen

The text & button size issue can be addressed by changing the Canvas Scaler component on the canvas to a mode other than Constant Pixel Size: In Scale With Screen Size mode, you set a reference ...
Acme Nerd Games's user avatar
5 votes
Accepted

2D Websocket WebGL game

1: Should the client wait for confirmation before moving the player? Websockets use the TCP protocol, which can have very irregular latencies from time to time (which is usually why UDP is ...
Philipp's user avatar
  • 119k
5 votes

Performance degrading when resolution increases for a 4k screen

I know that you tagged the question as unity-webgl, but some people might find this question while developing a desktop game and might find this answer useful: For a desktop game, you can use the ...
Philipp's user avatar
  • 119k
4 votes
Accepted

Efficient Dynamic Memory Management

deleteBuffer will delete the buffer in WebGL (and OpenGL) but I'm just curious, is there any reason not to just reuse the same buffer just put new data in it? (eg. have a pool of buffers?)
gman's user avatar
  • 840
4 votes

Difference between "buffer" and "array" in OpenGL?

This terminology is rooted in the history of OpenGL. What's important to remember is that, for most of the GL versions which are relevant here, OpenGL was evolved incrementally and by adding new ...
Maximus Minimus's user avatar
3 votes

WebGL color quantization

Unless you have a specific 256 colors palette in mind, you could just use the "8-bit truecolor" as described at 8-bit color Wikipedia page. To do that, you need to map R and G channels onto 8 values (...
michcio's user avatar
  • 46
3 votes

Adding multiple materials to a single mesh in three.js

You can have multiple materials in one mesh in Three.js. Supply an array of materials to the Mesh constructor instead of a single material. You then also have to specify vertex groups in the geometry. ...
Elias Hasle's user avatar
3 votes

Which UVs to use when I have more UVs coordinates than vertices Obj

You are using the wrong UV coordinates and yes, it's normal to have more UVs than positions. Consider a cube. A cube has 8 positions but for correct normals it needs either 3 normals per position ...
gman's user avatar
  • 840
3 votes
Accepted

How to generate or smooth really large procedural terrain?

At the radius of the Earth, with the center at the origin, 32-bit floating point offers us about half-metre precision laterally, so that's not enough to position centimetre-level detail. So, our ...
DMGregory's user avatar
  • 134k
3 votes
Accepted

The types of buffers typically used in robust WebGL/OpenGL apps

If you set up an project with your idea, - what you want to archive as a final result. You also need to question yourself, how to structure different data. With the question you asked, everything can ...
nabr's user avatar
  • 56
3 votes
Accepted

How to use 2D textures in OpenGL / WebGL for physics

I can't possibly cover everything, nor do I know every technique... in fact, I am unfamiliar with OpenGL 4.0 and newer. yet, I think I know enough to expand the way you think about this. However, have ...
Theraot's user avatar
  • 26.2k
3 votes

How to position/transform vertices for 2D UI in shaders?

For 2D UI you typically achieve this by using an orthographic projection matrix, and setting view and model to identity, which collapses the typical transform: ...
Maximus Minimus's user avatar
3 votes

How to create global function for all .JSLIB files?

Finally I found the answer! In .jspre file I had to write: ...
EzioMercer's user avatar
2 votes

How can I center a WebGL window in Unity?

You can create a custom WebGLTemplate just change the HTML as documented here. You can choose either one of the defaults or create your own template. According to those docs you create folder in <...
gman's user avatar
  • 840
2 votes

How to display a lot of small objects using WebGL?

There are several ways to approach this problem. When it comes to WebGL performance the key is to: (a) reduce number of drawcalls, (b) reduce gpu overdraw (fill-rate) and vertices. (c) reduce buffer ...
Wojtek Marczenko's user avatar
2 votes
Accepted

Unity WebGL not loading on chrome

I believe the issue is occuring because you are running it locally rather than on a webserver or an emulated webserver. Basically: You need it to say http:// or https:// or whatever rather than file:/...
HappyGuyDK's user avatar
2 votes

Unity 3D error when compiling to WebGL: Destination directory not found

First of all make sure you can make a WebGL build with your currently installed Unity version. Create a new project with a new scene, add it to the build settings and make a WebGL build. If this does ...
Mattias's user avatar
  • 750
2 votes

OpenGL: Does it make sense to use an Index Buffer With GL_TRIANGLE_FAN?

It could possibly make sense if you try to draw something like a huge polygon, or some sort of sphere, where the edges connect. This is really inefficient, since the index buffer is most probably ...
Dynamitos's user avatar
  • 144
2 votes
Accepted

2d game with 3d js. game engine

2d rendering is easily possible with 3d rendering engines, even when there is no explicit support for it. How it would work: Just put your two-dimensional geometry parallel to the xy-plane (or any ...
LukeG's user avatar
  • 1,537
2 votes

Adding multiple materials to a single mesh in three.js

First there's a problem with your code, you should use callbacks when using a TextureLoader, and with multiple textures you should use Promises, with your code you are not waiting for textures to load ...
Marcs's user avatar
  • 121
2 votes
Accepted

Object outlining, stencil is not working WebGL

Solved! I had pass WebGLContextAttributes object when creating the context, explicitly requesting stencil buffer: canvas.getContext('webgl', {stencil: true});
ibe's user avatar
  • 41
2 votes

How to rotate something around a fixed point WebGL

One way is using a matrIx stack https://webglfundamentals.org/webgl/lessons/webgl-2d-matrix-stack.html Basically you need to translate the object so it's center point is at the origin, rotate, then ...
gman's user avatar
  • 840

Only top scored, non community-wiki answers of a minimum length are eligible