mirror
/
thebookofshaders
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

stereo

This commit is contained in:
Patricio Gonzalez Vivo 2016-01-13 19:44:18 -05:00
parent ab5012dfe6
commit cb00cf694a
5 changed files with 23 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
14/README.md
View File

@ -67,6 +67,12 @@ This could seam simple but the posibilities of modifing textures coordinates is
Now is your turn:
* Can you make a kaleidoscope using what we have learn?
* Way before Oculus or google cardboard, stereoscopic photography was a big thing. Could code a simple shader to re-use this beautiful images?
<a href=“../edit.html#10/ikeda-03.frag”><canvas id=“custom” class=“canvas” data-fragment-url=“ikeda-03.frag” width=“520px” height=“200px”></canvas></a>
* What other optical toys can you re-create using textures?
In the next chapters we will learn how to do some image processing using shaders. You will note that finnaly the complexity of shader makes sense, because was in a big sense designed to do this type of process. We will start doing some image operations!

0
14/texture-stere-05.jpg → 14/texture-stereo-05.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
14/texture-stereo-06.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 587 KiB

3
14/stereo.frag → 14/texture-stereo.frag
View File

@ -14,7 +14,7 @@ uniform float u_time;
void main () {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec4 color = vec4(0.0);
vec4 color = vec4(vec3(0.0),1.);
st *= vec2(.5,1.);
@ -25,5 +25,6 @@ void main () {
vec4 B = texture2D(u_tex0,st+vec2(.5,.0));
color = mix(A, B, abs(sin(t)));
gl_FragColor = color;
}

209
edit.html
View File

@ -2,211 +2,32 @@
<html>
<head>
<meta charset="utf-8">
<title>GLSL Shader Code Editor</title>
<!-- CodeMirror -->
<link type='text/css' rel='stylesheet' href="src/codemirror/css/codemirror.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/addon/fold/foldgutter.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/addon/dialog/dialog.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/addon/hint/show-hint.css">
<link type='text/css' rel="stylesheet" href="src/codemirror/theme/monokai.css">
<script type="text/javascript" src="src/codemirror.js"></script>
<script type="text/javascript" src="src/codemirror/addon/search/searchcursor.js"></script>
<script type="text/javascript" src="src/codemirror/addon/search/search.js"></script>
<script type="text/javascript" src="src/codemirror/addon/dialog/dialog.js"></script>
<script type="text/javascript" src="src/codemirror/addon/edit/matchbrackets.js"></script>
<script type="text/javascript" src="src/codemirror/addon/edit/closebrackets.js"></script>
<script type="text/javascript" src="src/codemirror/addon/comment/comment.js"></script>
<script type="text/javascript" src="src/codemirror/addon/wrap/hardwrap.js"></script>
<script type="text/javascript" src="src/codemirror/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="src/codemirror/addon/fold/brace-fold.js"></script>
<script type="text/javascript" src="src/codemirror/keymap/sublime.js"></script>
<script type="text/javascript" src="src/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="src/codemirror/mode/clike.js"></script>
<title>GLSL Editor</title>
<!-- GLSL Canvas -->
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.min.js"></script>
<style>
body {
height: 100%;
margin: 0;
background: #272822;
}
h1 {
color: white;
font-family: Courier, Arial;
#glsl_editor {
height: 100%;
}
pre {
font-size: 130%;
}
canvas.right {
position: fixed;
right: 10px;
top: 10px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.CodeMirror {
font-size: 110%;
line-height: 1.3;
right: 10px;
height: 100%;
}
.CodeMirror-linenumbers {
padding: 0 8px;
}
</style>
</head>
<body>
<h1 id="title" >FILE NAME.frag</h1>
<div id="editor"></div>
<canvas id="canvas" class="right" width="500" height="500"></canvas>
<script type="text/javascript">
window.addEventListener("hashchange", function () {
loadTag()
}, false);
var editor;
var billboard;
var imgs = [];
function fetchHTTP(url, methood){
var request = new XMLHttpRequest(), response;
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
response = request.responseText;
}
}
request.open(methood ? methood : 'GET', url, false);
request.overrideMimeType("text/plain");
request.send(null);
return response;
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000/60);
};
})();
// Keep track of the mouse
var mouse = {x: 0, y: 0};
document.addEventListener('mousemove', function(e){
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY
}, false);
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
function loadTag(){
var fragShader = "";
var fragFile = "";
while(imgs.length > 0) {
imgs.pop();
}
removeElementsByClass("CodeMirror");
if( window.location.hash === "" ){
fragShader = "#ifdef GL_ES\n\
precision mediump float;\n\
#endif\n\
\n\
uniform vec2 u_resolution;\n\
uniform vec2 u_mouse;\n\
uniform float u_time;\n\
\n\
void main(){\n\
vec2 st = gl_FragCoord.xy/u_resolution.xy;\n\
gl_FragColor = vec4(st.x,st.y,0.0,1.0);\n\
}";
} else {
var hashes = location.hash.split('&');
for(i in hashes){
var ext = hashes[i].substr(hashes[i].lastIndexOf('.') + 1);
var name = hashes[i];
// Extract hash if is present
if(name.search("#") === 0){
name = name.substr(1);
}
if(ext == "frag"){
fragFile = name;
fragShader = fetchHTTP(fragFile);
} else if (ext == "png" || ext == "jpg" || ext == "PNG" || ext == "JPG" ){
imgs.push(hashes[i]);
}
}
}
var demoTitle = document.getElementById("title");
if(demoTitle){
demoTitle.innerText = fragFile;
}
var demoCanvas = document.getElementById("canvas");
if (demoCanvas && fragShader !== "") {
demoCanvas.setAttribute("data-fragment-url", fragFile);
if (imgs.length > 0) {
var textureList = "";
for (i in imgs) {
textureList += imgs[i];
textureList += (i < imgs.length-1)?",":"";
}
demoCanvas.setAttribute("data-textures",textureList);
console.log("data-textures: " + textureList);
}
billboard = new GlslCanvas(demoCanvas);
}
var demoEditor = document.getElementById("editor");
if (demoEditor) {
editor = CodeMirror(demoEditor,{
value: fragShader,
lineNumbers: true,
matchBrackets: true,
mode: "x-shader/x-fragment",
keyMap: "sublime",
autoCloseBrackets: true,
extraKeys: {"Ctrl-Space": "autocomplete"},
showCursorWhenSelecting: true,
theme: "monokai",
indentUnit: 4
});
editor.on("change", function() {
demoCanvas.setAttribute("data-fragment", editor.getValue());
billboard.load(editor.getValue());
});
}
}
window.onload = function () {
loadTag();
};
</script>
<div id="glsl_editor"></div>
</body>
<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/patriciogonzalezvivo/glslEditor/gh-pages/build/css/main.css">
<script type="application/javascript" src="https://raw.githubusercontent.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/glslEditor.js"></script>
<script type="text/javascript">
window.glslEditor = new GlslEditor('#glsl_editor');
window.addEventListener("hashchange", function () {
window.glslEditor.chechHash()
}, false);
</script>
</html>