WebGL

Is there a fast way to the average colors from several framebuffers in WebGL / Javascript?

由 空扰寡人 提交于 2019-12-08 03:18:44
问题 I am very new to the WebGL subject. What I want to do is to calculate the average color of 6 different framebuffers like the ones below in the picture. Now I am wondering what the best way to go about it would be? I tried to do gl.readPixels(0, 0, 256, 256, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues); but that seems to be very slow... Is there a way that this can happen on the graphics card? this is how the FBO is set up - I have this from a tutorial: ... 回答1: You have two options Write a

Render WebGL non-contiguous lines as a single object

由 五迷三道 提交于 2019-12-08 03:02:25
问题 I have multiple WebGL lines to render, and they all have the same rendering style. So for performance, I want to render them all as a single object, in a single draw call. But the problem is that the lines don't all connect to each other. See example here: http://jsfiddle.net/b6jgS/6/ As you can see the rings connect, but I don't want them to. Yet I still want to draw them in a single draw call. The relevant code is this, which simply generates some geometry for some rings: # Pardon the

Webgl flickering in Chrome on Windows x64 with nvidia GPU

由 跟風遠走 提交于 2019-12-08 02:50:16
问题 I see a weird flickering of some rendered geometry Chrome on Windows 10 x64 with nVidia chips. I've also tested in in Chrome for Linux, Firefox for both platforms, Android, and with Intel GPU. It works fine everywhere, except the one platform mentioned. Minimal example looks like this: Vertex shader: precision mediump float; smooth out vec2 pointCoord; const vec2 vertexCoord[] = vec2[]( vec2(0.0, 0.0), vec2(1.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 1.0) ); void main

Is it possible to implement deferred shading in WebGL?

由 故事扮演 提交于 2019-12-08 02:48:09
问题 As I understand, the only way to implement deferred shading is using MRT and binding different textures to store data to the color attachments. The problem is that the WebGL specifications defines a single color attachment: COLOR_ATTACHMENT0. Is it possible to implement deferred shading at all in WebGL with this restriction? 回答1: You can implement deferred shading by rendering to textures, but you need to either redraw all geometry for each pass (diffuse, depth, whatnot) or come up with a way

Three.js, custom light geometry

由 牧云@^-^@ 提交于 2019-12-08 02:44:48
问题 Is it possible to create in Three.js a light source that has custom geometry, e.g. symbol. There is Arealight in Three.js that works as rectangular source of light and which has wigth and height parameters. Finally, the aim is to get a surface illuminated by a such source, which visually is that custom figure. Thank you WestLangley, this is a great example, I tried this way, but unfortunately, it didn't work for me. I tried this: var textTexture = new THREE.Texture( "textures/text.jpg" ); /

Three.js / Webgl X-RAY effect

由 血红的双手。 提交于 2019-12-08 02:26:48
问题 How to achieve an x-ray-style effect in three.js / webgl? Some sort of this UPD I need real-time render with this stuff, not a still image. This can be done with shaders, that change density in non-linear way on overlaps based on distance. I briefly understand theory, but have no practice, that is why I need help with this 回答1: Ok, got acceptable result with this: <!DOCTYPE html> <html> <head> <title>X-ray</title> <script type="text/javascript" src="js/three.js/build/three.js"></script>

Shaders: How to draw 3D point verts without generating geometry?

由 最后都变了- 提交于 2019-12-08 02:25:26
问题 I have a 3D Webgl scene. I am using Regl http://regl.party/ . Which is WebGL. So I am essentially writing straight GLSL. This is a game project. I have an array of 3D positions [[x,y,z] ...] which are bullets, or projectiles. I want to draw these bullets as a simple cube, sphere, or particle. No requirement on the appearance. How can I make shaders and a draw call for this without having to create a repeated duplicate set of geometry for the bullets? Preferring an answer with a vert and frag

Multiple objects in webgl

由 那年仲夏 提交于 2019-12-08 02:23:28
问题 I'm trying to render a few objects to a canvas and I'm having a bit of trouble understanding what's not working. I'm building two objects at the moment that represent the two meshes that I want to render. If I create one mesh the code works fine so the problem, I think, is that the data gets screwed up when I'm building two or more. Here's an example of the mesh data: "name":"cone", "buffers":{ "vertexPosition":{}, // Buffer "vertexIndex":{} // Buffer }, "mesh":{ "vertices":[], // emptied it

Computing a projective transformation to texture an arbitrary quad

由 被刻印的时光 ゝ 提交于 2019-12-08 02:15:26
问题 I would like to compute a projective transformation to texture an arbitrary quad in webgl (with three.js and shaders if possible/necessary). This is what I want to obtain, taken from this answer. Everything is well described in the post, so I suppose that with a bit of work I could solve the problem. Here is a pseudo-code of the solution: precompute A matrix (should be trivial since texture coordinates are in [0,1] interval) compute B matrix according to the vertex positions (not possible in

WebGL: How to bind an array of samplers

由 情到浓时终转凉″ 提交于 2019-12-08 02:12:22
问题 As mentioned here it would be possible to "bind all the textures you need to a sampler array in the shader and then index it with a vertex attribute" . How would I do the binding? Currently I bind my textures like so (if that's correct in the first place; it works at least): sampler[i] = gl.getUniformLocation(program, "u_sampler" + i); ... for (var i = 0, len = textures.length; i < len; i++) { gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, textures[i]); gl.uniform1i(sampler
订阅 WebGL