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:

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();
}