lhark/alchemist
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
alchemist/js/fragment.js
lhark a3979b9300 Ajout de transformations, css bootstrap 
Les fichiers de resources ont été bougés dans leur dossiers
propres (css, js, fonts).
La position de la souris dans le canvas est maintenant correcte quelle
que soit la position du canvas dans la page.
2017-12-09 23:53:20 -05:00

466 lines
18 KiB
JavaScript
Raw Blame History

function resultatSucces(span1, span2, msg = "Le fragment passe ce test.")
{
document.getElementById(span1).innerHTML = "Succès :";
document.getElementById(span1).className = "green";
document.getElementById(span2).innerHTML = msg;
document.getElementById(span2).className = "green";
}
function resultatEchec(span1, span2, msg = "Le fragment ne passe pas ce test et il n'ira pas plus loin.")
{
document.getElementById(span1).innerHTML = "Échec :";
document.getElementById(span1).className = "red";
document.getElementById(span2).innerHTML = msg;
document.getElementById(span2).className = "red";
}
function resultatDesactive(span1, span2, msg = "")
{
document.getElementById(span1).innerHTML = "(désactivé)";
document.getElementById(span1).className = "";
document.getElementById(span2).innerHTML = msg;
document.getElementById(span2).className = "";
}
function resultatNonApplicable(span1, span2, msg = "")
{
document.getElementById(span1).innerHTML = "(non appliqué)";
document.getElementById(span1).className = "";
document.getElementById(span2).innerHTML = msg;
document.getElementById(span2).className = "";
}
function clamp(v,vmin,vmax)
{
return( v < vmin ? vmin : v > vmax ? vmax : v );
}
function calculerPixel()
{
// les attributs du fragment courant
var zFrag = document.getElementById('zFrag').value;
var rFrag = document.getElementById('rFrag').value;
var gFrag = document.getElementById('gFrag').value;
var bFrag = document.getElementById('bFrag').value;
var aFrag = document.getElementById('aFrag').value;
// les valeurs dans le tampon
var zTamp = document.getElementById('zTamp').value;
var rTamp = document.getElementById('rTamp').value;
var gTamp = document.getElementById('gTamp').value;
var bTamp = document.getElementById('bTamp').value;
var aTamp = document.getElementById('aTamp').value;
var sTamp = document.getElementById('sTamp').value;
// les valeurs courantes
var zCour = zFrag;
var rCour = rFrag;
var gCour = gFrag;
var bCour = bFrag;
var aCour = aFrag;
var sCour = sTamp;
// tous les tests sont OK?
var testsOK = true; // si aucun test n'est actif, alors le fragment deviendra un pixel
//
// test du stencil
//
var stencilSucces = true; // par défaut
var stencilEnabled = document.getElementById('stencilEnabled').value;
document.getElementById('stencilfunc').disabled = !( stencilEnabled === "Enable" );
document.getElementById('ref').disabled = !( stencilEnabled === "Enable" );
document.getElementById('mask').disabled = !( stencilEnabled === "Enable" );
document.getElementById('sfail').disabled = !( stencilEnabled === "Enable" );
document.getElementById('dpfail').disabled = !( stencilEnabled === "Enable" );
document.getElementById('dppass').disabled = !( stencilEnabled === "Enable" );
if ( stencilEnabled === "Enable" )
{
if ( testsOK )
{
var stencilfunc = document.getElementById('stencilfunc').value;
var ref = document.getElementById('ref').value;
var mask = document.getElementById('mask').value;
document.getElementById('ref').disabled = ( stencilfunc === "NEVER" || stencilfunc === "ALWAYS" );
document.getElementById('mask').disabled = ( stencilfunc === "NEVER" || stencilfunc === "ALWAYS" );
switch ( stencilfunc ) {
case "NEVER": stencilSucces = false; break;
case "LESS": stencilSucces = ( ref & mask ) < ( sTamp & mask ); break;
case "LEQUAL": stencilSucces = ( ref & mask ) <= ( sTamp & mask ); break;
case "GREATER": stencilSucces = ( ref & mask ) > ( sTamp & mask ); break;
case "GEQUAL": stencilSucces = ( ref & mask ) >= ( sTamp & mask ); break;
case "EQUAL": stencilSucces = ( ref & mask ) == ( sTamp & mask ); break;
case "NOTEQUAL": stencilSucces = ( ref & mask ) != ( sTamp & mask ); break;
case "ALWAYS": stencilSucces = true; break;
}
testsOK &= stencilSucces;
if ( stencilSucces )
resultatSucces('stencilSucces','stencilMessage');
else
resultatEchec('stencilSucces','stencilMessage');
}
else
resultatNonApplicable('stencilSucces','stencilMessage'); // ne se produira pas dans cet exemple
}
else
resultatDesactive('stencilSucces','stencilMessage');
//
// test de profondeur
//
var depthSucces = true; // par défaut
var depthEnabled = document.getElementById('depthEnabled').value;
document.getElementById('depthfunc').disabled = !( depthEnabled === "Enable" );
if ( depthEnabled === "Enable" )
{
if ( testsOK )
{
var depthfunc = document.getElementById('depthfunc').value;
switch ( depthfunc ) {
case "NEVER": depthSucces = false; break;
case "LESS": depthSucces = zFrag < zTamp; break;
case "LEQUAL": depthSucces = zFrag <= zTamp; break;
case "GREATER": depthSucces = zFrag > zTamp; break;
case "GEQUAL": depthSucces = zFrag >= zTamp; break;
case "EQUAL": depthSucces = zFrag == zTamp; break;
case "NOTEQUAL": depthSucces = zFrag != zTamp; break;
case "ALWAYS": depthSucces = true; break;
}
testsOK &= depthSucces;
if ( depthSucces )
resultatSucces('depthSucces','depthMessage');
else
resultatEchec('depthSucces','depthMessage');
}
else
resultatNonApplicable('depthSucces','depthMessage');
}
else
resultatDesactive('depthSucces','depthMessage',"(Le tampon de profondeur ne sera pas modifié.)");
//
// opération sur le stencil selon les résultats du test de stencil et du test de profondeur
//
if ( stencilEnabled === "Enable" )
{
var sfail = document.getElementById('sfail').value;
var dpfail = document.getElementById('dpfail').value;
var dppass = document.getElementById('dppass').value;
if ( !stencilSucces )
{
switch ( sfail ) {
case "KEEP": sCour = sTamp; break;
case "ZERO": sCour = 0; break;
case "REPLACE": sCour = ref & mask; break;
case "INCR": sCour = sTamp; sCour++; break;
case "DECR": sCour = sTamp; sCour--; break;
case "INVERT": sCour = -sTamp; break;
}
}
else if ( !depthSucces )
{
switch ( dpfail ) {
case "KEEP": sCour = sTamp; break;
case "ZERO": sCour = 0; break;
case "REPLACE": sCour = ref & mask; break;
case "INCR": sCour = sTamp; sCour++; break;
case "DECR": sCour = sTamp; sCour--; break;
case "INVERT": sCour = -sTamp; break;
}
}
else
{
switch ( dppass ) {
case "KEEP": sCour = sTamp; break;
case "ZERO": sCour = 0; break;
case "REPLACE": sCour = ref & mask; break;
case "INCR": sCour = sTamp; sCour++; break;
case "DECR": sCour = sTamp; sCour--; break;
case "INVERT": sCour = -sTamp; break;
}
}
}
//
// fusion de couleurs
//
var blendEnabled = document.getElementById('blendEnabled').value;
document.getElementById('sfactor').disabled = !( blendEnabled === "Enable" );
document.getElementById('dfactor').disabled = !( blendEnabled === "Enable" );
if ( blendEnabled === "Enable" )
{
if ( testsOK )
{
var sfactor = document.getElementById('sfactor').value;
var dfactor = document.getElementById('dfactor').value;
var sr = 0.0, sg = 0.0, sb = 0.0, sa = 0.0;
var dr = 0.0, dg = 0.0, db = 0.0, da = 0.0;
switch ( sfactor ) {
case "GL_ZERO":
sr = ( 0.0 ) * rFrag;
sg = ( 0.0 ) * gFrag;
sb = ( 0.0 ) * bFrag;
sa = ( 0.0 ) * aFrag;
break;
case "GL_ONE":
sr = ( 1.0 ) * rFrag;
sg = ( 1.0 ) * gFrag;
sb = ( 1.0 ) * bFrag;
sa = ( 1.0 ) * aFrag;
break;
case "GL_SRC_COLOR":
sr = ( rFrag ) * rFrag;
sg = ( gFrag ) * gFrag;
sb = ( bFrag ) * bFrag;
sa = ( aFrag ) * aFrag;
break;
case "GL_ONE_MINUS_SRC_COLOR":
sr = ( 1.0 - rFrag ) * rFrag;
sg = ( 1.0 - gFrag ) * gFrag;
sb = ( 1.0 - bFrag ) * bFrag;
sa = ( 1.0 - aFrag ) * aFrag;
break;
case "GL_DST_COLOR":
sr = ( rTamp ) * rFrag;
sg = ( gTamp ) * gFrag;
sb = ( bTamp ) * bFrag;
sa = ( aTamp ) * aFrag;
break;
case "GL_ONE_MINUS_DST_COLOR":
sr = ( 1.0 - rTamp ) * rFrag;
sg = ( 1.0 - gTamp ) * gFrag;
sb = ( 1.0 - bTamp ) * bFrag;
sa = ( 1.0 - aTamp ) * aFrag;
break;
case "GL_SRC_ALPHA":
sr = ( aFrag ) * rFrag;
sg = ( aFrag ) * gFrag;
sb = ( aFrag ) * bFrag;
sa = ( aFrag ) * aFrag;
break;
case "GL_ONE_MINUS_SRC_ALPHA":
sr = ( 1.0 - aFrag ) * rFrag;
sg = ( 1.0 - aFrag ) * gFrag;
sb = ( 1.0 - aFrag ) * bFrag;
sa = ( 1.0 - aFrag ) * aFrag;
break;
case "GL_DST_ALPHA":
sr = ( aTamp ) * rFrag;
sg = ( aTamp ) * gFrag;
sb = ( aTamp ) * bFrag;
sa = ( aTamp ) * aFrag;
break;
case "GL_ONE_MINUS_DST_ALPHA":
sr = ( 1.0 - aTamp ) * rFrag;
sg = ( 1.0 - aTamp ) * gFrag;
sb = ( 1.0 - aTamp ) * bFrag;
sa = ( 1.0 - aTamp ) * aFrag;
break;
}
switch ( dfactor ) {
case "GL_ZERO":
dr = ( 0.0 ) * rTamp;
dg = ( 0.0 ) * gTamp;
db = ( 0.0 ) * bTamp;
da = ( 0.0 ) * aTamp;
break;
case "GL_ONE":
dr = ( 1.0 ) * rTamp;
dg = ( 1.0 ) * gTamp;
db = ( 1.0 ) * bTamp;
da = ( 1.0 ) * aTamp;
break;
case "GL_SRC_COLOR":
dr = ( rFrag ) * rTamp;
dg = ( gFrag ) * gTamp;
db = ( bFrag ) * bTamp;
da = ( aFrag ) * aTamp;
break;
case "GL_ONE_MINUS_SRC_COLOR":
dr = ( 1.0 - rFrag ) * rTamp;
dg = ( 1.0 - gFrag ) * gTamp;
db = ( 1.0 - bFrag ) * bTamp;
da = ( 1.0 - aFrag ) * aTamp;
break;
case "GL_DST_COLOR":
dr = ( rTamp ) * rTamp;
dg = ( gTamp ) * gTamp;
db = ( bTamp ) * bTamp;
da = ( aTamp ) * aTamp;
break;
case "GL_ONE_MINUS_DST_COLOR":
dr = ( 1.0 - rTamp ) * rTamp;
dg = ( 1.0 - gTamp ) * gTamp;
db = ( 1.0 - bTamp ) * bTamp;
da = ( 1.0 - aTamp ) * aTamp;
break;
case "GL_SRC_ALPHA":
dr = ( aFrag ) * rTamp;
dg = ( aFrag ) * gTamp;
db = ( aFrag ) * bTamp;
da = ( aFrag ) * aTamp;
break;
case "GL_ONE_MINUS_SRC_ALPHA":
dr = ( 1.0 - aFrag ) * rTamp;
dg = ( 1.0 - aFrag ) * gTamp;
db = ( 1.0 - aFrag ) * bTamp;
da = ( 1.0 - aFrag ) * aTamp;
break;
case "GL_DST_ALPHA":
dr = ( aTamp ) * rTamp;
dg = ( aTamp ) * gTamp;
db = ( aTamp ) * bTamp;
da = ( aTamp ) * aTamp;
break;
case "GL_ONE_MINUS_DST_ALPHA":
dr = ( 1.0 - aTamp ) * rTamp;
dg = ( 1.0 - aTamp ) * gTamp;
db = ( 1.0 - aTamp ) * bTamp;
da = ( 1.0 - aTamp ) * aTamp;
break;
}
rCour = clamp( sr+dr, 0.0, 1.0 );
gCour = clamp( sg+dg, 0.0, 1.0 );
bCour = clamp( sb+db, 0.0, 1.0 );
aCour = clamp( sa+da, 0.0, 1.0 );
resultatSucces('blendSucces','blendMessage','Couleurs fusionnées.');
}
else
resultatNonApplicable('blendSucces','blendMessage');
}
else
resultatDesactive('blendSucces','blendMessage');
//
// opérations logiques
//
// var logicEnabled = document.getElementById('logicEnabled').value;
// document.getElementById('opcode').disabled = !( logicEnabled === "Enable" );
// if ( logicEnabled === "Enable" )
// {
// if ( testsOK )
// {
// var opcode = document.getElementById('opcode').value;
// switch ( opcode ) {
// case "GL_CLEAR":
// rCour = 0.0;
// gCour = 0.0;
// bCour = 0.0;
// aCour = 0.0;
// break;
// case "GL_SET":
// rCour = 1.0;
// gCour = 1.0;
// bCour = 1.0;
// aCour = 1.0;
// break;
// case "GL_COPY":
// rCour = rCour;
// gCour = gCour;
// bCour = bCour;
// aCour = aCour;
// break;
// case "GL_COPY_INVERTED":
// rCour = 1-rCour;
// gCour = 1-gCour;
// bCour = 1-bCour;
// aCour = 1-aCour;
// break;
// case "GL_NOOP":
// rCour = rTamp;
// gCour = gTamp;
// bCour = bTamp;
// aCour = aTamp;
// break;
// case "GL_INVERT":
// rCour = 1-rTamp;
// gCour = 1-gTamp;
// bCour = 1-bTamp;
// aCour = 1-aTamp;
// break;
// case "GL_AND":
// rCour = rCour & rTamp;
// gCour = gCour & gTamp;
// bCour = bCour & bTamp;
// aCour = aCour & aTamp;
// break;
// case "GL_NAND":
// rCour = 1-( rCour & rTamp );
// gCour = 1-( gCour & gTamp );
// bCour = 1-( bCour & bTamp );
// aCour = 1-( aCour & aTamp );
// break;
// case "GL_OR":
// rCour = rCour | rTamp;
// gCour = gCour | gTamp;
// bCour = bCour | bTamp;
// aCour = aCour | aTamp;
// break;
// case "GL_NOR":
// rCour = 1-( rCour | rTamp );
// gCour = 1-( gCour | gTamp );
// bCour = 1-( bCour | bTamp );
// aCour = 1-( aCour | aTamp );
// break;
// case "GL_XOR":
// //rCour = (( (parseInt(rCour*256)%255) ^ (parseInt(rTamp*256)&255) ) & 255 )/256;
// rCour = rCour ^ rTamp;
// gCour = gCour ^ gTamp;
// bCour = bCour ^ bTamp;
// aCour = aCour ^ aTamp;
// break;
// case "GL_EQUIV":
// rCour = 1-( rCour ^ rTamp );
// gCour = 1-( gCour ^ gTamp );
// bCour = 1-( bCour ^ bTamp );
// aCour = 1-( aCour ^ aTamp );
// break;
// case "GL_AND_REVERSE":
// rCour = rCour & ~rTamp;
// gCour = gCour & ~gTamp;
// bCour = bCour & ~bTamp;
// aCour = aCour & ~aTamp;
// break;
// case "GL_AND_INVERTED":
// rCour = ~rCour & rTamp;
// gCour = ~gCour & gTamp;
// bCour = ~bCour & bTamp;
// aCour = ~aCour & aTamp;
// break;
// case "GL_OR_REVERSE":
// rCour = rCour | ~rTamp;
// gCour = gCour | ~gTamp;
// bCour = bCour | ~bTamp;
// aCour = aCour | ~aTamp;
// break;
// case "GL_OR_INVERTED":
// rCour = ~rCour | rTamp;
// gCour = ~gCour | gTamp;
// bCour = ~bCour | bTamp;
// aCour = ~aCour | aTamp;
// break;
// }
// resultatSucces('logicSucces','logicMessage','Opération appliuquée.');
// }
// else
// resultatNonApplicable('logicSucces','logicMessage');
// }
// else
// resultatDesactive('logicSucces','logicMessage');
//
// FIN: tous les tests sont passés; assigner les valeurs aux tampons
//
if ( testsOK )
{
document.getElementById('zFin').value = ( depthEnabled === "Enable" ) ? zCour : zTamp;
document.getElementById('rFin').value = clamp( rCour, 0.0, 1.0 );
document.getElementById('gFin').value = clamp( gCour, 0.0, 1.0 );
document.getElementById('bFin').value = clamp( bCour, 0.0, 1.0 );
document.getElementById('aFin').value = clamp( aCour, 0.0, 1.0 );
}
else
{
document.getElementById('zFin').value = zTamp;
document.getElementById('rFin').value = clamp( rTamp, 0.0, 1.0 );
document.getElementById('gFin').value = clamp( gTamp, 0.0, 1.0 );
document.getElementById('bFin').value = clamp( bTamp, 0.0, 1.0 );
document.getElementById('aFin').value = clamp( aTamp, 0.0, 1.0 );
}
document.getElementById('sFin').value = sCour;
}
Reference in a new issue View git blame Copy permalink