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

improvements on glslCanvas

This commit is contained in:
Patricio Gonzalez Vivo 2016-03-04 10:40:21 -05:00
parent 139020811f
commit afefb2adb3
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
14/README.md
View File

@ -16,7 +16,7 @@ vec4 texture2D(sampler2D texture, vec2 coordinates)
Check the following code where we load Hokusai's Wave (1830) as ```uniform sampler2D u_tex0``` and we call every pixel of it inside the billboard:
<div class="codeAndCanvas" data="texture.frag" data-imgs="hokusai.jpg"></div>
<div class="codeAndCanvas" data="texture.frag" data-textures="hokusai.jpg"></div>
If you pay attention you will note that the coordinates for the texture are normalized! What a surprise right? Textures coordenates are consisten with the rest of the things we had saw and their coordenates are between 0.0 and 1.0 whitch match perfectly with the normalized space coordinates we have been using.
@ -34,7 +34,7 @@ Finnally, you can setup your image to repeat in the edges, so if you give values
All this features makes your images more like an infinit spandex fabric. You can streach and shrinks your texture without noticing the grid of bites they originally where compose of or the ends of it. To experience this take a look to the following code where we distort a texture using [the noise function we already made](../11/).
<div class="codeAndCanvas" data="texture-noise.frag" data-imgs="hokusai.jpg"></div>
<div class="codeAndCanvas" data="texture-noise.frag" data-textures="hokusai.jpg"></div>
## Texture resolution
@ -46,7 +46,7 @@ How we can solve this problem? Well we need to know the original proportions of
Uncomment line 21 of the following code to see this in action.
<div class="codeAndCanvas" data="texture-resolution.frag" data-imgs="nicephore.jpg"></div>
<div class="codeAndCanvas" data="texture-resolution.frag" data-textures="nicephore.jpg"></div>
* What we need to do to center this image?
@ -62,7 +62,7 @@ This level of craftsmanship links back to some of the first optical experiments
This could seam simple but the posibilities of modifing textures coordinates is enormus. For example: .
<div class="codeAndCanvas" data="texture-sprite.frag" data-imgs="muybridge.jpg"></div>
<div class="codeAndCanvas" data="texture-sprite.frag" data-textures="muybridge.jpg"></div>
Now is your turn:

4
header.php
View File

@ -27,7 +27,7 @@ echo '
<!-- GlslEditor -->
<link type="text/css" rel="stylesheet" href="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/css/main.css">
<script type="application/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/glslEditor.js"></script>
<script type="application/javascript" src="http://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/glslEditor.js"></script>
<link type="text/css" rel="stylesheet" href="'.$path.'/css/style.css">
@ -43,3 +43,5 @@ echo '
<body>
';
?>
<!-- <script type="application/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/glslEditor.js"></script> -->

4
src/main.js
View File

@ -137,7 +137,9 @@ function loadGlslElements() {
for(var i = 0; i < ccList.length; i++){
if (ccList[i].hasAttribute("data")){
var srcFile = ccList[i].getAttribute("data");
glslEditors.push(new GlslEditor(ccList[i], { canvas_size: 250, canvas_follow: true }).open(srcFile));
var editor = new GlslEditor(ccList[i], { canvas_size: 250, canvas_follow: true });
editor.open(srcFile);
glslEditors.push(editor);
}
}