Sunday, June 9, 2019

opengl - How to use textures in 2D games in WebGL


I have been trying to figure out how to structure the VBOs in WebGL, and think that keeping them all together in one if at all possible sounds like the best approach. Right now I'm thinking of having color buffer, position buffer, and index buffer, just those 3. But my question is what about a texture buffer (maybe it's called a UV buffer, but I'm not sure if that's 3D only).


I would like to have a game with basically flat colors and alpha/opacity and some drop shadows perhaps, maybe some glows, but nothing too complex. Mainly it would be like traditional vector graphics look but in WebGL. As such, I'm wondering how to solve the texture problem. If I need a texture, or I don't at all need one.


Part of figuring this out is knowing what you should really be using textures for. I get that they are useful for mapping images to geometry, but I don't know of any other use case. Wondering if one could explain some use cases of textures as it applies to my situation. The main goal is figuring out if I need a texture buffer at all, or I can/should just stick with color/position/index.


A look I like is like this:


enter image description here



Answer



You probably will want to use textures. Looking at the image you posted, I would probably make the door one texture, have another one for the lights, the wreath another, the pumpkins another, etc. That way the door can be a single quad, instead of the 9 or more it would take to draw that door using only geometry.


In addition to simply mapping images to geometry, textures can be used for a variety of other things. They can be used as a gradient. You'll likely still apply that to geometry, but not necessarily in a straightforward way. (You might make a radial gradient display on some geometry using a 1D gradient texture, for example.) They can also store things like velocities. For example, you can use a texture as a "flow field" for animating particles or other objects. They can even be used to control geometry. You can sample a texture in a vertex shader, for example, and use the result to determine how to transform the vertex.


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...