0

I'm trying to do some data visualization and I want to make spheres light up (glow, pulsate) when I click on them. I'm new to webGL. There's a chrome experiment here that does it. Basically all those flashy lines (not the normal lines. The thicker lines actually light up and pulsate) that appear when you click united states, I want to know how to achieve them. Are they done using shaders? I've no idea what to read up on this. Can you give me some links and examples?

EDIT: Another webGL demo that uses similar effects

genpfault
  • 51,148
  • 11
  • 85
  • 139
Kevin Martin Jose
  • 639
  • 9
  • 24

1 Answers1

1

Cool effects like glow are created by customizing your shaders. Click here to see details

Here is a glow example covered in that post https://stemkoski.github.io/Three.js/Shader-Glow.html

Its source code is at https://github.com/stemkoski/ blah blah blah Three.js/Shader-Glow.html

WebGL uses two stages of shaders : 1st the vertex shader which calculates the mapping from your object's (points,lines,triangles...) vertices in world coordinate space onto your screen space, and the other is the fragment shader which is often called the pixel shader for good reason. It controls final pixel level positions and colors and is largely where the magic happens for glow

Community
  • 1
  • 1
Scott Stensland
  • 26,870
  • 12
  • 93
  • 104
  • Thanks, that link was useful. Shaders was the term I was looking for. I could not find much info on the topic so I started to suspect that the effects did not have anything to do with custom shaders at all. I should maybe look for non-webgl specific tutorials. – Kevin Martin Jose Jul 24 '15 at 05:36