WaBis

walter.bislins.ch

JSG3D: Ambient-Beleuchtung

Die Ambient-Beleuchtung entspricht einer gleichmässigen Beleuchtung aus allen Richtungen. Die so beleuchteten Flächen haben alle dieselbe Helligkeit, unabhängig von der Orientierung eines Flächen-Elementes zur Kamera. Sie kann gut mit der Kamera-Beleuchtung und der Phong-Beleuchtung kombiniert werden.

Demo

In dieser Demo können die Flächenfarben (AreaHue, BackHue, AreaSat), die Ambient-Beleuchtung (AmbiHue, AmbiSat) und den Reflexionsanteil der Ambient-Beleuchtung (AmbiRefl) eingestellt werden.

Die Hue-Regler bestimmten die Farbe, die Sat-Regler bestimmen die Helligkeit und Sättigung der Farbe:

  • Sat = 0.0 → schwarz
  • Sat = 0.5 → maximale Sättigung der Farbe
  • Sat = 1.0 → weiss
function CreateGraph() {
  var g3d = NewGraph3D( {
    Aperture: Aperture,
    AmbientLight: JsgColor.HL( AmbiHue, AmbiSat ),
    AreaDrawMode: 3,
    Attr: {
      AreaColor: JsgColor.HL( AreaHue, AreaSat ),
      AreaBackColor: JsgColor.HL( BackHue, AreaSat )
    },
    Lighting: {
      ApplyPhong: false,
      ApplyCamLight: false,
      ApplyAmbient: true,
      AmbiRefl: AmbiRefl
    },
    BackLighting: {
      Dimm: Dimm
    },
    :
  } );
  :
}

Properties der Kamera-Beleuchtung

Die Ambient-Beleuchtung wird durch folgende Properties beeinflusst:

JsgEleData.AreaDrawMode
Zeichenmodus für Flächen. Damit Flächen gefüllt werden, muss Modus 2 (Area) oder 3 (Area und Grid) gewählt werden. Da die Ambient-Beleuchtung keine Kontraste zwischen Flächen-Elementen erzeugt, ist nur der Mode 3 sinnvoll, wobei LineColor und AreaBackLineColor von den Flächenfarben abweichen müssen, damit sie sichtbar werden.
JsgEleLighting.ApplyAmbient
Schaltet die Ambient-Beleuchtung ein oder aus.
JsgScene.AmbientLight
AmbiColHue, AmbiColSat: Globale Farbe und Helligkeit (Color) des Ambient-Lichtes.
JsgEleAttr.AreaColor, JsgEleAttr.AreaBackColor
AreaColHue, BackColHue, AreaColSat: Farbe einer Fläche (Color).
JsgEleLighting.AmbiRefl
Anteil der Reflexion des Ambient-Lichtes für die Fläche (0..1).
JsgEleLighting.Dimm
Abdunklung einer Flächenseite gegenüber der anderen (0..1).
JsgCamera.Aperture
Die Blende (Aperture) beeinflusst die globale Helligkeit der Grafik (< 1 Abdunklung der Szene, > 1 Aufhellung).

ApplyAmbient, AmbiRefl, AreaColor und AreaBackColor sind Eigenschaften einer Fläche und können für jede Fläche separat definiert werden können. ApplyAmbient, AmbiRefl und Flächen-Farbe kann für Vorder- und Rückseite einer Fläche separat eingestellt werden (AreaColor, AreaBackColor). Mit dem Property Dimm kann eine Flächenseite gegenüber der anderen abgedunkelt werden. Das Umgebungslicht AmbientLight gilt für die ganze Scene.

Berechnung der Beleuchtung

Die resultierende Farbe eines Flächen-Elementes bei der Ambient-Beleuchtung setzt sich zusammen aus der Mischung von AmbientLight und AreaColor bzw. AreaBackColor, wobei der Anteil von AmbientLight durch AmbiRefl der Fläche gesteuert wird. Die Helligkeit eines Flächen-Elementes hängt nicht von der Orientierung der Fläche zur Blickrichtung der Kamera ab.

Resultat = AmbientLight * AreaColor * AmbiRefl

Code

var resolution = 20;

var par = {
  AreaColorHue: 4/6,
  AreaColorSat: 0.85,
  AreaBackColorHue: 0,
  AmbientLightHue: 1/6,
  AmbientLightSat: 1,
  AmbiRefl: 1,
  Dimm: 1,
  Aperture: 1
};

var myGraph = CreateGraph();

function CreateGraph() {
  var g3d = NewGraph3D( { SyncMode: true } );

  g3d.SetCamera( {
    SceneSize: 3,
    CamHAng: 10,
    CamVAng: 35,
    CamDist: 5,
    CamViewCenter: JsgVect3.New( 0, 0, -0.2 ),
    Zoom: 1.2,
    Aperture: par.Aperture
  } );

  g3d.SetLight( {
    AmbientLight: JsgColor.HL( par.AmbientLightHue, par.AmbientLightSat )
  } );

  g3d.SetDefaultEleData( {
    Attr: {
      AreaColor: JsgColor.HL( par.AreaColorHue, par.AreaColorSat ),
      AreaBackColor: JsgColor.HL( par.AreaBackColorHue, par.AreaColorSat )
    },
    AreaDrawMode: 3,
    Lighting: {
      ApplyPhong: false,
      ApplyCamLight: false,
      ApplyAmbient: true,
      AmbiRefl: par.AmbiRefl
    },
    BackLighting: {
      Dimm: par.Dimm
    }
  } );

  var pi = Math.PI, pi2 = 2 * pi;

  g3d.AddAreasFrom3DFunc( {
    Func: function( a, b, p ) {
      var rx = p.Radius1 - Math.cos(b) * p.Radius2;
      var x = rx * Math.sin(a);
      var y = rx * Math.cos(a);
      var z = p.Radius2 * Math.sin(b);
      return [ x, y, z ];
    },
    Min: pi/3,
    Max: pi2,
    Min2: 0,
    Max2: pi2,
    Steps: 2 * resolution,
    Steps2: resolution,
    Radius1: 1,
    Radius2: 0.5
  } );

  return g3d;
}

var panel = ControlPanels.NewPanel( { 
  ModelRef: 'par', NCols: 2, PanelFormat: 'Slider', 
  OnModelChange: Update, 
  Format: 'fix0', Digits: 2, ReadOnly: true
} );

panel.AddSliderField( { Name: 'AreaColorHue', ColSpan: 2, Min: 0, Max: 1 } );
panel.AddTextField( { Name: 'AreaColorHue', Label: 'AreaColHue' } );

panel.AddSliderField( { Name: 'AreaBackColorHue', ColSpan: 2, Min: 0, Max: 1 } );
panel.AddTextField( { Name: 'AreaBackColorHue', Label: 'BackColHue' } );

panel.AddSliderField( { Name: 'AreaColorSat', ColSpan: 2, Min: 0, Max: 1 } );
panel.AddTextField( { Name: 'AreaColorSat', Label: 'AreaColSat' } );

panel.AddSliderField( { Name: 'AmbientLightHue', ColSpan: 2, Min: 0, Max: 1 } );
panel.AddTextField( { Name: 'AmbientLightHue', Label: 'AmbiColHue' } );

panel.AddSliderField( { Name: 'AmbientLightSat', ColSpan: 2, Min: 0, Max: 1 } );
panel.AddTextField( { Name: 'AmbientLightSat', Label: 'AmbiColSat' } );

panel.AddSliderField( { Name: 'AmbiRefl', ColSpan: 2, Min: 0, Max: 1 } );
panel.AddTextField( { Name: 'AmbiRefl' } );

panel.AddSliderField( { Name: 'Dimm', ColSpan: 2, Min: 0, Max: 1.5 } );
panel.AddTextField( { Name: 'Dimm' } );

panel.AddSliderField( { Name: 'Aperture', ColSpan: 2, Min: 0, Max: 2 } );
panel.AddTextField( { Name: 'Aperture' } );

panel.Render();

function Update() {
  panel.Update();

  var g3d = myGraph;

  g3d.SetAmbientLight( JsgColor.HL( par.AmbientLightHue, par.AmbientLightSat ) );
  g3d.SetCameraAperture( par.Aperture );

  g3d.ChangeDefaultEleData( {
    Attr: {
      AreaColor: JsgColor.HL( par.AreaColorHue, par.AreaColorSat ),
      AreaBackColor: JsgColor.HL( par.AreaBackColorHue, par.AreaColorSat )
    },
    Lighting: {
      AmbiRefl: par.AmbiRefl
    },
    BackLighting: {
      Dimm: par.Dimm
    }
  } );

  g3d.DrawDisplayList();
}

Weitere Infos zur Seite
Erzeugt Sonntag, 10. August 2014
von wabis
Zum Seitenanfang
Geändert Sonntag, 21. August 2016
von wabis