computergrafik ss 2010 - uni-osnabrueck.de
TRANSCRIPT
![Page 1: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/1.jpg)
Computergrafik SS 2010
Oliver Vornberger
Institut für InformatikUniversität Osnabrück
Vorlesung vom 06.04.2010
![Page 2: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/2.jpg)
Organisation
• Vorlesung: Mo+Di, 10:15 Uhr, 31/449a• Übung: Do, 14:15 + 16:00 Uhr, 31/449a• Übungsblatt am Dienstag• Übung am Donnerstag• Testate am Montag, Dienstag, Mittwoch• Klausur am 05.07.10
![Page 3: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/3.jpg)
stud.ip
https://studip.rz.uos.de
![Page 4: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/4.jpg)
http://www.google.de/search?q=computer+graphics
![Page 5: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/5.jpg)
Amazon
http://www.amazon.de
![Page 6: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/6.jpg)
Literatur
James Foley et al:Computer GraphicsPrinciples and
Practice2nd EditionAddison Wesley 1995
Dieter Fellner:ComputergrafikBI 1994
Alan Watt:3D-Computergrafik3. AuflageAddison Wesley 2002
Klaus Zeppenfeld:Lehrbuch der Grafik-programmierungSpektrum 2004
![Page 7: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/7.jpg)
Begleitmaterial
• Skript, gedruckt, 7.50 €• Skript in HTML • Skript in PDF • Folien in PDF• Videomitschnitt im virtPresenter-Format• Videopodcast im mp4-Format• Audiomitschnitt im mp3-Format
http://www-lehre.inf.uos.de/~cg/2010
![Page 8: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/8.jpg)
Classroomquiz
![Page 9: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/9.jpg)
Motivation
• Bild sagt mehr als 1000 Worte• Auge erfasst 40.000.000 Bit/sec• Lesegeschwindigkeit
= 10 Worte à 5 Zeichen/sec= 10 · 5 · 8 = 400 Bit/sec
• ⇒ Faktor 100.000
![Page 10: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/10.jpg)
Grafische Datenverarbeitung
• Bildverarbeitung– Licht, Radar, Röntgen, Ultraschall, …– Vereinfachung, Verbesserung
• Mustererkennung– Analyse von Rasterdaten – Optical Character Recognition (OCR)
• Generative Computergrafik– Eingabe der Repräsentation– Ausgabe der Darstellung
![Page 11: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/11.jpg)
Anwendungen
• Business-Grafik • Grafische Benutzeroberflächen• Kartografie• CAD (Haus, Auto,…)• Visualisierung (Molekül, Strömung, Scan)• Simulation (Fahrzeug, Flugzeug,…)• Virtual Reality (Computerspiele,…)
![Page 12: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/12.jpg)
Modellieren, Projizieren, Rendern
Micrografx Simply 3D
![Page 13: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/13.jpg)
2D-Grundlagen
![Page 14: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/14.jpg)
2D-Füllen
![Page 15: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/15.jpg)
2D-Clipping
![Page 16: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/16.jpg)
Transformation
![Page 17: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/17.jpg)
Kurven
![Page 18: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/18.jpg)
Farbe
![Page 19: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/19.jpg)
Pixeldateiformate
![Page 20: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/20.jpg)
Macromedia Flash
![Page 21: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/21.jpg)
SVG
![Page 22: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/22.jpg)
Fraktale
![Page 23: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/23.jpg)
3D-Grundlagen
v × w
α
w
v
|~v × ~w| = |~v| · |~w| · sin(α)
![Page 24: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/24.jpg)
3D-Transformationen
Ry(δ) =
⎛⎜⎜⎝cos(δ) 0 sin(δ) 00 1 0 0
− sin(δ) 0 cos(δ) 00 0 0 1
⎞⎟⎟⎠
![Page 25: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/25.jpg)
3D-RepräsentationP4
P3
P1
P2
![Page 26: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/26.jpg)
Projektion
P2‘
P1‘
P2
P1
P3
P3‘
![Page 27: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/27.jpg)
Rendern
![Page 28: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/28.jpg)
Beleuchtung
NLα
R
A
![Page 29: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/29.jpg)
Culling
![Page 30: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/30.jpg)
Texturing
![Page 31: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/31.jpg)
VRML
http://www-lehre.inf.uos.de/gp/
![Page 32: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/32.jpg)
OpenGl
glRotatef(-40.0, 0.0, 1.0, 0.0);glRotatef( 20.0, 1.0, 0.0, 0.0);glutSolidTeapot(1.0);
![Page 33: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/33.jpg)
Radiosity
![Page 34: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/34.jpg)
Ray Tracing
![Page 35: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/35.jpg)
Inverse Kinematik
α
β
α'
β'
![Page 36: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/36.jpg)
Partikelsysteme
![Page 37: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/37.jpg)
Maxon Cinema4D
![Page 38: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/38.jpg)
Google SketchUp
![Page 39: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/39.jpg)
Google Earth
![Page 40: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/40.jpg)
Kapitel 2:
Grafische Benutzeroberflächen
![Page 41: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/41.jpg)
GUI-Programmierung
• Windowmanager
• AWT (Abstract Window Toolkit)– reicht Kommandos weiter an Betriebssystem – plattformabhängig
• Swing – pure Java– einheitliches Look & Feel
![Page 42: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/42.jpg)
GUI-Komponenten
• JFrame• GridLayout• JButton• JLabel• JSlider• ActionListener• actionPerformed
![Page 43: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/43.jpg)
RaufRunterApplikation.javaimport java.awt.*; import java.awt.event.*; import javax.swing.*;
public class RaufRunterApplikation extends JFrame { private int zaehler = 42; private JButton rauf = new JButton("Addiere"); private JLabel ergebnis = new JLabel("42 ",JLabel.CENTER); private JSlider schieber = new JSlider(0, 100, zaehler);private JButton runter = new JButton("Subtrahiere");
public RaufRunterApplikation() {setLayout(new GridLayout(0,1)); add(rauf); add(ergebnis); add(schieber); add(runter); rauf.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){ zaehler++; ergebnis.setText(zaehler + " "); schieber.setValue(zaehler);
}});runter.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent e){zaehler--;ergebnis.setText(zaehler + " ");schieber.setValue(zaehler);
}});pack(); setVisible(true);
}public static void main (String [] args) {
new RaufRunterApplikation();}
}
View
Model
Control
![Page 44: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/44.jpg)
Model-View-Controller
raufRunter KnopfKontrolliereractionPerformed
Zustand aendernnotifyObservers
update
View Controller
Model
![Page 45: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/45.jpg)
Zustand.java
import java.util.Observer;import java.util.Observable;
public class Zustand extends Observable{
private int zaehler;
public Zustand(int zaehler){this.zaehler=zaehler;
}
int get(){return zaehler;}
void aendern(int delta){ zaehler = zaehler + delta; setChanged(); notifyObservers();
}}
![Page 46: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/46.jpg)
KnopfKontrollierer.java
import java.awt.*;import java.awt.event.*;
public class KnopfKontrollierer implements ActionListener {
private Zustand z; private int delta;
public KnopfKontrollierer(Zustand z, int delta) {this.z = z; this.delta = delta;
}
public void actionPerformed(ActionEvent e) { z.aendern(delta);
} }
![Page 47: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/47.jpg)
RaufRunter.java, Teil 1
import java.util.*;import java.awt.*;import javax.swing.*;
public class RaufRunter extends JPanel implements Observer {
private JButton rauf; private JButton runter; private Zustand z; private JLabel ergebnis; private JSlider schieber; private Font font;
public void update(Observable z, Object dummy){ergebnis.setText(((Zustand)z).get() + " ");schieber.setValue(((Zustand)z).get());
}
![Page 48: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/48.jpg)
RaufRunter.java, Teil 2public RaufRunter() {
setLayout(new GridLayout(0,1)); rauf = new JButton("Addiere"); runter = new JButton("Subtrahiere"); schieber = new JSlider(0,100,42); ergebnis = new JLabel("42",JLabel.CENTER); font = new Font("SansSerif",Font.BOLD,30); ergebnis.setFont(font); add(rauf); add(ergebnis); add(schieber); add(runter); z = new Zustand(42); z.addObserver(this); KnopfKontrollierer raufK; raufK = new KnopfKontrollierer(z,+1); rauf.addActionListener(raufK); KnopfKontrollierer runterK; runterK = new KnopfKontrollierer(z,-1); runter.addActionListener(runterK);
}}
![Page 49: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/49.jpg)
RaufRunterApp.java
import java.awt.BorderLayout;import javax.swing.JFrame;
public class RaufRunterApp {
public static void main(String args[]) {JFrame rahmen = new JFrame("RaufRunter-Applikation");rahmen.add(new RaufRunter(),BorderLayout.CENTER);rahmen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);rahmen.pack();rahmen.setVisible(true);
}
}
![Page 50: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/50.jpg)
RaufRunterApplet.java
import java.awt.BorderLayout;import javax.swing.JApplet;
public class RaufRunterApplet extends JApplet {
public void init() {add(new RaufRunter(), BorderLayout.CENTER);
}}
![Page 51: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/51.jpg)
RaufRunter.html
<HTML><HEAD>
<TITLE>RaufRunter-Applet</TITLE></HEAD><BODY>
<CENTER><H1>RaufRunter-Applet</H1><APPLET
width = 200 height = 150 code = "RaufRunterApplet.class" archive = "raufRunter.jar">
</APPLET></CENTER>
</BODY></HTML>
![Page 52: Computergrafik SS 2010 - uni-osnabrueck.de](https://reader031.vdocuments.site/reader031/viewer/2022012015/615a88850ec35b43190bc230/html5/thumbnails/52.jpg)
Dateisystem
public class RaufRunter extends JPanel implements Observer
raufrunter.jar RaufRunter.html
public class Zustand extends Observable
public class KnopfKontrollierer implements ActionListener
public class RaufRunterApplet extends JAppletpublic class RaufRunterApp