Author Topic: Glow line with webgl  (Read 9428 times)

0 Members and 1 Guest are viewing this topic.

Offline soil

  • ZX 81
  • *
  • Posts: 3
  • Karma: 0
    • View Profile
Glow line with webgl
« on: July 23, 2012 »
Hi. I need help with webgl.

What is the best way to draw a glow line (like a Laser beam,Starwars,...) in webgl with line 2 vertices (start,end). I prefer three.js but in this case is only width = 1. I read in this forum about quads with texture on line with shaders. Do you have shader example work with webgl (or with three.js) ?

One solution was use THREE.Plane as line with texture. But this contain only center position vector. I need move line with 2 vectors (start,end). Sorry for my english. Thanks ;]

Offline hellfire

  • Sponsor
  • Pentium
  • *******
  • Posts: 1294
  • Karma: 466
    • View Profile
    • my stuff
Re: Glow line with webgl
« Reply #1 on: July 23, 2012 »
Hi Soil,

Most of your question is already answered in this topic.
The main difference to drawing lines is that you don't put 2 vertices (start and end point of the line) into your vertex-buffer but four (because you want to draw a quad).

Challenge Trophies Won:

Offline soil

  • ZX 81
  • *
  • Posts: 3
  • Karma: 0
    • View Profile
Re: Glow line with webgl
« Reply #2 on: July 23, 2012 »
Did you have a working example ?. I am newbie in webgl shaders. I must see complet shader or example :) Thanks. In this example http://mrdoob.github.com/three.js/examples/webgl_custom_attributes_lines.html shaders work. But I need create quad from THREE.Line and use texture. input: 2 coord (or 4 recalculated from 2 & direction vector) output: glow line.
I want to much ? :)

Offline hellfire

  • Sponsor
  • Pentium
  • *******
  • Posts: 1294
  • Karma: 466
    • View Profile
    • my stuff
Re: Glow line with webgl
« Reply #3 on: July 23, 2012 »
I think you don't even need a shader here.
Just replace the line strip by a quad strip with slightly displaced vertices.
Add texture coordinates and bind a texture.
Done.
Challenge Trophies Won:

Offline relsoft

  • DBF Aficionado
  • ******
  • Posts: 3303
  • Karma: 47
    • View Profile
Re: Glow line with webgl
« Reply #4 on: October 22, 2012 »
Yep, no need to do shaders for this.

What I did was to just extrude right and left normals of the line and make that as my vectors for thickness.  Then use a glow texture to glow.



http://www.freebasic.net/forum/viewtopic.php?f=8&t=20506

Code is in LineGlow() sub

C++ here:

http://rel.phatcode.net/junk.php?id=121

glLineGlow()
Challenge Trophies Won: