Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

[Devlog] 2D Beleuchtung

Werbeanzeige

idontknow

unregistriert

1

11.05.2013, 12:40

[Devlog] 2D Beleuchtung

moin,

Mir wurde geraten ich "präsentiere" hier mal die Spielerei an der ich in letzter Zeit bastel. Das Ziel ist 2D Lichter zu implementieren die eine Szene beleuchten und das ganze möglichst Pixelgenau.
Bevor ich groß was schreibe ein Bild vom aktuellen Stand:

(Link)


Sonderlich spektakulär ist das ganze bisher (noch) nicht, aber man sieht schon grob worauf es hinausläuft. Im Bild sind 2 verschieden farbige Lichter zu sehen und 2 beleuchtete Quadrate, wovon eines nicht wirklich beleuchtet ist.

Die Idee ist parallel zur Szene eine Heightmap zu rendern die den Objekten einen zusätzlichen Höhenwert gibt der dann für die Lichtberechnung verwendet werden kann. Momentan ist der Algorithmus sehr trivial, es wird lediglich ein Abgleich zwischen Lichthöhe und Objekthöhe gemacht und ggf. das Objekt beleuchtet. Die erzeugte Lightmap wird anschließend mit einem Gaussian-Blur bearbeitet, damit die Kanten nicht mehr so eckig aussehen. Ein zusätzlicher Effekt des Blurs ist, dass die Kanten von den unbeleuchteten Objekten auch beleuchtet werden, wodurch das ganze momentan ein kleines bisschen schicker aussieht. Bin mir noch nicht sicher ob das beabsichtigtes Verhalten ist!
Abschließend wird die Szene mit der Lightmap einfach zusammen multipliziert.

Das ganze muss defintiv noch getweaked werden, aber bisher ist es mehr eine kleine Demo und von daher so vollkommen in Ordnung. Was als nächstes ansteht ist eine kleine Szene zu bauen, das ganze wird vermutlich ein bisschen mehr Zeit in Anspruch nehmen als ich mir wünschen würde (außer ich finde spontan einige Grafiken :p).

Falls jemand (technische) Fragen oder Tipps/Verbesserungsvorschläge oder Feedback hat immer her damit :)

#todo:
- kleine Test-Szene bauen / erweitern (bumpmaps für Texturen, gedrehte Primitiven, evtl neue Primtiven (Dreieck, 6eck, Kreis,...))
- Richtungs- und Sonnenlicht

- Dicker Dank an Cat für die konstante Hilfe (als ob ich das komplett alleine hinkriegen würde :p) -

Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »idontknow« (17.05.2013, 08:33)

xardias

Community-Fossil

Beiträge: 2 731

Wohnort: Santa Clara, CA

Beruf: Software Engineer

  • Private Nachricht senden

2

11.05.2013, 17:18

Ich habe vor Jahren sowas aehnliches implementiert. Dieser Artikel auf Gamedev.net war dabei sehr hilfreich um soft shadows zu rendern ohne zu blurren. Damit haettest du die Wahl wie du mit den Kanten umgehen moechtest.

http://archive.gamedev.net/archive/refer…adow/index.html

Kombiniert mit normal mapping kann man damit denke ich richtig schicke 2D sachen basteln.

idontknow

unregistriert

3

11.05.2013, 17:36

hmm Danke für den Link auf jedenfall! Werd mir das mal ankucken. Bisher blure ich aber alles. Funktioniert auch ganz gut. Hat sich auch schon wieder einiges getan im Vergleich zu dem Bild oben, war heute sehr fleißig und geht relativ flott. z.b. gibts bereits richtige Schatten und sieht (finde ich) schon ganz cool aus!

Man sieht ja auch an Schrompf seinem Splatter wie cool sowas aussieht. Ich hoffe ne ähnliche "Beleuchtungs-Qualität" hinzubekommen :).

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »idontknow« (13.05.2013, 18:43)

idontknow

unregistriert

4

13.05.2013, 18:43

Kleines update: es ist ein bisschen was passiert, aber ist noch Tweaking notwendig :p

(Link)

Schrompf

Alter Hase

Beiträge: 1 470

Wohnort: Dresden

Beruf: Softwareentwickler

  • Private Nachricht senden

5

13.05.2013, 19:24

Sieht doch schon sehr schick aus! Ist das jetzt schon unter Einbeziehung von Lichthöhe und Per-Pixel-Höhe? Falls ja, kannst Du ja mal andere Grundkörper nehmen anstatt nur Quadrate mit Einheitshöhe. Eine Rampe mit linear wachsender Höhe von 0 bis x könnte schon sehr cool aussehen, und das bekommst Du ganz einfach über Vertexfarben im Höhen-Pass hin.
Häuptling von Dreamworlds. Baut aktuell an nichts konkretem, weil das Vollzeitangestelltenverhältnis ihn fest im Griff hat. Baut daneben nur noch sehr selten an der Open Asset Import Library mit.

idontknow

unregistriert

6

13.05.2013, 19:26

Jap, sowohl Licht als auch Objekthöhe wird schon mit einberechnet. Komplexere Objekte sind defintiv an der Zeit, das System an sich scheint ja gut zu funktionieren :).
Ich verstehe nur nicht ganz was du mit deinem letzten Satz meinst. Vertexfarben + Höhenpass?! Was ist ein Höhenpass und was meinst du damit?

edit:
So schaut jetzt eine Rampe aus:

(Link)


Ist etwas blöde gerade zu debuggen, da alles außer der Rampe zufällig generiert wird und cih daher wenig Ahnung habe über die Höhen der Objekte. Muss mal einbauen, dass man die Höhe von einem Licht verstellen kann! Was mir aber aufgefallen ist, wenn ich die Rampe über das komplette Spektrum der möglichen Höhenwerte geht (0.0f bis 32.0f in meinem Fall), dann erzeigt das kleine Licht auf der Rampe Streifen. Habs jetzt in dem Beispiel auf 0.5f bis 12.0f (links -> rechts) gestellt und da gibts den Effekt nicht.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »idontknow« (13.05.2013, 19:41)

Schrompf

Alter Hase

Beiträge: 1 470

Wohnort: Dresden

Beruf: Softwareentwickler

  • Private Nachricht senden

7

13.05.2013, 19:44

Nuja... Du renderst doch irgendwann die Per-Pixel-Höhen in ein separates Rendertarget aus, damit Du sie später bei der Lichtberechnung auslesen und einberechnen kannst. Den meine ich mit Höhen-Pass. Und wenn Du im Höhen-Pass einem Rechteck bei zwei Vertizes Farbmodulation (1, 1, 1, 1) mitgibst und den zwei anderen Vertizes (0, 0, 0, 1), dann interpoliert die Grafikkarte für Dich dazwischen und Du bekommst einen linearen Höhenverlauf zwischen 1 und 0 über die Länge des Rechtecks.
Häuptling von Dreamworlds. Baut aktuell an nichts konkretem, weil das Vollzeitangestelltenverhältnis ihn fest im Griff hat. Baut daneben nur noch sehr selten an der Open Asset Import Library mit.

idontknow

unregistriert

8

13.05.2013, 19:45

Jap habe ich gemacht, siehe das Bild oben. Den Bug muss ich aber noch untersuchen, wenn die Rampe zu hoch wird (aber immernoch kleiner als das Licht natürlich) dann entstehen ganz komische beleuchtet/unbeleuchtete Streifen...

idontknow

unregistriert

9

15.05.2013, 23:29

Update: kleiner nerviger Schatten Bug: https://dl.dropboxusercontent.com/u/8495716/bug.jpg

Hab Schrompf deswegen mal kurz angeschrieben und kopiere das der Vollständigkeit halber hier rein (das wichtige).

Zitat

probiere mal ein smoothstep() anstatt eines Vergleichs. Also anstatt
helligkeit = schattenhöhe > pixelhöhe ? 0.0f : 1.0f;
nimmst Du ein
helligkeit = saturate( pixelhöhe - schattenhöhe * 20.0f);


Scheinbar unterscheiden sich hier aber unsere beiden Ansätze etwas...?

Dewegen würde ich mal kurz meinen Algorithmus beschreiben: Ich transformiere Licht und Eingabe Koordinaten ins Textur Koordinaten System. Anschließend verfolge ich für jeden Pixel der potentiell von dem Licht beleuchtet wird den Strahl entlang der Pixel Position zum Licht Ursprung und überprüfe in jedem Step ob ich in der Heightmap für den jeweiligen Pixel einen Wert finde der den Strahl blockieren würde (also Heightmap Wert > Strahl z) und wenn dem so ist gibts einen schwarzen Pixel und wenn es auf dem gesamten Strahl keine Kollision mit dem Heightmap Wert gibt kann ich das Licht berechnen. D.h. ich verfolge erstmal den Strahl komplett und prüfe nur ob es Schatten gibt und falls ja gibts direkt Schwarz als Farbe aus und der Spaß ist vorbei und am Ende nach der Überprüfung des Strahls berechne ich die Farbe für den Pixel. Deswegen fällts mir gerade etwas schwer das ganze einzuordnen..

Ich poste mal den Algorithmus mit dem ich das Licht berechne. Gebashe bitte ersparen ich weiß selber, dass der Code relativ eklig ist...

HLSL-Quelltext

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

if(l <= PointLight.LightRange)
    {
        for(uint i = 0; i < 100; i++)
        {
            float3 v = positionIn + l * dir * i * 0.01f;
            float pixelheight = depth_map.Load(int3(v.xy, 0)).x * g_HeightScalar;
            if(v.z < pixelheight - bias)
            {
                return float4(0.0f, 0.0f, 0.0f, 0.0f);
            }
        }

        float x = 0.5f; 
        float power = 0.05f * (0.5f + PointLight.LightRange) * saturate(dot(dir, normal));
        float sat = saturate((PointLight.LightRange - l) / PointLight.LightRange);
        float4 color = PointLight.LightColor * sat * power / (x + l);
        return color;

    }

Die meisten Parameter sind selbsterklärend, length is der 2D Abstand von Licht und Pixel. positoinIn die Position des Pixels mit dem Höhenwert aus der Heightmap. g_HeightScalar einfach ne Skalierung des Höhenwertes, bias = 0 und das wars auch schon.
Würde mich freuen, wenn jemand helfen bzw. sagen kann wos scheppert :).

idontknow

unregistriert

10

16.05.2013, 19:39

Update:

Habe jetzt den smoothstep eingebaut und voila hat geholfen, auf dem aktuellen Bild an der Rampe kann man ganz nett erkennen was die Normalen bewirken :)


(Link)

Werbeanzeige

Ähnliche Themen