WebGL

I am currently learning webgl and have a question. I am trying to make a triangle and passing the color info into fragment shader from js file. The following is my js code. var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+ 'attribute vec4 a_Color;\n'+ 'varying vec4 v_Color;\n'+ 'void main(){\n'+ 'gl_Position = a_Position;\n'+ 'v_Color = a_Color;\n'+ '}\n'; var FSHADER_SOURCE = 'precision highp float;\n'+ 'varying vec4 v_Color;\n'+ 'void main() {\n'+ 'gl_FragColor = v_Color;\n'+ '}\n'; function main(){ var canvas = document.getElementById('webgl'); var gl = getWebGLContext(canvas); if(!gl){

There are several references to this around the web, including from stackoverflow. I have an unproject method which returns x,y coordinates which are returning in range of -1 and 1. Im wondering if these values are correct. If so, then what do i do with these values, multiply b the cameras position? Reference: How to convert mouse coordinate on screen to 3D coordinate Updated I found a bug in my matrix library, where I was missing some matrix components, I think it was in the multiplication method. After fixing this, I am no longer getting the -1 to 1 range. Now my data (freshly returned from

I'm trying to texture an extruded shape in Three.js. In the following code I create a curved shape, extrude the shape, then create a mesh with the geometry and a material I've loaded from a Jpg file. The wireframe displays but the texture does not. The texture is 512*512px in size. Am I using the correct approach? Do I need to manually UV map the texture? I'd like the texture to wrap to the entire extruded face instead of each individual quad. var x = -50, y = 20, z = 150; var rx = 0, ry = Math.PI/4, rz = 0; var scale = 1; var color = 0x00ff00; var shape = new THREE.Shape(); shape.moveTo( x, y

I'm trying to implement flat-shading in webgl, I knew that varying keyword in vertex shader will interpolation that value and pass it to fragment shader. I'm trying to disable interpolation, and I found that flat keyword can do this, but it seems cannot use in webgl? flat varying vec4 fragColor; always getting error: Illegal use of reserved word 'flat' BrunoLevy I think 'flat' is not supported by the version of GLSL used in WebGL. If you want flat shading, there are several options: 1) replicate the polygon's normal in each vertex. It is the simplest solution, but I find it a bit

I'm trying to achieve making a gradient color as the design apps (Photoshop for example) does, but can't get the exact result i want. My shader creates very nice 'gradients' but also contains other colors that are different from the colors I want to switch in. It looks nice but, my aim is adding blending functions later and make a kind of color correction shader. but first of all I have to get the right colors. Here is my fragment shader http://player.thebookofshaders.com/?log=171119111216 uniform vec2 u_resolution; void main() { vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color1 = vec3(1