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 ...


29

There are generally two methods for dealing with this. Nowadays, they are called forward rendering and deferred rendering. There is one variation on these two that I will discuss below. Forward rendering Render each object once for every light that affects it. This includes the ambient light. You use an additive blend mode (glBlendFunc(GL_ONE, GL_ONE)), so ...


11

Yes, you can discard in the fragment shader to avoid writing the pixel. Here's a random example I dug up from Google. Note that this may not actually stop the fragment shader from processing (as the GPU tends to process fragments in blocks; only discarding from all fragments in a block will abandon the processing). But the fragment won't be written to the ...


10

Framerate varies by browser. A few still do not support accelerated canvas rendering, others don't support WebGL at all. Best bet is to profile actual code on actual target hardware/browsers to determine which performs best for your specific needs and user demographics. WebGL is only supported on IE in version 11+ but canvas has been supported for several ...


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 ...


7

You need to implement either something like bones or morphs. As stephelton suggests, a WebGL framework would make this easier. Since you're using Blender, how about using three.js ? It already has a Blender exporter and there is also a python script to convert objs to the json format the framework uses, in case you need to use other applications. Among ...


7

As far as I can tell from my working knowledge of OpenGL, the act of sorting all of your rectangles into one big draw call means the CPU is wasting the first half of each update loop carefully and neatly organizing everything while the GPU twiddles its thumbs waiting for the draw call to come in. Conversely, when when you tell each object to draw ...


7

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 ...


6

Khronos, the guys who are the "keepers" of OpenGL and WebGL have a preeeeeety loooooong list of WebGL stuff found on the web: http://www.khronos.org/webgl/wiki/User_Contributions And, the list is actively updated, although, there might be some outdated stuff hiding in-between. And, I bet, that a little in depth browsing through http://www.khronos.org/webgl/...


6

1- Unfortunately no, the WebGL standard references the GLSL ES 1.0 standard, which only has square matrices (section 4.1.6). 2- A mat3x4 holds 12 floats, so you may need to pass the information as a mat4 to the shader anyway (mat3 only holds 9). In that case you will need to use 4×4 matrices in the client code, too, and fill the last column with the values [...


6

To answer my own question, here's what I got working: The scaling in the GLSL vertex shader is: gl_PointSize = (heightOfNearPlane * pointSize) / gl_Position.w; Where you compute your heightOfNearPlane using the viewport height and the field-of-view angle you constructed the perspective matrix with: float fovy = 60; // degrees int viewport[4]; ...


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 ...


5

Here's the GLSL function slightly fixed from the Google I/O talk #define FILTER_LUT true vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) { float sliceSize = 1.0 / size; // space of 1 slice float slicePixelSize = sliceSize / size; // space of 1 pixel float width = size - 1.0; float sliceInnerSize = ...


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

UVIndex represents a series of indices that index into the UV array. However, OpenGL (and D3D) do not allow you to use multiple indices. Each attribute cannot have its own index; the index represents all attributes. Therefore, you need to massage your data a bit, so that everything comes from a single index list. To put it another way, you cannot take an ...


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

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 ...


5

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 ...


4

No. The GPU has dedicated hardware for the purpose, so it will be far faster, especially compared to Javascript. (I wouldn't do anything that iterates over individual verts / faces in JS!)


4

You need to use deferred rendering or pre-pass lighting. Some of the older fixed-function pipelines (read: no shaders) supported up to 16 or 24 lights - but that's it. Deferred rendering eliminates the light limit; but at the cost of a much more complicated rendering system. Apparently WebGL supports MRT which is absolutely required for any form of deferred ...


4

What you describe is not sprite batching. Sprite batching is sorting so that the GPU doesn't have to change textures too often (expensive because textures have to be loaded from GPU memory). Colour data is usually stored in the vertex attributes. If two objects have different colours this doesn't matter, since we always have to read the colour data and '...


4

When used with OpenGL SDL is responsible for opening a window, creating an opengl context, handling events, etc. The drawing part is OpenGL responsibility. In a browser, you already have a window, ways to handle events and a way to get a context, SDL would not be very helpful in this scenario. Although, mimicking the SDL API in javascript might be helpful ...


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

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 ...


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

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 ...


3

I think you should use a graphical framework instead of plain WebGL, except if you really need a control on every part of your game engine. For example, with Three.js your questions could be easily answered : You load an image using Three.ImageUtils.loadTexture (asynchroneous) You display it by creating a mesh based on a Three.PlaneGeometry and a Three....


3

The game you linked is written in C/C++ (Native Client), it's embedding the executable. As for JavaScript obfuscation, look into tools like the closure compiler, etc.


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