Hot answers tagged

32

I am the creator of that image. The image on the right is rendered using a color look-up texture. In the final GLSL shader, I apply the dither, then convert the RGB values into integers in the range 0<=x<40, combine them into a single index, then look up the resulting color value in this image: The lowest row is the raw palette. The image to the ...


10

Yes, absolutely, it is expected that somehow the light appears to be at a different place if you change the main lobe’s properties without considering what it means physically. The lobes describe, for a given incident light direction, in which directions light is going to be re-emitted. Here are a few examples of possible lobes: a perfect specular ...


9

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 you move them into the center of what you're drawing. Instead of drawing the tiles directly, you draw the “dual” of the tile. This technique is called “corner ...


9

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 buffer tends to constitute one attribute of a vertex array (object). A VAO can contain many vertex attributes (e.g. position, color, UV). Each might be held in its ...


7

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 LookAt? The LookAt function takes three parameters: eye, which is where your camera is. in the identity matrix, your camera is at 0, 0, 0 target, which is where your camera is pointed at. you can think of the camera's direction ...


6

You could use a color grading lookup table in a postprocessing step as described here and probably here. After you've implemented this, all you'll have to do is make a screenshot, overlay the lookup texture ontop of it, then edit it in arbitrary graphics software until you like it - and then retrieve the modified lookup texture again. This may or may not ...


6

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 differently, with "array" or "buffer" in the name (well, there's framebuffer objects too, but I'll ignore that). Data that lives in your application, formally ...


5

The literal answer is actually yes because the Emscripten project, for compiling C++ applications to Javascript for running in browsers, provides an implementation: "libc and stdlibc++ support is very good. SDL support is sufficient to run quite a lot of code. OpenGL support is in very good shape for OpenGL ES 2.0-type code, and even some other types," in ...


5

Here are pack and unpack functions that will work on WebGL and OpenGL ES 2.0, this is only for values in the 0...1 range so you should take care your depth calculation is in the correct space. Encoding Floats to RGBA


5

As luck would have it Iñigo Quilez wrote an article about this which popped up in my Facebook feed this morning. Hardware texture intepolation is fast and convenient. It is bilinear (plus mipmapping), and despite it can be somehow improved, it works great for most cases. Most cases being texture mapping of surfaces with color/albedo, normal and ...


5

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 recommended for real-time games, but that's not available to browser-based Javascript). When the reaction to each input is not just delayed but delayed irregularly, your ...


5

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 functionality to an already existing API rather than changing the API. The first version of OpenGL had none of these object types. Drawing was achieved by issuing ...


4

You are seeing interpolation artifacts. The surface normals between front and back faces are interpolated between front and back faces, leaving some of the fragments on visible faces having normals facing away from the camera. Consider this crude drawing: In this image A and B are your vertex normals while C is an interpolated surface normal between them. ...


4

The discard statement comes in handy. You didn't say too much about your decision path, so I'll offer an example using a simple texture lookup: void main() { gl_FragColor = texture2D(u_texture, v_uv) * u_color; if (gl_FragColor.a <= 0.0) discard; } (That's from some sample code I wrote before I learned about alpha blending.)


4

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?)


4

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 save a file. They don't explain when they do a flush, but clearly a scene change is one event that triggers a flush. To immediately flush the changes, we have ...


3

Split the loading into sections (the white chunk is the one you are standing on). The above image shows the x and y axes, with the z axis left to your imagination. Begin by sending the white chunk (playerPosX, playerPosY, playerPosZ). After that start moving outward along each axis, in both directions (+x, -x, +y, -y, +z, -z). Going outward, along each ...


3

I would do something like this: var vd = 6; //view distance var v = vd*2+1; //length of cube of chunks we want to send var s = new Array(v*v*v); //used to store which chunks we have sent for(var i=0; i<s.length; ++i) { s[i] = false; } for(var i=0; i<=vd; i++){ //start at center and move out layer by layer for(var x=-i; x<...


3

There are three ways to do this that I know of. The first is to use three source textures. One is the standard diffuse texture, one is the video texture, and the third is a mask texture. You sample all three but then use the mask to decide which of the first two textures you actually use to generate your output color. You generally need two sets of ...


3

To build upon Sean's answer, you don't need to make a separate FBO in order to render the effect you're looking for. Unfortunately, you cannot do it in a single pass because you're asking for two different blending operations for the pixels depending on whether or not your orange triangle is overlapping the light blue one. Fortunately, this is an excellent ...


3

Turning Sam's comment into an answer, you need to do all your rending in two passes. For your first pass, draw only the foreground objects into an off-screen buffer/FBO. If you're using multiplicative blending you might get your desired effect with a white background; with additive blending, you may want a black background. Remember to clear to and update ...


3

Idle - is "doing nothing" (that is not bad though). As you run your game with consistent frame rate, in ideal world requestAnimationFrame will do 60 frames a second. Your game logic + rendering might take less than ~16ms (60 frames a second), then the left over time will be considered "idle". It is not bad, but good: means you have some reserve in terms of ...


3

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 data transfers. Because you're filling the screen at most once and scene complexity is low, we can totally ignore (b). (c) is a bit more complex and I'll get ...


3

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 since each face of the cube needs a different normal. Similarly imagine you had a texture atlas with 6 different images, one for each face of the cube. You'd need ...


3

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 be a buffer. Just because their is no limit of what you can do, and what you what to be done as a project. A Buffer for Keyboard input or for previous mouse ...


2

You stated that it will be a MMO game - don't do this kind of stuff client-side. You will have problems with cheaters, because it's fairly easy to modify your code so they can fly/no-clip etc. If your terrain is heightmap-based just prepare your world so you have all of the objects inserted (houses, trees etc.) and generate some kind of mask which will ...


2

The problem was solved by just changing the e vector to (0,0,-1). I also needed to clamp the returned color: return clamp((Pd + specular) * NdotL, 0.0, 1.0); Result:


2

I think you should start your indices from 0 so it should become: rectVertices.indices = new Int16Array([ 0,1,2,0,2,3 ]); [Edit] It seems you are using triangle strip rather than triangles. The indices you are using are for triangles, which I think is the usual thing to do unless you have some performance issues. Don't use triangle strips as they are ...


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