# Tag Info

11

Could someone ELI5 to me, what is an index buffer and how is it related to vertex buffers Your vertex buffer contains the X and Y coordinates of 5 vertices. They are: index | X | Y 0 | 0.0 | 0.0 1 | 1.0 | 0.0 2 | 0.0 | 0.6 3 | 1.0 | 0.6 4 | 0.5 | 1.0 Your index buffer contains information about which lines to draw between these ...

9

WebGL doesn't even currently support geometry shaders, so to directly answer the question: 100% of all users.

8

What you see in the image called a UV map. That is, it is simply texture coordinates to be looked up encoded in a image. Same thing happens in all texture lookup in 3D there is a underlying sampler that picks where to pick texture color from. Image 1: Image showing UV map of two overlapped triangles and sampled texture with same UV coords Here are the ...

7

Short answer: Yes, It can be done. But no one does so. Long answer: Scene graphs can be stored and processed on a GPU using OpenCL/WebCL. But it is not practical to do so. Updating scene graphs (a tree not in flat memory) on a GPU is slow, and processing it on a GPU is also slow (again, the tree is not in flat memory), while computing transformation ...

7

Without seeing the error message I can't be sure but I think it's failing on the 1 being int instead of a float. float inv_coord = v_coord - 1.0; There is a simpler method, you can do 1.0 - v_coord and do away with the abs.

7

SOLUTION After a couple of days I realized that I was computing my projection matrix using a FOV angle in degrees and It should be in radians. I made the conversion and now everything works great. The interpolation among faces of my depth framebuffer's cubemap is now perfect. For this reason, It is important to handle every single trigonometric function's ...

6

My experience working with shader compiler stacks a few years back is that they are extremely aggressive, and I doubt you will see any perf difference, but I would suggest testing as much as you can. I would generally recommend providing the compiler (and human readers) with more information where the language allows it, marking parameters according to ...

6

I made a visualization a little like yours years ago, and used a similar technique, because it's the natural approach to the problem. After I spent a few years writing drivers for modern GPUs, I wouldn't use this approach at all, because it creates a dependency from one frame to the next, which introduces pipeline stalls and/or false sharing. Today, I'd ...

6

In the olden days of text-mode terminals, the "frame buffer" was a buffer of text, not an image. Scrolling worked in the way you described. The buffer was larger than would fit on the screen, and to "scroll" it would change an offset in the display controller, so it would display different lines. This only makes sense when the whole framebuffer is scrolled ...

5

Enabling the extension is as simple as: var uints_for_indices = gl.getExtension("OES_element_index_uint"); if uints_for_indices is null then the extension is not available and you'll have to split your data anyway. If it's not null then you can now pass gl.UNSIGNED_INT for the index type into gl.drawElements.

5

If you have a vertex buffer like this: var vertices = [ 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.6, 0.0, 1.0, 0.6, 0.0, 0.5, 1.0, 0.0 ] And simply draw it as it is: // Create an empty buffer object var vertex_buffer = gl.createBuffer(); // Bind appropriate array buffer to it gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to ...

5

PhysX is a C++ API and can thus not directly be integrated with the JavaScript-based WebGL. Depending on your needs, you have the following options: Use a JavaScript-based physics engine, mostly suitable for 2D use cases. Use a Game Engine that can export for the web (e.g. Unity 3D) and build your application in there, using full 3D physics capability. ...

5

While creating a set of glTF models for a tutorial, I also intended to create THE minimal glTF file. Update: The following referred to glTF 1.0/1.1. See below for an update of this example to glTF 2.0. As already mentioned in the answer by 5chdn, one issue may be the material. According to the Appendix A: Default Material of the specification, an asset ...

4

You can put the data into a data uri to store the data inline in base64 format. "buffers": { "a-buffer-id": { "byteLength": 1024, "type": "arraybuffer", "uri"="data:application/octet-stream;base64,..." } }, It's still a bit bloated compared to storing the data in a binary file though.

4

Your shaders are fine, the problem is topological, that is the way the vertices are connected to create triangles. For cases 1 & 2: You cannot really draw a grid of points in this mode (GL_TRIANGLE_FAN) as vertex 0 (the top left one) will be used in every triangle, as well as other issues. You should be using Triangle/Line strips, although these aren't ...

4

Although you may be able to detect what hardware is available as a first approximation of a computer's capability, depending on this might not be useful since the same hardware may behave differently depending on the machine it is hosted in, and any other tasks that may be competing for it. Use the frame rate It looks like you are already measuring the ...

4

Okay, I figured it out. It has to do with the texture not loading before the first display function is called. The texture displays after a mouse or keyboard event. To remedy this, I added a timer to refresh the scene. This only works on Firefox however. I'm not sure why the image does not display on Chrome.

4

Yes. If you're compounding operations to make a matrix, then the inverse matrix will be the compound of the inverse operations, in the reverse order. So if $C = AB$ then $C^{-1} = B^{-1}A^{-1}$ Think of it geometrically. Taking a 2D example, if you have an object at the origin, and you want to move it +2 units in X then rotate around the origin by +45 ...

4

If you sample the two parameters $\eta$ and $\omega$ with steps $d\eta$ and $d\omega$, then you'll get a grid of points $v_{ij} = f(i\;d\eta,j\;d\omega)$. Any four adjacent points will define a quadrilateral. To get triangles, you just have to split each quad in two by a diagonal. So in the example, you'd split the quadrilateral $\{v_{00},v_{01},v_{11},v_{... 3 The simplest solution is to do three passes: Render opaque meshes to a buffer (front-to-back, depth read/write on) Render translucent meshes to another buffer (front-to-back, depth read/write on) This makes sure that only the closest translucent mesh is rendered. Alpha blend translucent mesh on top of opaque buffer using opaque depth buffer. (depth read on) ... 3 Embedding human readable data is not supported. However you can put the data into a data uri to store the data inline in base64 format. "buffers": { "a-buffer-id": { "byteLength": 1024, "type": "arraybuffer", "uri"="data:application/octet-stream;base64,..." } }, 3 Assuming you are not going to filter the buffer using HW texture filtering: since you only need 4 values for the material index, pack it in the sign bits of uv x and y. 3 After spending a hard time to understand the way how the binary buffers work in the gltf files I finally managed to generate a truely minimal gltf file. It's a single yellow triangle (demo). I tried to remove everything which is not needed from the gltf. This is what is required it seems (github): { "accessors": { "accessor0": { "... 3 Also check out the glTF models used in Cesium: https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Apps/SampleData/models https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Specs/Data/Models Patrick 3 Yeah, that makes sense. Most flat panel monitors on the market have a 60Hz refresh rate! So you are not going to be able to flicker faster than 60Hz due to technical limitation. Were you to do this with a electron sweeping oscilloscope, or a LED lamp connected to a PWM source fast enough then no problem (you can find this in arduino samples). It would work. ... 3 Unsigned byte textures in a graphics API are usually "normalized"—the byte values are interpreted as ranging from 0.0 to 1.0, with a byte of 255 mapping to 1.0. So no, they aren't truly floating-point values, but the hardware will automatically convert them to/from float when you read/write the texture. If you try to write a value outside the [0, 1] range, ... 3 The problem is with how wavefront files and OpenGL work with indices. OpenGL OpenGL allows you to have different buffers, allowing your vertex to have multiple attributes. However, for every vertex in a face, it has only one index. Let us say that we have a quad. It consists out of a position buffer and a uv buffer. The positions would look like this 1, ... 3 The general equation for a upright cone with the tip at$Z=0$is $$0 = X^2 + Y^2 - Z^2$$ (Ignoring the points for which$Z>0$). If you consider slices for some constant$Z$you get circles centered on the line$X=Y=0$. To make an oblique cone with circles along the line$X=aZ,Y=bZ$we can just shift the coordinates accordingly and get the equation$\$ ...

3

This looks like a case of 16bit truncation in your indice buffer. For a 257x257 grid you will be addressing more than 65536 vertices so you will need to use a 32bit indice buffer. gl.drawElements(gl.TRIANGLE_STRIP, buffers.numIndices, gl.UNSIGNED_SHORT, 0); change to : gl.drawElements(gl.TRIANGLE_STRIP, buffers.numIndices, gl.UNSIGNED_INT, 0); Also ...

2

Ok sometimes you have to ask a question to figure out the answer already. Example datasets are available in the same repository as linked in the question already. Here are some: supermurdoc.gltf duck.gltf etc. pp.

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