title: webgl shader debugging / performance / cost
body: <p>I've been using three.js to experiment and learn GLSL and WebGL. I come from the 3d art world so I understand the concepts of a mesh, 3d math, lighting etc. While I do consult both OpenGL and WebGL literature (along with gpu gems, eric lengyels math book etc) I seem to be missing some crucial CS concepts that apply to graphics. </p>
  
  <p>Currently I'm using colors to debug, along with the canvas inspector to see how much time the draw calls take.</p>
  
  <p>What I'm interested in are questions like:</p>
  
  <ol>
  <li>How heavy are the GLSL functions. For example, exactly how does a division compare to multiplication or a sin in terms of performance, MAD instructions etc.? </li>
  <li><p>Say you have something like this</p>
  
  <pre><code>vec2 normalizedCoord = gl_FragCoord.xy / uniform_resolution.xy;
  vs
  vec2 normalizedCoord = gl_FragCoord.xy * uniform_resolution_inverse.xy;
  vs
  ... the same with lowp/mediump/highp
  </code></pre>
  
  <p>what happens to precision / performance?</p></li>
  <li><p>or something like </p>
  
  <pre><code>vec4 someVec4 = ...;
  
  float sum = dot(someVec4,vec4(1.));
  vs 
  float sum = someVec4.x + someVec4.y + someVec4.z + someVec4.w;
  </code></pre></li>
  <li><p>What are the implications of texture lookups, when for example, doing some sort of sampling - SSAO or something similar?</p></li>
  </ol>
  
  <p>Is this the type of information that could be found in something like Michael Abrash Black book?</p>
  
  <p>If someone can help me better phrase this question, it would be appreciated :)</p>