Skip to content

Commit

Permalink
Merge branch 'alpha'
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakedowns
jakedowns committed Jan 17, 2024
2 parents 07d6424 + e82e79e commit 702b19e
Show file tree
Hide file tree
Showing 2 changed files with 266 additions and 84 deletions.
277 changes: 212 additions & 65 deletions public/pixel-mixer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -763,19 +763,27 @@ <h1>Pixel Mixer Demo</h1>
window.mouseLerping = new THREE.Vector4(window.innerWidth/2,window.innerHeight/2, 0, 0);
window.iMouseWheel = new THREE.Vector4(0, 10, 0, 0);

let DEFAULT_U_VALUES = {
// compatibility uniforms
iTime: { value: 1.0 },
iChannel0: { value: inputTextureA.texture },
iChannel1: { value: inputTextureB.texture },
// iChannel2: { value: outputTextureB },
iResolution: { value: new THREE.Vector3(0) },
iMouse: { value: window.mouseLerping },
iMouseRaw: { value: window.mouseRaw },
iMouseWheel: { value: window.iMouseWheel },
numLights: { value: 1 },
fxFloats: { value: new THREE.Vector4(0) },
ambientLightColor: { value: settings.ambientLightColor },
ambientLightColorAlpha: { value: settings.ambientLightColorAlpha },
decayColor: { value: settings.decayColor },
clickMouseToDraw: { value: settings.clickMouseToDraw }
}

window.outputMaterialA = new THREE.ShaderMaterial({
uniforms: {
// compatibility uniforms
iTime: { value: 1.0 },
iChannel0: { value: inputTextureA.texture },
iChannel1: { value: inputTextureB.texture },
// iChannel2: { value: outputTextureB },
iResolution: { value: new THREE.Vector3(0) },
iMouse: { value: window.mouseLerping },
iMouseRaw: { value: window.mouseRaw },
iMouseWheel: { value: window.iMouseWheel },
numLights: { value: 1 },
alphaShadow: {value: 0}
...DEFAULT_U_VALUES
},
vertexShader: `
void main() {
Expand All @@ -790,15 +798,7 @@ <h1>Pixel Mixer Demo</h1>
// tied to combineTexturesShaderSource
window.outputMaterialB = new THREE.ShaderMaterial({
uniforms: {
iTime: { value: 1.0 },
iChannel0: { value: window.outputTextureA.texture },
iChannel1: { value: window.outputTextureB.texture },
iResolution: { value: new THREE.Vector3(0) },
iMouse: { value: window.mouseLerping },
iMouseRaw: { value: window.mouseRaw },
iMouseWheel: { value: window.iMouseWheel },
numLights: { value: 1 },
alphaShadow: {value: 0}
...DEFAULT_U_VALUES
},
vertexShader: `
void main() {
Expand Down Expand Up @@ -941,6 +941,24 @@ <h1>Pixel Mixer Demo</h1>
window.progressElement = document.getElementById("progress");

window.updateMaterialUniforms = function(material, uniforms){

uniforms = {...{
iTime: cumulativeTime,
iResolution: new THREE.Vector3(safePXDims.x, safePXDims.y, 1.0),
iMouse: window.mouseLerping,
iMouseRaw: window.mouseRaw,
iMouseWheel: window.iMouseWheel,
numLights: settings.numLights,
ambientLightColor: settings.ambientLightColor,
decayColor: settings.decayColor,
fxFloats: new THREE.Vector4(
settings.alphaShadow,
settings.mixNormals,
settings.clickMouseToDraw > 0,
0
)
}, ...uniforms};

Object
.keys(uniforms)
.forEach(function(key) {
Expand All @@ -960,9 +978,9 @@ <h1>Pixel Mixer Demo</h1>
return;
}

if(key === 'alphaShadow'){
//console.log('setting alphaShadow',uniforms[key])
material.uniforms.alphaShadow.value = parseFloat(uniforms[key]);
if(key === 'fxFloats'){
// console.log('setting alphaShadow',uniforms[key])
material.uniforms.fxFloats.value = uniforms[key];
return;
}

Expand All @@ -971,30 +989,62 @@ <h1>Pixel Mixer Demo</h1>
material.uniforms[key].value = uniforms[key];
return;
}

if(key === 'iChannel0' || key === 'iChannel1' || key === 'iChannel2' || key === 'iChannel3'){
//console.warn('setting channel',key,uniforms[key])
material.uniforms[key].value = uniforms[key].texture;
return;
}


if(typeof uniforms[key].value === 'object'){
let value = uniforms[key].value;
if('w' in value){
material.uniforms[key].value.set(value.x, value.y, value.z, value.w);
} else if('z' in value){
material.uniforms[key].value.set(value.x, value.y, value.z);
} else if('y' in value){
material.uniforms[key].value.set(value.x, value.y);
} else if('x' in value){
material.uniforms[key].value.set(value.x);
}
// rgba
if(uniforms[key].hasOwnProperty('r') && uniforms[key].hasOwnProperty('g') && uniforms[key].hasOwnProperty('b') && uniforms[key].hasOwnProperty('a')){
//console.warn('setting color',key,uniforms[key])
material.uniforms[key].value = [
uniforms[key].r,
uniforms[key].g,
uniforms[key].b,
uniforms[key].a
];
return;
}
// rgb
if(uniforms[key].hasOwnProperty('r') && uniforms[key].hasOwnProperty('g') && uniforms[key].hasOwnProperty('b')){
//console.warn('setting color',key,uniforms[key])
material.uniforms[key].value = [
uniforms[key].r,
uniforms[key].g,
uniforms[key].b
];
return;
}

if (uniforms[key] instanceof THREE.Vector4) {
material.uniforms[key].value.set(
uniforms[key].x,
uniforms[key].y,
uniforms[key].z,
uniforms[key].w
);
} else if (uniforms[key] instanceof THREE.Vector3) {
material.uniforms[key].value.set(
uniforms[key].x,
uniforms[key].y,
uniforms[key].z
);
} else if (uniforms[key] instanceof THREE.Vector2) {
material.uniforms[key].value.set(
uniforms[key].x,
uniforms[key].y
);
} else if (typeof uniforms[key].value === 'number') {
material.uniforms[key].value.set(uniforms[key].value);
} else {
console.warn('Unknown uniform type', key, uniforms[key]);
}



//console.warn('unknown uniform type',key,uniforms[key],typeof uniforms[key].value)
// console.warn('unknown uniform type',key,uniforms[key],typeof uniforms[key].value)

//else{
// // console.warn('passing single argument', {key}, uniforms[key], 'to', material.uniforms[key].value)
Expand Down Expand Up @@ -1416,11 +1466,18 @@ <h1>Pixel Mixer Demo</h1>
window.settings = {
timeScale: 1,
pixel_density: 1,

useDoubleBuffer: true,
ambientLightColor: "#ff00ffff",
ambientLightColor: {r:0.0,g:0.0,b:0.0,a:0.0},
ambientLightColorAlpha: 0.1,
numLights: 3,
alphaShadow: 0.0,
radius: 10.0
decayColorAlpha: 0.01,
mixNormals: 0,
radius: 10.0,
decayColor: {r: 0.0, g: 0.0, b: 0.0, a: 0.01},

clickMouseToDraw: true
}

window.onSettingsChanged = function(){
Expand Down Expand Up @@ -1454,24 +1511,10 @@ <h1>Pixel Mixer Demo</h1>
updateMaterialUniforms(window.outputMaterialA, {
iChannel0: window.outputTextureA,
iChannel1: window.inputTextureB,
iTime: cumulativeTime,
iResolution: new THREE.Vector3(safePXDims.x, safePXDims.y, 1.0),
iMouse: window.mouseLerping,
iMouseRaw: window.mouseRaw,
iMouseWheel: window.iMouseWheel,
numLights: settings.numLights,
alphaShadow: settings.alphaShadow
});
updateMaterialUniforms(window.outputMaterialB, {
iChannel0: window.outputTextureA,
iChannel1: window.outputTextureB,
iTime: cumulativeTime,
iResolution: new THREE.Vector3(safePXDims.x, safePXDims.y, 1.0),
iMouse: window.mouseLerping,
iMouseRaw: window.mouseRaw,
iMouseWheel: window.iMouseWheel,
numLights: settings.numLights,
alphaShadow: settings.alphaShadow
});


Expand Down Expand Up @@ -1540,9 +1583,48 @@ <h1>Pixel Mixer Demo</h1>
}
}

// Function to parse the hash from URL
function getHashSettings() {
const hash = window.location.hash.substring(1);
const settings = {};
hash.split('&').forEach(part => {
const item = part.split('=');
settings[item[0]] = decodeURIComponent(item[1]);
});
return settings;
}

function getSettingsAsHash(){
const _settings = JSON.parse(JSON.stringify(settings));
delete _settings.useDoubleBuffer;
//delete _settings.pixel_density;
return Object.keys(_settings).map(key => `${key}=${encodeURIComponent(_settings[key].value || _settings[key])}`).join('&');
}

// Function to update URL hash
function updateHash(controller) {
const hashSettings = getSettingsAsHash();
hashSettings[controller.property] = controller.getValue();
const newHash = Object.keys(hashSettings).map(key => `${key}=${encodeURIComponent(hashSettings[key])}`).join('&');
window.location.hash = newHash;
}

// Generic change handler function
function handleChange() {
const values = {};
Object.keys(gui.__controllers).forEach(key => {
const controller = gui.__controllers[key];
values[controller.property] = controller.getValue();
});
updateHash(this);
}

window.lastMouseMoveWasFake = false;

window.setupPanel = function () {
if(!window.panel){
window.panel = new lil.GUI();
window.panel.close();
//console.warn('window.setupPanel, panel not ready yet');
//return;
}
Expand All @@ -1566,27 +1648,64 @@ <h1>Pixel Mixer Demo</h1>
// ambientLightColor
panel.addColor(settings, 'ambientLightColor', true)
.name('Ambient Light Color')
// .onChange((value)=>{
// window.settings.ambientLightColor = value;
// });

// add a boolean checkbox for settings.useDoubleBuffer
panel.add(settings, 'useDoubleBuffer')
.name('Use Double Buffer')
.onChange((value)=>{
settings.useDoubleBuffer = value;
console.warn('use double buffer', value);
window.settings.ambientLightColor = value
});
// ambientLightColorAlpha
panel.add(settings, 'ambientLightColorAlpha', 0.01, 1, 0.01)
.name('Ambient Light Color Alpha')
.onChange((value)=>{
window.settings.ambientLightColor.a = value;
});

// decayColor
panel.addColor(settings, 'decayColor')
.name('Decay Color')
.onChange((value)=>{
window.settings.decayColor = value
});
panel.add(settings, 'decayColorAlpha', 0, 1, 0.0001)
.name( 'Decay Color Alpha' )
.onChange((value)=>{
window.settings.decayColor.a = Math.pow(value,2);
});

panel.add(settings, 'mixNormals', 0, 1, 0.01)
.name('Show Normal Map')
.onChange((value)=>{
settings.mixNormals = value;
// console.warn('mix normal map', value);
});

panel.add(settings, 'clickMouseToDraw')
.name("Use Mouse To Draw")
.onChange((value)=>{
settings.clickMouseToDraw = value;
});

// add a boolean checkbox for settings.useDoubleBuffer
// panel.add(settings, 'useDoubleBuffer')
// .name('Use Double Buffer')
// .onChange((value)=>{
// settings.useDoubleBuffer = value;
// console.warn('use double buffer', value);
// });

// panel add a button called "resizeCanvas"
panel.add({ resizeCanvas: function() { window.resizeCanvas(); } }, 'resizeCanvas');
// panel.add({ resizeCanvas: function() { window.resizeCanvas(); } }, 'resizeCanvas');

panel.add({ resetPingPong: window.resetPingPong }, 'resetPingPong')
.name('[C] clear buffer')
.name('[c] clear buffer')

panel.add({ toggleBigSweep: function() { window.toggleBigSweep(); } }, 'toggleBigSweep');
// panel.add({ toggleBigSweep: function() { window.toggleBigSweep(); } }, 'toggleBigSweep');
// toggleJiggleSwirl
panel.add({ toggleJiggleSwirl: function() { window.toggleJiggleSwirl(); } }, 'toggleJiggleSwirl');
// panel.add({ toggleJiggleSwirl: function() { window.toggleJiggleSwirl(); } }, 'toggleJiggleSwirl');

// Lastly
// Apply the change handler to all controllers
// panel.__controllers.forEach(controller => {
// controller.onChange(handleChange);
// });

window.addEventListener('keydown', (e)=>{
if(e.key === 'c' || e.key === 'C'
Expand All @@ -1595,6 +1714,32 @@ <h1>Pixel Mixer Demo</h1>
){
window.resetPingPong();
}
if(e.key === 'q' || e.key === 'Q'){
window.vec2MouseWheelRaw.y += 10;
}
if(e.key === 'a' || e.key === 'A'){
window.vec2MouseWheelRaw.y -= 10;
}
if(e.key === 'w' || e.key === 'W'){
window.vec2MouseWheelRaw.y = 10;
}
// arrows drive iMouseRaw
if(e.key === 'ArrowUp'){
lastMouseMoveWasFake = true;
window.mouseRaw.y += 1;
}
if(e.key === 'ArrowDown'){
lastMouseMoveWasFake = true;
window.mouseRaw.y -= 1;
}
if(e.key === 'ArrowLeft'){
lastMouseMoveWasFake = true;
window.mouseRaw.x -= 1;
}
if(e.key === 'ArrowRight'){
lastMouseMoveWasFake = true;
window.mouseRaw.x += 1;
}
});

// panel.add( settings, 'res', 1, 6, 1 )
Expand Down Expand Up @@ -2215,6 +2360,7 @@ <h1>Pixel Mixer Demo</h1>
document.addEventListener('touchmove',async(e)=>{
mouseX = e.touches[0].clientX;
mouseY = e.touches[0].clientY;
lastMouseMoveWasFake = false;
})
document.addEventListener('touchstart',async(e)=>{
mouseX = e.touches[0].clientX;
Expand Down Expand Up @@ -2294,6 +2440,7 @@ <h1>Pixel Mixer Demo</h1>
document.addEventListener('mousemove', (e)=>{
window.mouseX = e.clientX;
window.mouseY = e.clientY;
lastMouseMoveWasFake = false;
});
document.addEventListener('mousedown', (e)=>{
window.leftMouseDown = e.button === 0;
Expand Down
Loading

0 comments on commit 702b19e

Please sign in to comment.