Skip to content

Commit 470fac5

Browse files
greggmangreggman
committed
add nearest option
1 parent 4984387 commit 470fac5

File tree

5 files changed

+161
-115
lines changed

5 files changed

+161
-115
lines changed

‎color-adjust/adjustments/posterize-3-lab.png

7.01 KB
Loading

‎color-adjust/adjustments/posterize-3-rgb.png

8.8 KB
Loading

‎color-adjust/adjustments/posterize-4-lab.png

7.16 KB
Loading

‎color-adjust/adjustments/posterize-more.png

13.7 KB
Loading

‎color-adjust/color-adjust.html

Lines changed: 161 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,99 @@
8484
border: solid black 2px;
8585
}
8686
</style>
87-
<link type="text/css" href="../jquery-ui-1.8.2.custom/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
88-
<script type="text/javascript" src="../jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js"></script>
89-
<script type="text/javascript" src="../jquery-ui-1.8.2.custom/js/jquery-ui-1.8.2.custom.min.js"></script>
90-
<script type="text/javascript" src="../tdl/base.js"></script>
91-
<script type="text/javascript">
87+
</head>
88+
<body>
89+
<div id="info">
90+
<div><a href="http://threedlibrary.googlecode.com" target="_blank">tdl.js</a> - color adjust</div>
91+
<div><a href="http://www.youtube.com/watch?v=rfQ8rKGTVlg#t=25m03s">click here to see how it works</a></div>
92+
</div>
93+
<div id="uiContainer">
94+
<div>Adjustment</div>
95+
<div id="adjustments">
96+
<div><input type="checkbox" value="false" id="nearest"><label for="nearest">nearest</label></div>
97+
</div>
98+
</div>
99+
<div id="viewContainer">
100+
<canvas id="canvas" width="1024" height="1024" style="width: 100%; height: 100%;"></canvas>
101+
</div>
102+
<div style="display:none;">
103+
<video id="vid">
104+
<!--
105+
<source src="http://studio.html5rocks.com/samples/video-player/chromeicon.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
106+
<source src="http://videos-cdn.mozilla.net/firefox/3.6/getpersonas.ogv" type='video/ogg; codecs="theora, vorbis"' />
107+
<source src="sample-video.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
108+
-->
109+
<source src="sample-video.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
110+
<source src="sample-video.webmvp8.webm" type='video/webm; codecs="vp8, vorbis"' />
111+
<source src="sample-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
112+
</video>
113+
</div>
114+
</body>
115+
<!-- ===[ basic ]============================================== -->
116+
<script id="basicVertexShader" type="text/something-not-javascript">
117+
uniform mat4 worldViewProjection;
118+
attribute vec4 position;
119+
attribute vec2 texCoord;
120+
varying vec2 v_texCoord;
121+
void main() {
122+
gl_Position = worldViewProjection * position;
123+
v_texCoord = texCoord;
124+
}
125+
</script>
126+
<script id="basicFragmentShader" type="text/something-not-javascript">
127+
precision mediump float;
128+
uniform sampler2D texture;
129+
varying vec2 v_texCoord;
130+
void main() {
131+
gl_FragColor = texture2D(texture, v_texCoord);
132+
}
133+
</script>
134+
<!-- ===[ colorAdjust ]============================================== -->
135+
<script id="colorAdjustVertexShader" type="text/something-not-javascript">
136+
attribute vec4 position;
137+
attribute vec2 texCoord;
138+
varying vec2 v_texCoord;
139+
void main() {
140+
gl_Position = position;
141+
v_texCoord = texCoord;
142+
}
143+
</script>
144+
<script id="colorAdjustFragmentShader" type="text/something-not-javascript">
145+
precision mediump float;
146+
uniform float mixAmount;
147+
uniform sampler2D inTexture;
148+
uniform sampler2D colorCube0;
149+
uniform sampler2D colorCube1;
150+
varying vec2 v_texCoord;
151+
152+
vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) {
153+
float sliceSize = 1.0 / size; // space of 1 slice
154+
float slicePixelSize = sliceSize / size; // space of 1 pixel
155+
float sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels
156+
float zSlice0 = min(floor(texCoord.z * size), size - 1.0);
157+
float zSlice1 = min(zSlice0 + 1.0, size - 1.0);
158+
float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
159+
float s0 = xOffset + (zSlice0 * sliceSize);
160+
float s1 = xOffset + (zSlice1 * sliceSize);
161+
vec4 slice0Color = texture2D(tex, vec2(s0, texCoord.y));
162+
vec4 slice1Color = texture2D(tex, vec2(s1, texCoord.y));
163+
float zOffset = mod(texCoord.z * size, 1.0);
164+
#if defined(USE_NEAREST)
165+
return mix(slice0Color, slice1Color, step(0.5, zOffset));
166+
#else
167+
return mix(slice0Color, slice1Color, zOffset);
168+
#endif
169+
}
170+
171+
void main() {
172+
vec4 originalColor = texture2D(inTexture, v_texCoord);
173+
vec4 color0 = sampleAs3DTexture(colorCube0, originalColor.rgb, 8.0);
174+
vec4 color1 = sampleAs3DTexture(colorCube1, originalColor.rgb, 8.0);
175+
gl_FragColor = vec4(mix(color0, color1, mixAmount).rgb, originalColor.a);
176+
}
177+
</script>
178+
<script src="../tdl/base.js"></script>
179+
<script>
92180
tdl.require('tdl.buffers');
93181
tdl.require('tdl.fast');
94182
tdl.require('tdl.framebuffers');
@@ -112,6 +200,7 @@
112200
var g_setCountElements = [];
113201
var g_autoSet = true;
114202
var g_autoSetting = 0;
203+
var g_useNearest = false;
115204
var g_videoTexture;
116205
var g_colorCube0Texture;
117206
var g_colorCube1Texture;
@@ -120,6 +209,7 @@
120209
var g_mixAmount = 0;
121210
var g_eyeClock = 0;
122211

212+
var g_adjustmentNames;
123213
var g_mixDuration = 1;
124214
var g_applyColorAdjust = true;
125215
var g_targetHeight = 0.0;
@@ -137,6 +227,10 @@
137227
{ name: 'sepia', url: "adjustments/sepia.png" },
138228
{ name: 'saturated', url: "adjustments/saturated.png", },
139229
{ name: 'posterize', url: "adjustments/posterize.png", },
230+
{ name: 'posterize-3-rgb',url: "adjustments/posterize-3-rgb.png", },
231+
{ name: 'posterize-3-lab',url: "adjustments/posterize-3-lab.png", },
232+
{ name: 'posterize-4-lab',url: "adjustments/posterize-4-lab.png", },
233+
{ name: 'posterize-more', url: "adjustments/posterize-more.png", },
140234
{ name: 'inverse', url: "adjustments/inverse.png", },
141235
{ name: 'color negative', url: "adjustments/color-negative.png", },
142236
{ name: 'high contrast', url: "adjustments/high-contrast-bw.png", },
@@ -242,17 +336,24 @@
242336
colorCube0: g_colorCubeTexture0,
243337
colorCube1: g_colorCubeTexture1
244338
};
245-
var program = tdl.programs.loadProgramFromScriptTags(
246-
'colorAdjustVertexShader',
247-
'colorAdjustFragmentShader');
339+
248340
var arrays = tdl.primitives.createPlane(2, 2, 1, 1);
249341
tdl.primitives.reorient(arrays,
250342
[1, 0, 0, 0,
251343
0, 0,-1, 0,
252344
0, 1, 0, 0,
253345
0, 0, 0, 1]);
254346
delete arrays.normal;
255-
return new tdl.models.Model(program, arrays, textures);
347+
348+
const models = [];
349+
for (var i = 0; i < 2; ++i) {
350+
var program = tdl.programs.loadProgram(
351+
document.querySelector('#colorAdjustVertexShader').text,
352+
(i ? '#define USE_NEAREST 1\n' : '') +
353+
document.querySelector('#colorAdjustFragmentShader').text);
354+
models.push(new tdl.models.Model(program, arrays, textures));
355+
}
356+
return models;
256357
}
257358

258359
function initialize() {
@@ -303,9 +404,8 @@
303404
tdl.log("setupAdjustments")
304405
var loadingCount = 1;
305406
var adjustmentsElement = document.getElementById("adjustments");
306-
for (var ii = 0; ii < g_adjustmentImages.length; ++ii) {
407+
g_adjustmentNames = g_adjustmentImages.map(function(info, ii) {
307408
++loadingCount;
308-
var info = g_adjustmentImages[ii];
309409
var div = document.createElement("div");
310410
info.div = div;
311411
div.innerHTML = info.name;
@@ -331,14 +431,24 @@
331431
});
332432
}
333433
}(img, info);
334-
}
434+
return info.name;
435+
});
335436
loadingCount--;
336437
}
337438

439+
function parseQuery(s) {
440+
const q = {};
441+
s.substring(s.startsWith('?') ? 1 : 0).split('&').forEach(pair => {
442+
const parts = pair.split('=').map(decodeURIComponent);
443+
q[parts[0]] = parts[1];
444+
});
445+
return q;
446+
}
447+
338448
function continueSetup() {
339449
var mainFBO = tdl.framebuffers.createFramebuffer(canvas.width, canvas.height, true);
340450
var videoPlane = setupPlane();
341-
var colorAdjustPlane = setupColorAdjustPlane(mainFBO.texture);
451+
var colorAdjustPlanes = setupColorAdjustPlane(mainFBO.texture);
342452
var rtPlane = setupRTPlane(mainFBO.texture);
343453

344454
var projection = new Float32Array(16);
@@ -369,35 +479,54 @@
369479
var copyVideo = false;
370480
var madeVideoTexture = false;
371481
var video = document.getElementById("vid");
372-
video.addEventListener("playing", function() {
373-
copyVideo = true;
482+
video.addEventListener("playing", function() {
483+
copyVideo = true;
374484
}, true);
375-
video.addEventListener("ended", function() {
376-
video.currentTime = startTime; video.play();
485+
video.addEventListener("ended", function() {
486+
video.currentTime = startTime; video.play();
377487
}, true);
378-
video.addEventListener("error", function() {
379-
tdl.log("could not play video");
488+
video.addEventListener("error", function() {
489+
tdl.log("could not play video");
380490
}, true);
381491
video.volume = 0;
382492
video.play();
383493

384494
var showRT = false;
385-
$(document).keypress(function(event) {
495+
document.addEventListener('keypress', function(event) {
386496
if (event.which == 'd'.charCodeAt(0) ||
387497
event.which == 'D'.charCodeAt(0)) {
388498
showRT = !showRT;
389499
tdl.log(showRT);
390500
}
391501
});
392502

393-
var videoPlanePer = {
503+
const videoPlanePer = {
394504
worldViewProjection: worldViewProjection
395505
};
396506

397-
var rtPlanePer = {
507+
const rtPlanePer = {
398508
worldViewProjection: worldViewProjection
399509
};
400510

511+
const nearestElem = document.querySelector("#nearest");
512+
nearestElem.addEventListener('change', function(e) {
513+
g_useNearest = e.target.checked;
514+
});
515+
516+
const q = parseQuery(window.location.search);
517+
518+
if (q.nearest && q.nearest !== 'false') {
519+
g_useNearest = true;
520+
nearestElem.checked = true;
521+
}
522+
523+
if (q.adjustment) {
524+
const ndx = g_adjustmentNames.indexOf(q.adjustment);
525+
if (ndx >= 0) {
526+
updateSelection(ndx);
527+
}
528+
}
529+
401530
var frameCount = 0;
402531
var then = (new Date()).getTime() * 0.001;
403532
var clock = 0.0;
@@ -504,6 +633,15 @@
504633
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
505634
gl.disable(gl.BLEND);
506635
gl.disable(gl.DEPTH_TEST);
636+
637+
const colorAdjustPlane = g_useNearest ? colorAdjustPlanes[1] : colorAdjustPlanes[0];
638+
639+
const filter = g_useNearest ? gl.NEAREST : gl.LINEAR;
640+
g_colorCubeTexture0.setParameter(gl.TEXTURE_MIN_FILTER, filter);
641+
g_colorCubeTexture0.setParameter(gl.TEXTURE_MAG_FILTER, filter);
642+
g_colorCubeTexture1.setParameter(gl.TEXTURE_MIN_FILTER, filter);
643+
g_colorCubeTexture1.setParameter(gl.TEXTURE_MAG_FILTER, filter);
644+
507645
colorAdjustPlane.drawPrep();
508646
colorAdjustPlane.draw({
509647
mixAmount: g_mixAmount
@@ -543,99 +681,7 @@
543681
return true;
544682
}
545683

546-
$(function(){
547-
initialize();
548-
});
549-
</script>
550-
</head>
551-
<body>
552-
<div id="info">
553-
<div><a href="http://threedlibrary.googlecode.com" target="_blank">tdl.js</a> - color adjust</div>
554-
<div><a href="http://www.youtube.com/watch?v=rfQ8rKGTVlg#t=25m03s">click here to see how it works</a></div>
555-
</div>
556-
<div id="uiContainer">
557-
<div>Adjustment</div>
558-
<div id="adjustments">
559-
</div>
560-
</div>
561-
<div id="viewContainer">
562-
<canvas id="canvas" width="1024" height="1024" style="width: 100%; height: 100%;"></canvas>
563-
</div>
564-
<div style="display:none;">
565-
<video id="vid">
566-
<!--
567-
<source src="http://studio.html5rocks.com/samples/video-player/chromeicon.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
568-
<source src="http://videos-cdn.mozilla.net/firefox/3.6/getpersonas.ogv" type='video/ogg; codecs="theora, vorbis"' />
569-
<source src="sample-video.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
570-
-->
571-
<source src="sample-video.theora.ogv" type='video/ogg; codecs="theora, vorbis"' />
572-
<source src="sample-video.webmvp8.webm" type='video/webm; codecs="vp8, vorbis"' />
573-
<source src="sample-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
574-
</video>
575-
</div>
576-
</body>
577-
<!-- ===[ basic ]============================================== -->
578-
<script id="basicVertexShader" type="text/something-not-javascript">
579-
uniform mat4 worldViewProjection;
580-
attribute vec4 position;
581-
attribute vec2 texCoord;
582-
varying vec2 v_texCoord;
583-
void main() {
584-
gl_Position = worldViewProjection * position;
585-
v_texCoord = texCoord;
586-
}
587-
</script>
588-
<script id="basicFragmentShader" type="text/something-not-javascript">
589-
#ifdef GL_ES
590-
precision mediump float;
591-
#endif
592-
uniform sampler2D texture;
593-
varying vec2 v_texCoord;
594-
void main() {
595-
gl_FragColor = texture2D(texture, v_texCoord);
596-
}
597-
</script>
598-
<!-- ===[ colorAdjust ]============================================== -->
599-
<script id="colorAdjustVertexShader" type="text/something-not-javascript">
600-
attribute vec4 position;
601-
attribute vec2 texCoord;
602-
varying vec2 v_texCoord;
603-
void main() {
604-
gl_Position = position;
605-
v_texCoord = texCoord;
606-
}
607-
</script>
608-
<script id="colorAdjustFragmentShader" type="text/something-not-javascript">
609-
#ifdef GL_ES
610-
precision mediump float;
611-
#endif
612-
uniform float mixAmount;
613-
uniform sampler2D inTexture;
614-
uniform sampler2D colorCube0;
615-
uniform sampler2D colorCube1;
616-
varying vec2 v_texCoord;
617-
618-
vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) {
619-
float sliceSize = 1.0 / size; // space of 1 slice
620-
float slicePixelSize = sliceSize / size; // space of 1 pixel
621-
float sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels
622-
float zSlice0 = min(floor(texCoord.z * size), size - 1.0);
623-
float zSlice1 = min(zSlice0 + 1.0, size - 1.0);
624-
float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
625-
float s0 = xOffset + (zSlice0 * sliceSize);
626-
float s1 = xOffset + (zSlice1 * sliceSize);
627-
vec4 slice0Color = texture2D(tex, vec2(s0, texCoord.y));
628-
vec4 slice1Color = texture2D(tex, vec2(s1, texCoord.y));
629-
float zOffset = mod(texCoord.z * size, 1.0);
630-
return mix(slice0Color, slice1Color, zOffset);
631-
}
632-
633-
void main() {
634-
vec4 originalColor = texture2D(inTexture, v_texCoord);
635-
vec4 color0 = sampleAs3DTexture(colorCube0, originalColor.rgb, 8.0);
636-
vec4 color1 = sampleAs3DTexture(colorCube1, originalColor.rgb, 8.0);
637-
gl_FragColor = vec4(mix(color0, color1, mixAmount).rgb, originalColor.a);
638-
}
684+
window.onload = initialize;
639685
</script>
640686
</html>
641687

0 commit comments

Comments
 (0)