920180_it-IT

liliconcom

Ray Marching e WebP

Questo post mostra un modo decisamente troppo lento per eseguire il ray marching e un metodo Python perfettamente funzionante per creare un WebP animato (simile a una GIF animata, ma molto più bello!)

Parte 1: formati di file

Questo JSL utilizza la libreria Python PIL per creare alcuni file di test per confrontare dimensioni, velocità e qualità di file PNG , Formato JPEG e WebP . Il formato GIF si trova nella parte 2. Se si desidera eseguirlo, utilizzare 0 o 1 sulla seconda riga per creare ciascuna immagine. I valori RMSE sono l'errore medio dei pixel decodificati meno i pixel sorgente in unità di canale colore da 0 a 255. L'errore aumenta con una maggiore compressione e causa artefatti o sfocature nelle immagini altamente compresse. Le immagini PNG utilizzano una compressione senza perdita di dati che si traduce in un RMSE pari a 0,0.

I punti WebP viola hanno un RMSE costantemente inferiore rispetto ai punti JPEG rossi per quasi tutti i livelli di compressione. Inoltre, impiegano circa 20 volte più tempo per comprimersi, il che potrebbe valerne la pena se le immagini verranno conservate per sempre.

Scopri di più...

{picLeft, picRight, picTop, picBottom} = If( 1,
	picURL = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Rooster_-_Public_Domain.jpg"; // Lisafern, CC0, via Wikimedia Commons -- https://commons.wikimedia.org/wiki/Special:ListFiles/lisafern
	{600000, 6000000, 35, 5};//
, //
	picURL = "https://upload.wikimedia.org/wikipedia/commons/3/3a/Foster_graph_hamiltonian.png"; // public domain: https://commons.wikimedia.org/wiki/File:Foster_graph_hamiltonian.png
	{450000, 10000000, 32, 8};//
);
gTempFiles = Convert File Path( "$temp\pil_webp\", "windows" );
Delete Directory( gTempFiles ); // careful!
Create Directory( gTempFiles ); // the directory exists, and is empty

// load python and make sure PIL is available...
rc = Python Execute(
	{},
	{},
	"\[from PIL import Image, ImageSequence
import numpy as np
import os
import time
def rmse(imageA, imageB):
    if imageA.size != imageB.size:
        raise ValueError("Images must have the same dimensions to calculate RMSE")
    imgA_np = np.asarray(imageA).astype("float")
    imgB_np = np.asarray(imageB).astype("float")
    err = np.sum((imgA_np - imgB_np) ** 2)
    err /= float(imageA.size[0] * imageA.size[1])
    return np.sqrt(err)
]\",
	echo( 0 )
);
If( rc != 0,
	Throw( "python init error rc=" || Char( rc ) ),
	"ok"
);

// add a JSL image to a list of files for a .webp and .jpg and .gif
addNewFrame = Function( {filename, img},
	img << saveimage( gTempFiles || filename || ".png", "png" ); // png is lossless and the rmse uses this for comparison
	File Size( gTempFiles || filename || ".png" );
);

// the saveFrameTo... and saveFramesTo... functions 
// reflect the way the formats are typically used;
// you would not normally make a single frame GIF
// and you can't really make a multi-frame JPG.

saveFrameToWebP = Function( {outputfilename, qual},
	{filelist, webpname, rc}, //
	filelist = Transform Each( {f}, Files In Directory( gTempFiles ), //
		Convert File Path( gTempFiles || f, "windows" );//
	);
	If( N Items( filelist ) != 1, //
		Throw( "saveFrameToWebP nitems=" || Char( N Items( filelist ) ) );//
	);
	webpname = Convert File Path( outputfilename, "windows" );
	rc = Python Execute(
		{filelist, webpname, qual}, // inputs
		{_rmse, _ossize, _timew, _timer}, // outputs
		"\[# https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html#webp
imgs = []
for f in filelist:
    imgs.append(Image.open(f).convert('RGB'))
img=imgs[0]
_timew = time.perf_counter()
img.save(webpname,save_all=True,format="WEBP",
    minimize_size=True,
    lossless=False,quality=int(qual))
_timew = time.perf_counter() - _timew
_timer = time.perf_counter()
ir = Image.open(webpname).convert('RGB')
_timer = time.perf_counter() - _timer
_rmse = rmse(img,ir)
_ossize = os.path.getsize(webpname)
imgs = None
]\",
		echo( 0 )
	);
	If( rc != 0, //
		Throw( "saveFrameToWebP error rc=" || Char( rc ) );//
	, //
		Eval List( {_rmse, _ossize, _timew, _timer} );// return value
	);
);

saveFrameToPng = Function( {outputfilename, qual},
	{filelist, pngname, rc}, //
	filelist = Transform Each( {f}, Files In Directory( gTempFiles ), //
		Convert File Path( gTempFiles || f, "windows" );//
	);
	If( N Items( filelist ) != 1, //
		Throw( "saveFrameToPng nitems=" || Char( N Items( filelist ) ) );//
	);
	pngname = Convert File Path( outputfilename, "windows" );
	rc = Python Execute(
		{filelist, pngname, qual}, // inputs
		{_rmse, _ossize, _timew, _timer}, // outputs
		"\[# 
imgs = []
for f in filelist:
    imgs.append(Image.open(f).convert('RGB'))
img=imgs[0]
_timew = time.perf_counter()
img.save(pngname,save_all=True,format="PNG",
    optimize=True,
    quality=int(qual))
_timew = time.perf_counter() - _timew
_timer = time.perf_counter()
ir = Image.open(pngname).convert('RGB')
_timer = time.perf_counter() - _timer
_rmse = rmse(img,ir)
_ossize = os.path.getsize(pngname)
imgs = None
]\",
		echo( 0 )
	);
	If( rc != 0, //
		Throw( "saveFrameToWebP error rc=" || Char( rc ) );//
	, //
		Eval List( {_rmse, _ossize, _timew, _timer} );// return value
	);
);

saveFrameToJPG = Function( {outputfilename, qual},
	{filelist, jpgname, rc}, //
	filelist = Transform Each( {f}, Files In Directory( gTempFiles ), //
		Convert File Path( gTempFiles || f, "windows" );//
	);
	If( N Items( filelist ) != 1, //
		Throw( "saveFrameToJPG nitems=" || Char( N Items( filelist ) ) );//
	);
	jpgname = Convert File Path( outputfilename, "windows" );
	rc = Python Execute(
		{filelist, jpgname, qual}, // inputs
		{_rmse, _ossize, _timew, _timer}, // outputs
		"\[# https://pillow.readthedocs.io/en/stable/handbook/image-file-formats.html#webp
imgs = []
for f in filelist:
    imgs.append(Image.open(f).convert('RGB'))
img=imgs[0]
_timew = time.perf_counter()
img.save(jpgname,format="JPEG",
    optimize=True,
    quality=int(qual))
_timew = time.perf_counter() - _timew
_timer = time.perf_counter()
ir = Image.open(jpgname).convert('RGB')
_timer = time.perf_counter() - _timer
_rmse = rmse(img,ir)
_ossize = os.path.getsize(jpgname)
imgs = None
]\",
		echo( 0 )
	);
	If( rc != 0, //
		Throw( "saveFrameToJPG error rc=" || Char( rc ) );//
	, //
		Eval List( {_rmse, _ossize, _timew, _timer} );// return value
	);
);

// Lisafern, CC0, via Wikimedia Commons -- https://commons.wikimedia.org/wiki/Special:ListFiles/lisafern
img = New Image( picURL );
start = HP Time();
pngSize1 = addNewFrame( "1jsl.png", img );
JSLpngTime = (HP Time() - start) / 1e6;
dt = New Table( //
	New Column( "extension", "character" ),
	New Column( "size" ),
	New Column( "timewrite" ),
	New Column( "timeread" ),
	New Column( "rmse" )
);

dt << addrows( 1 );
extension = "JSLPng";
size = pngSize1;
rmse = 0;
timewrite = JSLpngTime;

dt << addrows( 1 );
extension = "PILPng";
{rmse, size, timewrite, timeread} = saveFrameToPng( "$temp/1.png", 95 );

For( i = 0, i <= 100, i += 1,
	dt << addrows( 1 );
	extension = "WebP";
	{rmse, size, timewrite, timeread} = saveFrameToWebP( "$temp/1.webp", i );
	Wait( .01 );
	dt << addrows( 1 );
	extension = "Jpg";
	{rmse, size, timewrite, timeread} = saveFrameToJpg( "$temp/1.jpg", i );
	Wait( .01 );
);


dt << Graph Builder(
	Size( 996, 713 ),
	Show Control Panel( 0 ),
	Legend Position( "Inside Floating" ),
	Variables( X( :size ), Y( :rmse ), Overlay( :extension ), Size( :timewrite ) ),
	Elements( Points( X, Y, Legend( 47 ) ) ),
	SendToReport(
		Dispatch( {}, "size", ScaleBox,
			{Scale( "Log" ), Format( "Engineering SI", 12 ), Min( 1e4 ), Max( 6.1e6 ), Minor Ticks( 1 ), Label Row(
				{Show Major Grid( 1 ), Show Minor Grid( 1 ), Show Minor Labels( 1 )}
			)}
		),
		Dispatch( {}, "rmse", ScaleBox, {Min( -0.5 ), Max( 32 ), Inc( 5 ), Minor Ticks( 0 )} ),
		Dispatch( {}, "400", ScaleBox,
			{Legend Model(
				47,
				Type Properties( 0, "Marker", {Marker( "FilledCircle" )} ),
				Properties( 1, {Line Color( 3 ), Marker( "FilledCircle" )}, Item ID( "Jpg", 1 ) ),
				Properties( 2, {Line Color( 5 ), Marker( "FilledCircle" )}, Item ID( "JSLPng", 1 ) ),
				Properties( 3, {Line Color( 6 ), Marker( "FilledCircle" )}, Item ID( "PILPng", 1 ) ),
				Properties( 4, {Line Color( 8 ), Marker( "FilledCircle" )}, Item ID( "WebP", 1 ) ),
				Properties( -1, {Marker( "FilledSquare" )}, Item ID( "Png", 1 ) )
			)}
		),
		Dispatch( {}, "graph title", TextEditBox, {Set Text( "WebP vs Jpg vs Png" )} ),
		Dispatch( {}, "size", TextEditBox, {Set Text( "Size on disk, bytes" )} ),
		Dispatch( {}, "rmse", TextEditBox, {Set Text( "RMSE out of 255" )} ),
		Dispatch( {}, "Graph Builder", FrameBox,
			{Marker Drawing Mode( "Normal" ), Reference Line Order( 6 ), Add Image(
				2, // layer 2 above grid lines
				image( New Image( picURL ) ),
				Bounds( Left( picLeft ), Right( picRight ), Top( picTop ), Bottom( picBottom ) )
			), Add Graphics Script( 7, Description( "" ), Empty() )}
		),
		Dispatch( {}, "400", LegendBox, {Legend Position( {47, [4, 0, 3, 2, 1]} )} )
	)
);

dt << Graph Builder(
	Size( 638, 370 ),
	Show Control Panel( 0 ),
	Variables( X( :size ), Y( :timeread ), Overlay( :extension ) ),
	Elements( Points( X, Y, Legend( 9 ) ) ),
	SendToReport(
		Dispatch( {}, "400", ScaleBox,
			{Legend Model(
				9,
				Properties( 0, {Line Color( 3 )}, Item ID( "Jpg", 1 ) ),
				Properties( 1, {Line Color( 5 )}, Item ID( "JSLPng", 1 ) ),
				Properties( 2, {Line Color( 6 )}, Item ID( "PILPng", 1 ) ),
				Properties( 3, {Line Color( 8 )}, Item ID( "WebP", 1 ) )
			)}
		),
		Dispatch( {}, "400", LegendBox, {Legend Position( {9, [0, 3, 2, 1]} )} )
	)
);

Salvataggio di un'immagine reale. I punti arancioni e blu oltre la dimensione del disco di 3 MB mostrano come i file PNG non riescano a comprimere bene questi dati. L' originale è 1264x2208 = 2.790.912 pixel da 3 byte ciascuno (se non compresso). Per (quasi) qualsiasi dimensione di file, il WebP ha un RMSE inferiore (qualità migliore) rispetto al JPEG della stessa dimensione, ma il tempo di compressione (dimensione del marcatore) è molto più lungo.

Salvataggio di un'immagine digitale con bordi netti. Con questi dati, il formato PNG supera il formato JPG per un'immagine di qualità migliore. Tuttavia, molti osservatori si accontenteranno di valori RMSE bassi, inferiori a 5 circa, per entrambi i tipi di immagine. L' originale è 2000x2000 = 4.000.000 di pixel da 3 byte ciascuno (se non compresso). Anche in questo caso, il formato WebP offre una qualità superiore rispetto al formato JPEG delle stesse dimensioni, ma richiede più tempo per la compressione.

Ecco una rapida occhiata ai tempi di lettura; si applicano solo al lettore PIL in Python, non a Firefox o a qualsiasi altro browser che visualizzi le immagini. Sembra che WebP sia 3 volte più lento di JPEG nel caricamento.

Nessuno tra WebP, JPEG o PNG è un chiaro vincitore (per ora. Continua a leggere). JPEG si comprime velocemente, WebP si comprime in dimensioni ridotte e PNG è lossless. La mia preferenza personale è usare PNG per la maggior parte dei grafici generati al computer e (almeno in passato) JPEG per le immagini reali. Il supporto per le immagini JMP 19 non include WebP senza l'uso di Python.

Parte 2: formati di file animati

Sia i formati WebP che GIF supportano l'archiviazione di più immagini, riproducibili in loop senza audio. JMP può creare direttamente una GIF animata e, con Python+PIL, un WebP animato. Se volete andare oltre, il nuovissimo WebP surclassa nettamente l'antica tecnologia GIF... guardate le due immagini alla fine.

Diversi anni fa mi sono imbattuto in https://www.shadertoy.com/ (non guardare, potresti non tornarci per un po'!). Gli shader sono piccoli programmi che girano sulle schede grafiche utilizzando le GPU. Ogni pixel del display viene colorato in base all'output del programma shader. Più GPU generano più pixel, più velocemente. Il sito è affascinante perché puoi modificare il programma shader in stile C e rieseguirlo nel tuo browser. Il tuo browser ha accesso alle GPU ed è davvero veloce.

L'idea dello shader era originariamente pensata per colorare triangoli 3D in cui ogni angolo ha un colore (in base al materiale, all'orientamento, all'illuminazione, ecc.). I pixel (solitamente chiamati frammenti) del triangolo vengono interpolati tra gli angoli. Tuttavia, non è obbligatorio che uno shader utilizzi un triangolo 3D; può calcolare un colore in qualsiasi modo desideri. Alcuni esempi di shadertoy calcolano un colore in base alle coordinate xy dei pixel e all'ora corrente (per guidare un'animazione, ad esempio del moto ondoso nell'oceano).

Gli esempi più interessanti utilizzano un'idea chiamata "ray marching". Esistono molti ottimi tutorial sul ray marching e sulle funzioni di distanza con segno. (Un SDF per un oggetto restituisce una distanza positiva dalla sua superficie a meno che il punto non sia in qualche modo penetrato al suo interno, in tal caso una distanza negativa). In breve, il ray marching posiziona uno schermo virtuale di pixel davanti all'occhio/telecamera e segue un raggio dall'occhio attraverso un pixel in una serie di funzioni di distanza con segno, chiedendo a ogni SDF "Quanto dista da te questo punto sul raggio?". Una sfera, un cubo, un toro, un piano, ecc. hanno tutti SDF semplici. La magia del ray marching sta nel trovare la risposta minima da tutti gli SDF e spostarsi di quella distanza lungo il raggio, ripetendo l'operazione finché la distanza minima non è piuttosto piccola. Ogni pixel richiede in genere una dozzina di iterazioni per avvicinarsi a un oggetto rappresentato da un SDF. Lo stesso stile di marcia può anche scoprire se il punto sull'SDF è in ombra e qual è la pendenza della superficie (che determina la quantità di luce che rimbalza verso l'occhio).

Ecco il JSL per creare sia la GIF animata che il WebP animato da un modello 3D con una telecamera che si muove intorno ad esso. La parte più importante è il codice per il ray marching; non ne avrai bisogno. Le funzioni che stai cercando sono addNewFrame, che crea un file in una directory da una variabile globale denominata bitmap, e saveFrames, che prende tutti i file dalla directory e crea il WebP o la GIF. Dovrai modificarle per adattarle alle tue esigenze. Tutto il resto è specifico per il ray marching ed è più didattico che utile (perché è lento).

Scopri di più...

start = HP Time();

xypix = 512;//32 takes 22s/f; 256 takes 22 minutes/frame, 128 is 6 min/fr
nframes=128;
ambient=.0005; // .0001 barely visible
lightPosition = -40. || -40. || 0; // top left. z=0 is near eye, -1 closer to scene. 
lightPower = 50;
filesdir="$desktop/donutpics/"; // not empty()! 
makegif = "$desktop/donut.gif"; // empty() or "$desktop/filename.gif"
makewebp = "$desktop/donut.webp"; // empty() or "$desktop/filename.webp" -- requires jpip.bat install Pillow
//deletedirectory(filesdir);createdirectory(filesdir);
if(!Directory Exists(filesdir),throw("stopped because directory does not exist: "||filesdir));
if(nitems(filesindirectory(filesdir))!=0,throw("stopped because directory not empty: "||filesdir));

if(!isempty(makewebp), // need a snip of python to make webp...fail early if not there
	rc = Python Execute({},{},
"\[from PIL import Image
]\",echo(0));
	if(rc!=0, throw("python init error rc="||char(rc)),"ok");
);

addNewFrame = Function( {filename},{img}, // writes global bitmap to filesdir in .png format
	img = New Image( bitmap );
	img<
        <SAVEIMAGE>
         51 bits of integer available. cscale = 2 ^ 17;// 3*17==51bits in 52-53bit double. sign bit is also used elsewhere. cscaleMax = 2 ^ 3;// biggest rgb packcolor handles // packcolor is inside the parallel assign to build 17 bit per color doubles; the // >8 bit per color resolution helps delay the scaling without loss of color. // unpackcolor is needed after the parallelassign. unpackcolor = Function( {pc}, {r, g, b}, r = Mod( pc, cscale ) / (cscale / cscaleMax - 1); pc = Floor( pc / cscale ); g = Mod( pc, cscale ) / (cscale / cscaleMax - 1); pc = Floor( pc / cscale ); b = Mod( pc, cscale ) / (cscale / cscaleMax - 1); Eval List( {r, g, b} ); ); finalImage=0; // a flag to recreate the animated gif // if you are going to use this for more than a simple gif-loop, // you could repackage this. For now it uses an "time" from 0 to 1 // to make a complete orbit of the camera. Shadertoy uses time "t" // and makes an angle from that; shadertoy is not typically making // a loop for a gif, but rather a mouse driven display. // using a power of 2 is not required for the step but does make the // begin and end match up; the <1.0 means the end frame is left out. for(time=0.0,time<1.0,time+=1/nframes, // y rotation (vertical on screen) is done over the angles. then // a small tilt on X to make the camera look down at the tiled floor. // then the camera is pulled back so the scene, which is near 0,0,0 // will be in view. Back means the Z axis; the wording around this // is always confusing! angle = time*2*pi(); anim_8=8*angle; anim_7=7*angle; anim_3=3*angle; anim_1=1*angle; camera = tranmat(0,0,-8)*getXrot(-.1 *2*pi()+0.06*sin(anim_1))*getYrot(anim_1); // the scene list is a list of lists... and the lists must be evaluated to store an efficient value. scene = Eval List( { // tranmat: Y positive down screen, z positive toward camera Eval List( {"torus", Expr( ptrep = pt[1]-12*round(pt[1]/12)||pt[2]-12*round(pt[2]/12)||pt[3]; // repeat the torus on the X and Z axis (rotated onto Y) https://iquilezles.org/articles/sdfrepetition/ sdTorus( ptrep, [2 1] ); ), Eval List( {"solid", RGB Color( "white" )} ), // Inverse( scalemat( 1, 1, 1 ) * tranmat( 0, 1/*down to the floor*/, 0 ) * rotmat(90,0,0))} ), // Eval List( {"floor", Expr( sdPlane( pt, [0 -1 0], 2.1 ) ), Eval List( {"checker", RGB Color( "green" )} ), // Identity( 4 )} )// } ); nspheres = 11;// add n bouncing spheres in a circle. the Y axis anim8 + p0 phases the bounces for( p=0,p
         <NSPHERES>
          maxt,i=1e99/*break*/ ); ); res = max(res,-1.0); 0.25*(1.0+res)*(1.0+res)*(2.0-res); ), // https://github.com/scratchapixel/scratchapixel-code/blob/main/perspective-and-orthographic-projection-matrix/geometry.h dotProduct = Function( {a, b}, // v2 or v3 x * v.x + y * v.y + z * v.z Sum( a :* b ) // scalar: how much the vecs a and b point in the same direction ), crossProduct = Function( {a, b}, // v3 only y * v.z - z * v.y, z * v.x - x * v.z, x * v.y - y * v.x a[2] * b[3] - a[3] * b[2] || a[3] * b[1] - a[1] * b[3] || a[1] * b[2] - a[2] * b[1]; // vector: perpendicular to both a and b ), // https://www.shadertoy.com/view/4dSBz3 and https://iquilezles.org/articles/normalsSDF/ // Calculate the normal by taking the central differences on the distance field. // for spheres there is a simpler way, probably torus too. And plane! // I'm keeping the code simple for now. // https://iquilezles.org/articles/normalsSDF/ - tetrahedron technique calcNormal = Function( {p}, p = p[1] || p[2] || p[3]; normalize( // this is a tetrahedron around p [1 -1 -1] * map( p + [.001 -.001 -.001] ) + // [-1 -1 1] * map( p + [-.001 -.001 .001] ) + // [-1 1 -1] * map( p + [-.001 .001 -.001] ) + // [1. 1 1.] * map( p + [.0010 .001 .0010] ) // ); // ), // mapFound = ., // global to remember what object the march ran into. // the map function tests p against every object in scene and returns the closest. map = Function( {p}, {i, result, tresult, pt}, p = p[1] |/ p[2] |/ p[3] |/ 1; result = 1e99; mapFound = .; For( i = 1, i <= N Items( scene ), i += 1, pt = scene[i][sceneDistanceMatrix] * p; // the torus rotate on X happens before the repeat operation, so the Z axis is Y. pt = pt[1] || pt[2] || pt[3]; tresult = Eval( scene[i][sceneDistanceExpr] ); If( tresult < result, result = tresult; mapFound = i; // remember. Not needed on majority of calls. ); ); result; ), // // // the scene list. the sceneDistanceExpr expr() should only use // functions that are in the parallel assign locals! // // first some indexes that explain how to interpret the scene list sceneDistanceName = 1, // sceneDistanceExpr = 2, // sceneDistanceMaterial = 3, // /**/sceneDistanceMaterial_pattern = 1, // /**/sceneDistanceMaterial_color = 2, // sceneDistanceMatrix = 4, // lightPosition=lightPosition, // lightPower=lightPower, // // no comma at end... scene=scene // }, // locals for each thread // // finally, the JSL that assigns elements of the array. Parallel Assign has // already chosen an element and supplies a scaled index; the .68 scale was // empirically chosen to look good. we cannot access the bitmap we are assigning // into from here, not even the old value about to be overwritten (a bug/flaw // in the implementation...we could use a copy of course). // bitmap[yImage( -.68, .68 ), xImage( -.68, .68 )] = (// // here begins pretty standard ray marching code; better to look up excellent explanations on the web. ro = 0 || 0 || 1 ; // ray origin at 0,0 this eye is 1 unit in front of the image plane at z=0 rd = (xImage || yImage || 0) - ro ; // ray direction, image plane is one z unit from the eye_origin rd = normalize( rd ) ; //normalize to length 1 t = 1 ; resultColor = -1 ; // background if nothing hit For( i = 0, i < 1024 & t < 1024, i += 1, // <512 is iteration limit, <200 is depth limit for nothing in background p = ro + rd * t; pi = invCamera * (p || 1)`; h = map( pi ); t += h; If( h < .001, object = mapFound; // capture before calcNormal reuses map() light = lightPosition; if(0,// 1: light attached to camera (needs work) light = invCamera * (light || 1)`; // light relative to camera light = light[[1 2 3]]`; ); // https://www.shadertoy.com/view/4dSBz3 ... // Calculate diffuse lighting by taking the dot product of // the light direction (light-p) and the normalVec. lightVec = normalize( light - pi[[1 2 3]]` /*p*/ ); normalVec = calcNormal( pi[[1 2 3]]` ); dif = clamp( dotProduct( normalVec, lightVec ), 0., 1. ); dif *= softShadow(pi,lightVec, .02/*min t*/, 30/*max t*/, .1/*width of light*/); // <<<< leave this out, get no shadows and a big speedup // Multiply by light intensity and divide by the square of the distance to the light. // a post processing step will tweak the lighting to get at least one bright pixel in some color. // if there is blow-out (light too bright) or banding (light too dark), adjust 1e0 up or down dif *= lightPower / dotProduct( light - p, light - p ); // 1e-5 ... 1e5 dif += ambient; // add a little ambient. For an early test case, .0001 kept shadows from going completely black. // https://iquilezles.org/articles/checkerfiltering/ not using his algorithm, rolled my own... If( scene[object][sceneDistanceMaterial][sceneDistanceMaterial_pattern] == "checker", // t is the distance to this object with the checker pattern. // as t gets bigger, the pattern should be less visible // amplitude is the product of the x and y axis sin waves and forms the tiles; *5 // makes the tile size (bigger makes smaller tiles.) Even raised to ^.4 power there // is some slope at the transition between tiles. bigdiv is a number between 1 and 2 // with the slope for the transition; smalldiv is always 1. divisor is interpolated // between smalldiv and bigdiv; t is the distance and chooses smalldiv when the floor is // far away, bigdiv up close. Smalldiv picks the middle value between the light and dark // tile color. Bigdiv makes dark darker and light lighter. Far away tiles are the average color, // and near the tile transitions are the average color and the result is somewhat anti-aliased. amplitude = sin(pi[1]*5) * sin(pi[3]*5); // 1,3 is the x-z plane the floor lies in <<< unfortunate, we have to know this is the floor. bigdiv = 1+abs(amplitude)^.4; // empirically, I like .4 better than .3 or .5 smalldiv=1; // empirical: the useful z-distance before aliasing happens. Formula from fit model. // 32x32 13 // 128x128 26 // 512x512 52 //zdistance = (-42.25) + 9.75 * log(xypix,2) + 1.625 * (log(xypix,2) - 7) * (log(xypix,2) - 7); divisor = interpolate(t, -1e99,bigdiv, 3,bigdiv, zdistance,smalldiv, 1e99,smalldiv); if(amplitude > 0, dif /= divisor; // , // dif *= divisor; // ) ); resultColor = Max( dif, 0 ); resultColor = resultColor ^ 0.4545; // Gamma correction, not sure where it comes from but several sources use .4545 i = 1e99; /* break */ ); ); If( resultColor < 0, // If( resultColor != -1, Show( resultColor ) ); // background, most likely RGB Color( .4, .5, .6 );// a JSL color is negative , /*else if */ Is Missing( resultColor ), // RGB Color( .8, .1, .8 )// error color, negative jsl color , // else a positive packed color, up to 3 bits of int and 14 bits fraction {red, green, blue} = Color To RGB( scene[object][sceneDistanceMaterial][sceneDistanceMaterial_color] ); packcolor( red * resultColor, green * resultColor, blue * resultColor ) // ; ) ; // ); // bitmap= expr );//ParallelAssign // there are two kinds of values in the bitmap array: positive packed values and negative JSL colors // leave the negative values alone and don't use them for scaling. Use the biggest value of all the // packed value to scale up/down to make the biggest 255 on the 8-bit rgb scale. this might be // brighter than intended. poscols = Loc( bitmap > 0 ); rmax = gmax = bmax = 0; // scale for briteness...find the max which might be as small as 1/32 or as large as 8 // negative values are jsl colors already and their intensity is not adjusted For Each( {i}, poscols, {red, green, blue} = unpackcolor( bitmap[i] ); rmax = Max( red, rmax ); gmax = Max( green, gmax ); bmax = Max( blue, bmax ); ); maxcol = Max( rmax, gmax, bmax ); Show( maxcol ); // all the frames should use the same adjustment if(0.140
          <MAXCOL><.203, maxcol check")); for each( {i}, poscols, {red, green, blue}="unpackcolor(" bitmap[i]="RGB" ); color( red maxcol, green blue addnewframe("p"||char(1e9+nframes*time)); save a numbered .png show( time,as date( today() ) );wait(.01); loop over time saveframes(8000 frames,99); ms. 8000ms the full loop. (hp time() - start) 1e6 < ode></MAXCOL>
         </NSPHERES>
        </SAVEIMAGE>

GIF - 12 MB	WebP - 10 MB

L'antica compressione delle immagini GIF produceva un file più grande del 20% con un marcato banding di colore. Il WebP ha un aspetto fantastico. Il toro ha un SDF, ripetuto a costi molto bassi. Le sfere colorate hanno ciascuna un SDF separato e il pavimento piastrellato ha un SDF. Le piastrelle del pavimento sfumano in lontananza per evitare artefatti di alias scintillanti. Le ombre morbide combinano due idee di ombreggiatura. L'illuminazione è fissa sul modello e la luce e il modello ruotano davanti alla telecamera. Le sfere rimbalzano senza mai toccare il pavimento. L'angolazione della telecamera cambia per mostrare il cielo durante parte della rotazione. La GIF è stata prodotta dal GIF writer di JMP, non da quello di PIL. Esistono molti modi per ottimizzare una GIF; JMP e PIL faranno scelte diverse per immagini diverse.

Non ho intenzione di fare altro con il codice di ray marching perché è troppo lento senza un programma compilato che gira su GPU. Se ne avessi davvero bisogno, potresti ottenere un miglioramento 10 volte superiore omettendo le ombre, semplificando il pavimento e calcolando direttamente le normali alla superficie per le primitive semplici (senza usare quattro marce aggiuntive). Continueresti a considerare minuti/frame, non frame/secondo.

Scopri di più...

https://www.tylerbovenzi.com/RayMarch/ - belle foto
https://www.shadertoy.com/view/4dSBz3 - semplice esempio
https://www.shadertoy.com/view/4dSfRc - tutorial
https://iquilezles.org/articles/rmshadows/ - ombre morbide
https://iquilezles.org/articles/checkerfiltering/ - scacchiera
https://iquilezles.org/articles/sdfrepetition/ - ripetizione
https://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/ - rotazione della matrice, ecc.
https://iquilezles.org/articles/distfunctions/ - elenco delle funzioni di distanza
https://www.shadertoy.com/view/Xds3zN - visualizzazione delle funzioni di distanza
https://www.shadertoy.com/view/WtGfRV - Tutorial SIGGRAPH RayMarching