920180_es-ES

liliconcom

Ray Marching y WebP

Esta publicación muestra una forma demasiado lenta de hacer marcha de rayos y una forma perfectamente buena en Python de hacer un WebP animado (como un GIF animado, ¡pero mucho mejor!).

Parte 1: formatos de archivo

Este JSL usa la biblioteca PIL de Python para crear archivos de prueba que comparan el tamaño, la velocidad y la calidad de archivos PNG , JPEG y WebP . GIF se encuentra en la parte 2. Si desea ejecutarlo, use 0 o 1 en la segunda línea para crear cada imagen. Los valores RMSE son el error promedio de los píxeles decodificados menos los píxeles de origen en unidades de canal de color de 0 a 255. El error aumenta con la compresión y produce artefactos o borrosidad en imágenes muy comprimidas. Las imágenes PNG utilizan una compresión sin pérdida que resulta en un RMSE de 0.0.

Los puntos WebP morados tienen un RMSE bastante más bajo que los puntos JPEG rojos en casi todos los niveles de compresión. Además, tardan aproximadamente 20 veces más en comprimirse, lo que podría valer la pena si las imágenes se almacenarán indefinidamente.

Ver más...

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

Guardando una imagen real. Los puntos naranjas y azules que superan los 3 MB de tamaño de disco muestran que los archivos PNG no comprimen bien estos datos. El original tiene unas dimensiones de 1264 x 2208 = 2 790 912 píxeles de 3 bytes cada uno (sin comprimir). Para casi cualquier tamaño de archivo, WebP tiene un RMSE menor (mejor calidad) que un JPEG del mismo tamaño, pero el tiempo de compresión (tamaño del marcador) es mucho mayor.

Guardando una imagen de computadora con bordes definidos. Con estos datos, PNG supera a JPG en la calidad de imagen. Sin embargo, muchos usuarios se conformarán con valores RMSE bajos, inferiores a 5, para cualquier tipo de imagen. El original es de 2000x2000 = 4 000 000 píxeles de 3 bytes cada uno (sin comprimir). Nuevamente, WebP ofrece mayor calidad que JPEG del mismo tamaño, pero tarda más en comprimirse.

Aquí tienes un vistazo rápido a los tiempos de lectura; solo se aplican al lector PIL en Python, no a Firefox ni al navegador que muestre las imágenes. Parece que WebP tarda tres veces más en cargar que JPEG.

Ni WebP, ni JPEG ni PNG son claramente mejores (todavía. Sigue leyendo). JPEG se comprime rápido, WebP se comprime a un tamaño pequeño y PNG no tiene pérdidas. Personalmente, prefiero usar PNG para la mayoría de los gráficos generados por computadora y (al menos en el pasado) JPEG para imágenes reales. La compatibilidad con imágenes de JMP 19 no incluye WebP sin usar Python.

Parte 2: formatos de archivos animados

Tanto los formatos WebP como GIF permiten almacenar múltiples imágenes que se pueden reproducir en bucle sin sonido. JMP puede crear directamente un GIF animado y, con Python+PIL, un WebP animado. Si desea ir un paso más allá, el mucho más reciente WebP supera con creces la antigua tecnología GIF... vea las dos imágenes al final.

Hace varios años me topé con https://www.shadertoy.com/ (¡no busques, puede que no vuelvas en un tiempo!). Los shaders son pequeños programas que se ejecutan en tarjetas gráficas usando las GPU. Cada píxel de la pantalla se colorea según la salida del programa shader. Más GPU generan más píxeles, más rápido. El sitio es fascinante porque puedes modificar el programa shader, similar a C, y volver a ejecutarlo en tu navegador. Tu navegador tiene acceso a las GPU y es realmente rápido.

La idea original del shader era colorear triángulos 3D donde cada esquina tiene un color (según el material, la orientación, la iluminación, etc.). Los píxeles (generalmente llamados fragmentos) del triángulo se interpolan entre las esquinas. Sin embargo, no es necesario que un shader use un triángulo 3D; puede calcular el color como desee. Algunos ejemplos de shadertoy calculan el color basándose en las coordenadas xy de los píxeles y la hora actual (para generar una animación, por ejemplo, de un movimiento similar al de las olas en el océano).

Los ejemplos más interesantes utilizan una idea llamada "marcha de rayos". Existen numerosos tutoriales excelentes sobre marcha de rayos y funciones de distancia con signo. (Una función de distancia con signo (SDF) para un objeto devuelve una distancia positiva desde su superficie, a menos que el punto haya entrado en ella; en ese caso, una distancia negativa). En resumen, la marcha de rayos coloca una pantalla virtual de píxeles frente al ojo/cámara y sigue un rayo desde el ojo a través de un píxel hasta un conjunto de funciones de distancia con signo, preguntando a cada SDF "¿A qué distancia está este punto del rayo de ti?". Una esfera, un cubo, un toro, un plano, etc., tienen SDF simples. La clave de la marcha de rayos reside en encontrar la respuesta mínima de todas las SDF, recorrer esa distancia a lo largo del rayo y repetir hasta que la distancia mínima sea bastante pequeña. Cada píxel suele requerir una docena de iteraciones para acercarse sigilosamente a un objeto representado por una SDF. Este mismo estilo de marcha también permite descubrir si el punto de la SDF está sombreado y cuál es la pendiente de la superficie (lo que determina cuánta luz rebota hacia el ojo).

Aquí está el JSL para crear tanto el GIF animado como el WebP animado a partir de un modelo 3D con una cámara moviéndose a su alrededor. La mayor parte es el código para la marcha de rayos; no lo necesitará. Las funciones que necesita son addNewFrame, que crea un archivo en un directorio a partir de una variable global llamada bitmap, y saveFrames, que toma todos los archivos del directorio y crea el WebP o el GIF. Deberá modificarlas según sus necesidades. Todo lo demás es específico de la marcha de rayos y es más educativo que útil (porque es lento).

Ver más...

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

La antigua compresión de imágenes GIF generó un archivo un 20 % más grande con bandas de color pronunciadas. El WebP se ve genial. El toro tiene un SDF, repetido a muy bajo costo. Cada esfera de colores tiene un SDF independiente, y el suelo de baldosas también. Las baldosas se difuminan en la distancia para evitar artefactos de alias centelleantes. Las sombras suaves combinan dos ideas de sombreado. La iluminación está fijada al modelo, y tanto la luz como el modelo giran frente a la cámara. Las esferas rebotan sin tocar el suelo. El ángulo de la cámara cambia para mostrar el cielo durante parte de la rotación. El GIF fue creado por el programador de GIF de JMP, no por el de PIL. Hay muchas maneras de optimizar un GIF; JMP y PIL tomarán decisiones diferentes para cada imagen.

No planeo hacer nada más con el código de marcha de rayos porque es demasiado lento sin un programa compilado ejecutándose en GPU. Si realmente lo necesitaras, podrías obtener una mejora de 10 veces eliminando las sombras, simplificando el suelo y calculando directamente las normales de superficie para primitivas simples (sin usar cuatro marchas adicionales). Seguirías viendo minutos por fotograma, no fotogramas por segundo.

Ver más...

https://www.tylerbovenzi.com/RayMarch/ - buenas fotos
https://www.shadertoy.com/view/4dSBz3 - ejemplo sencillo
https://www.shadertoy.com/view/4dSfRc - tutorial
https://iquilezles.org/articles/rmshadows/ - sombras suaves
https://iquilezles.org/articles/checkerfiltering/ - tablero de ajedrez
https://iquilezles.org/articles/sdfrepetition/ - repetición
https://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/ - rotación de matrices, etc.
https://iquilezles.org/articles/distfunctions/ - lista de funciones de distancia
https://www.shadertoy.com/view/Xds3zN - visualización de funciones de distancia
https://www.shadertoy.com/view/WtGfRV - Tutorial de SIGGRAPH RayMarching