WebGL

I'm aiming for this effect: (horizontal-only contour lines): I did find this example , however it creates horizontal and vertical contour lines. I can't quite wrap my head around how the call to fwidth() is generating the lines. uniform float gsize;//size of the grid uniform float gwidth;//grid lines'width in pixels varying vec3 P; void main() { vec3 f = abs(fract (P * gsize)-0.5); vec3 df = fwidth(P * gsize); float mi=max(0.0,gwidth-1.0), ma=max(1.0,gwidth);//should be uniforms vec3 g=clamp((f-df*mi)/(df*(ma-mi)),max(0.0,1.0-gwidth),1.0);//max(0.0,1.0-gwidth) should also be sent as uniform

I am learning to use multitexture on WebGL. I have the following shader code snippets: uniform int flag; uniform sampler2D texture0; uniform sampler2D texture1; varying vec2 v_texCoord; void main() { vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t); vec4 texel0 = texture2D(texture0, texCoord); vec4 texel1 = texture2D(texture1, texCoord); if (1 == flag) { gl_FragColor = texel1; } else { gl_FragColor = texel0; } } Also, my JavaScript code snippets: gl.uniform1i(gl.getUniformLocation(gl.program, "flag"), 1); gl.uniform1i(gl.getUniformLocation(gl.program, "texture0"), 0); // Texture Unit 0

I've been trying to do the same things shadertoy does for passing audio frequency/waveform into the shader with three.js. https://www.shadertoy.com/view/Xds3Rr In this example it seems that IQ is putting frequency/waveform audio data into an image and then sampling that as a texture in the shader. How would I create that audio texture in Javascript? To be clear I don't need help loading the texture uniform into the shader. I just don't know how to create the audio texture from an audio file. var texture = new THREE.Texture(); shader.uniforms = { iChannel0: { type: 't', value: texture } }; I'm

3 index buffers asks a more difficult question, but I feel like their main problem boils down to mine: is there a way to use index buffers to visit the same vertex multiple times in WebGL rather than duplicating the vertices? All I was able to find is using index buffers to associate textures, normals, etc. to vertices in a model. I wasn't able to find a way to use an index buffer to tell drawArrays the order in which to visit the vertices in a position array. Yes, use gl.drawElements and upload the buffer with your vertex indices to gl.ELEMENT_ARRAY_BUFFER. ... upload vertex data to buffers,

I'm writing a simple Javascript library that makes use of some WebGL code. I'd like to include the shader sources inline in the .js file, because my alternatives are to include them as script tags in each page, or to have them as separate files which are loaded as AJAX. Neither of these options are particularly modular. However, due to the lack of multi-line strings in javascript, I don't have any good ideas for how to inline the WebGL code. Is there an approach I'm not thinking of? Stefan Haustein Use a single string per line and then join them together, e.g. var shader = [ "// line1 ", "//