Light

Die WebDevice besitzt zwei Lichter: Ligthts0 und Ligthts1.

Licht kann auf drei Arten verwendet werden:
1. Als direktionales Licht. Das ist default. In diesem Fall ist die vierte Koordinate der Position = 0.
2. Als Punktlicht: Die die vierte Koordinate der Position = 1, und spotCutoff ist 180.
3. Als Spotlicht: Die die vierte Koordinate der Position = 1, spotCutoff ist 0 und spotCosCutoff gibt den Cosinus des Lichtkegels an.

Für Puntktlicht und Spotlicht ist die Abnahme der Helligkeit relativ zum Abstand der Lichtquelle zum Oberflächenpunkt in den Feldern
constantAttenuation,
linearAttenuation und
quadraticAttenuation gespeichert.
Die constantAttenuation ist eine konstante Abnahme des Lichtes. Sie ist default = 1. In diesem Fall ist keine Abnahme. Die linearAttenuation ist linear,die quadraticAttenuation ist quadratisch bezüglich des Abstandes der Lichtquelle zum Oberflächenpunkt.

Beispiel von einem Licht (Punktlicht) in WebGL:

<html> <body> <canvas id="myCanvas" width="600" height="400"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="bridge.js"></script> <script src="WebDrawing3d.js"></script> <script src="Classes.js"></script> <script> // das HTML Element vom canvas anfordern. var canvas = document.getElementById("myCanvas"); var WebDevice = new Device(canvas); WebDevice.BackGround=Color.WhiteSmoke; WebDevice.Paint = draw; WebDevice.Lights0.Position = new xyzf(6, 6, 10, 1); WebDevice.Lights0.spotCutoff = 180; WebDevice.Lights0.LinearAttenuation = 0.1; WebDevice.Lights1.Position = new xyzf(-6, -6, 10, 1); WebDevice.Lights1.spotCutoff = 180; WebDevice.Lights1.LinearAttenuation = 0.1; WebDevice.Lights1.Enable= 1; WebDevice.Refresh(); function draw() { WebDevice.drawBox(new xyz(-20,-20,0),new xyz(40,40,1)); } </script> </body> </html>

das Ergebnis:

Beispiel von einem Licht (SpotLight) in WebGL:
<html> <body> <canvas id="myCanvas" width="600" height="400"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="bridge.js"></script> <script src="WebDrawing3d.js"></script> <script src="Classes.js"></script> <script> // das HTML Element vom canvas anfordern. var canvas = document.getElementById("myCanvas"); var WebDevice = new Device(canvas); WebDevice.Paint = draw; WebDevice.Lights0.Ambient=Color.Red; WebDevice.Lights0.Position = new xyzf(0,0,10,1); WebDevice.Lights0.spotCutoff = 0; WebDevice.Lights0.spotCosCutoff = 0.8; WebDevice.Lights0.spotDirection= new xyz(0.4,0.4,-1); WebDevice.Lights1.Ambient=Color.Blue; WebDevice.Lights1.Position = new xyzf(0,-5,10,1); WebDevice.Lights1.spotCutoff = 0; WebDevice.Lights1.spotCosCutoff = 0.8; WebDevice.Lights1.spotDirection= new xyz(-0.1,-0.1,-1); WebDevice.Lights1.Enable= 1; WebDevice.ShadowIntensity= 0.5; WebDevice.Refresh(); function draw() { WebDevice.drawBox(new xyz(-20,-20,0),new xyz(40,40,1)); } </script> </body> </html> das Ergebnis:

Die Klasse Lights enthält folgende Felder:

LinearAttenuation:

Die lineare Abnahme des Lichtes.

QuadraticAttenuation:

Die quadratische Abnahme des Lichtes.

Enable:

Damit wird das Licht ein oder ausgeschaltet. Die Werte sind 1 (einschalten) oder 0 (ausschalten) Für Lights0 ist Enable = 1.

Ambient:

Der Ambientanteil des Lichtes.

Diffuse:

Der Diffusanteil des Lichtes.

Specular:

Der Specularanteil des Lichtes.

spotDirection:

Die Richtung für ein Spotlicht.

spotExponent:

Die exponetielle Abnahme für ein Spotlicht.

spotCutoff:

Ist 180 für ein Punktlicht, wobei die w-Koordinate der Position 1 ist. Wird ein Spot verwendet, so muss die w-Koordinate=0 sein und in spotCosCutoff der cosinus des Winkels des Lichtes gesetzt sein.

spotCosCutoff:

Enthält den Cosinus des Spotlichtes.

Direction:

Die Richtung des Lichtes.

Position:

Die Position des Lichtes vom Typ xyzf. Siehe spotCutoff, spotCosCutoff,