920180_fr-FR

liliconcom

Ray Marching et WebP

Cet article présente une méthode beaucoup trop lente pour effectuer un lancer de rayons et une méthode Python parfaitement correcte pour créer un WebP animé (comme un GIF animé, mais tellement plus joli !).

Partie 1 : formats de fichiers

Ce script JSL utilise la bibliothèque Python PIL pour créer des fichiers de test afin de comparer la taille, la vitesse et la qualité des fichiers PNG , JPEG et WebP . Le format GIF sera traité dans la deuxième partie. Pour l'exécuter, indiquez 0 ou 1 sur la deuxième ligne pour générer chaque image. Les valeurs RMSE correspondent à l'erreur moyenne entre les pixels décodés et les pixels sources, exprimée en unités de canal de couleur de 0 à 255. L'erreur augmente avec le taux de compression, ce qui peut entraîner des artefacts ou un flou dans les images fortement compressées. Les images PNG utilisent une compression sans perte, ce qui leur confère une RMSE de 0.

Les points violets WebP présentent systématiquement une erreur quadratique moyenne (RMSE) inférieure à celle des points rouges JPEG, et ce, pour presque tous les niveaux de compression. Leur compression est environ 20 fois plus longue, ce qui peut se justifier si les images sont destinées à être conservées indéfiniment.

Voir plus...

{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]} )} )
	)
);

Enregistrement d'une image réelle. Les points orange et bleus au-delà de 3 Mo indiquent que les fichiers PNG ne parviennent pas à bien compresser ces données. L' image originale a une résolution de 1264 x 2208 pixels, soit 2 790 912 pixels de 3 octets chacun (non compressée). Pour (presque) n'importe quelle taille de fichier, le format WebP présente une erreur quadratique moyenne (RMSE) plus faible (meilleure qualité) que le JPEG de même taille, mais le temps de compression (taille du marqueur) est beaucoup plus long.

Enregistrement d'une image numérique aux contours nets. D'après ces données, le format PNG offre une meilleure qualité d'image que le format JPG. Cependant, de nombreux utilisateurs se contenteront de faibles valeurs RMSE, inférieures à 5 environ, pour les deux formats. L'image originale est de 2 000 × 2 000 pixels, soit 4 000 000 pixels de 3 octets chacun (non compressée). Le format WebP offre une meilleure qualité que le JPEG de même taille, mais sa compression est plus longue.

Voici un aperçu rapide des temps de lecture ; ils concernent uniquement le lecteur PIL en Python, et non Firefox ou tout autre navigateur affichant les images. Il semblerait que le format WebP soit trois fois plus lent à charger que le JPEG.

Aucun des formats WebP, JPEG ou PNG ne s'impose clairement (pour l'instant. Poursuivez votre lecture). JPEG offre une compression rapide, WebP une compression légère et PNG est sans perte. Personnellement, je préfère utiliser PNG pour la plupart des graphiques générés par ordinateur et (du moins par le passé) JPEG pour les images réelles. La prise en charge des images par JMP 19 n'inclut pas le format WebP sans l'utilisation de Python.

Partie 2 : formats de fichiers animés

Les formats WebP et GIF permettent tous deux de stocker plusieurs images pouvant être lues en boucle sans son. JMP peut créer directement un GIF animé et, avec Python et PIL, un WebP animé. Pour aller plus loin, le format WebP, beaucoup plus récent, surpasse largement la technologie GIF, bien plus ancienne… voir les deux images à la fin.

Il y a quelques années, je suis tombé par hasard sur https://www.shadertoy.com/ (n'y allez pas, vous risqueriez de ne pas en ressortir de sitôt !). Les shaders sont de minuscules programmes qui s'exécutent sur les cartes graphiques grâce aux GPU. Chaque pixel de l'écran est coloré en fonction du résultat du programme shader. Plus il y a de GPU, plus le nombre de pixels est élevé, et plus la vitesse d'affichage est grande. Ce site est fascinant car on peut modifier le programme shader, qui ressemble à du C, et le réexécuter dans son navigateur. Le navigateur a alors accès aux GPU, et c'est vraiment très rapide.

L'idée des shaders était initialement conçue pour colorer des triangles 3D, chaque sommet ayant une couleur (en fonction du matériau, de l'orientation, de l'éclairage, etc.). Les pixels (généralement appelés fragments) du triangle sont interpolés entre les sommets. Cependant, un shader n'est pas obligé d'utiliser un triangle 3D ; il peut calculer une couleur de n'importe quelle manière. Certains exemples de Shadertoy calculent une couleur en fonction des coordonnées xy des pixels et de l'heure actuelle (pour animer, par exemple, le mouvement des vagues à la surface de l'océan).

Les exemples les plus intéressants utilisent une technique appelée « ray marching ». De nombreux tutoriels de qualité expliquent le ray marching et les fonctions de distance signées (SDF). (Une SDF d'un objet renvoie une distance positive à sa surface, sauf si le point est entré dans l'objet, auquel cas la distance est négative.) En résumé, le ray marching consiste à placer un écran virtuel de pixels devant l'œil/la caméra et à suivre un rayon partant de l'œil, traversant un pixel et parcourant une série de fonctions de distance signées. Pour chaque SDF, on interroge : « À quelle distance se trouve ce point du rayon ? ». Une sphère, un cube, un tore, un plan, etc., possèdent tous des SDF simples. Le principe du ray marching est de trouver la distance minimale parmi toutes les SDF et de se déplacer d'autant le long du rayon, et de répéter l'opération jusqu'à ce que cette distance minimale soit très petite. Chaque pixel nécessite généralement une douzaine d'itérations pour s'approcher d'un objet représenté par une SDF. Cette même méthode permet également de déterminer si le point sur la SDF est ombragé et quelle est la pente de la surface (qui détermine la quantité de lumière réfléchie vers l'œil).

Voici le JSL permettant de créer un GIF animé et un WebP animé à partir d'un modèle 3D autour duquel une caméra se déplace. La plus grande partie du code concerne le lancer de rayons ; vous n'en aurez pas besoin. Les fonctions qui vous intéressent sont `addNewFrame`, qui crée un fichier dans un répertoire à partir d'une variable globale nommée `bitmap`, et `saveFrames`, qui récupère tous les fichiers du répertoire et génère le WebP ou le GIF. Vous devrez les adapter à vos besoins. Le reste est spécifique au lancer de rayons et présente un intérêt pédagogique plus qu'utile (car il est lent).

Voir plus...

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 Mo	WebP - 10 Mo

L'ancienne compression GIF a produit un fichier 20 % plus volumineux avec un fort effet de bandes de couleurs. Le format WebP est excellent. Le tore possède un seul SDF, répété à très faible coût. Chaque sphère colorée possède son propre SDF, et le sol carrelé également. Les carreaux du sol s'estompent au loin pour éviter les artefacts d'aliasing. Les ombres douces combinent deux techniques d'ombrage. L'éclairage est fixe sur le modèle, et la lumière et le modèle tournent devant la caméra. Les sphères rebondissent sans jamais toucher le sol. L'angle de la caméra change pour montrer le ciel pendant une partie de la rotation. Le GIF a été produit par l'outil d'écriture GIF de JMP, et non par celui de PIL. Il existe de nombreuses façons d'optimiser un GIF ; JMP et PIL font des choix différents selon les images.

Je ne prévois pas de modifier davantage le code de lancer de rayons, car il est beaucoup trop lent sans un programme compilé exécuté sur GPU. Si vous en avez vraiment besoin, vous pourriez obtenir un gain d'un facteur 10 en supprimant les ombres, en simplifiant le sol et en calculant directement les normales de surface pour les primitives simples (sans utiliser quatre lancers de rayons supplémentaires). Le temps de calcul resterait de l'ordre de plusieurs minutes par image, et non d'images par seconde.

Voir plus...

https://www.tylerbovenzi.com/RayMarch/ - belles photos
https://www.shadertoy.com/view/4dSBz3 - exemple simple
https://www.shadertoy.com/view/4dSfRc - tutoriel
https://iquilezles.org/articles/rmshadows/ - ombres douces
https://iquilezles.org/articles/checkerfiltering/ - damier
https://iquilezles.org/articles/sdfrepetition/ - répétition
https://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/ - rotation de matrices, etc.
https://iquilezles.org/articles/distfunctions/ - liste des fonctions de distance
https://www.shadertoy.com/view/Xds3zN - Affichage des fonctions de distance
https://www.shadertoy.com/view/WtGfRV - Tutoriel SIGGRAPH RayMarching