mergin, adding experimental editor to editor

9 years ago · 900a9a59e4
parent 8cdb189401 f3fef6ef38
commit 900a9a59e4
10 changed files with 265 additions and 17 deletions
--- a/00/README-kr.md
+++ b/00/README-kr.md
@ -0,0 +1,48 @@
+# Introduction
+
+<canvas id="custom" class="canvas" data-fragment-url="cmyk-halftone.frag" data-textures="vangogh.jpg" width="700px" height="320px"></canvas>
+
+위에 두 이미지는 다른 방법을 통해 만들어졌다. 첫번째것은 반 고흐가 직접 레이어 위에 레이어를 쌓는 방식으로 만들어졌다. 제법 시간이 걸렸을것이다. 두번째것은 몇초 안되는 시간안에 픽셀들의 행렬연산 4개를 통해 만들어 졌다: 한개는 cyan색, 다른 한개는 magenta색, 또 다른 한개는 yellow, 그리고 마지막것은 black. 중요한점은 두번째 이미지는 그림을 부분마다 따로 그려나가게 아니라 그림의 다른 모든 부분이 한번에 그려졌다는 것이다.
+
+이 책은, *fragment shaders*, 라는 디지털 그림 제작과정을 다음 레벨로 이끌어낼 혁신적인 컴퓨팅 기술에 대한 것이다. 바로 그래픽 인더스트리의 구텐베르크 인쇄술인것이다.
+
+![Gutenberg's press](gutenpress.jpg)
+
+Fragment shader는 매우 빠른 속도로 스크린에 렌더되는 픽셀들을 완전히 컨트롤 할수 있는 능력을 준다. 핸드폰의 비디오 필터나, AAA 3D 비디오 같은 미디어에서 쓰이는 이유도 이것때문이다.
+
+![Journey by That Game Company](journey.jpg)
+
+앞으로 맞이할 챕터들은 독자가 이 강력하고 바른 기술을 스스로 습득하고, 자신의 작업에 적용할수 있는 길을 보여줄것이다.
+
+## 누구를 위한 책인가?
+
+이 책은 삼각함수와 선형대수학에 대한 기본이해가 있고 작업에 있어 그래픽 요소를 극대화 시키려는 creative coder, 게임 개발자, 그래픽 엔지니어들을 위한 책이다. (만약 본인이 코딩입문자라면 이 링크를 보고, [Processing](https://processing.org/) 코딩이 익숙해졌을때쯤 다시 돌아와 이책을 보길 권한다.)
+
+이책은 독자들에게 쉐이더를 프로젝트에 어떻게 쓰는지와, 이를 통한 퍼포먼스 향상과 퀄리티를 높이는 방법들을 보여줄것이다. GLSL (OpenGL Shading Language) 쉐이더들은 OpenGL, OpenGL ES 혹은 WebGL을 가진 환경에서 컴파일되고 실행될것이다. 한마디로, 이것에 대한 기술을 [Processing](https://processing.org/) 스켓치파일들, [openFrameworks](http://openframeworks.cc/) 어플들, [Cinder](http://libcinder.org/) 설치미술들, [Three.js](http://threejs.org/) 웹사이트들 또는 iOS/Android 게임들에 적용할수 있다는 것이다.
+
+## 어떤 내용들을 다루나?
+
+이책은 GLSL pixel shader를 메인으로 다룬다. 먼저, 쉐이더가 무엇인지 알아보고, 절차적(procedural) 모양, 패턴, 텍스쳐, 애니메이션등에 응용해볼것이다. 쉐이딩 랭기지의 기본에 대해 다지게 되고, 여러 분야에 적용해볼수 있도록 유도하는데 예를들면: 이미지 처리(이미지 여산, 메트릭스 회선, blurs, color filters, 룩업테이블과 기타 효과들)와 시뮬레이션 (Conway's game of life, Gray-Scott's reaction-diffusion, water ripples, 물감 효과, Voronoi cells등등)이 그 좋은 예이다. 책의 막바지에는 Ray Marching과 같은 고급기술도 소개를 한다.
+
+*각 챕터는 인터엑티브한 예제들로 구성되어 있다.* 예제들의 코드를 변경하면, 바로 그에 대한 결과를 볼수 있다. 컨셉자체가 추상적이거나 난해할수도 있기에, 이런 인터엑티브 예제가 이해하는데 큰 도움이 될거라고 믿는다. 컨셉에 대한 예제를 많이 가지고 놀아볼수록 그에 대한 이해역시 빨리 될거라고 생각한다.
+
+이책이 다루지 않는 부분:
+
+* 이책은 openGL이나 webGL서적이 아니다. openGL/webGL은 GLSL이나 fragment shader보다 훨씬 더 큰 주제이다. 그런것들에 대해 좀더 싶히 공부하고 싶다면: [OpenGL Introduction](https://open.gl/introduction), [the 8th edition of the OpenGL Programming Guide](http://www.amazon.com/OpenGL-Programming-Guide-Official-Learning/dp/0321773039/ref=sr_1_1?s=books&ie=UTF8&qid=1424007417&sr=1-1&keywords=open+gl+programming+guide) (빨간책이라고도 알려진) 이나 [WebGL: Up and Running](http://www.amazon.com/WebGL-Up-Running-Tony-Parisi/dp/144932357X/ref=sr_1_4?s=books&ie=UTF8&qid=1425147254&sr=1-4&keywords=webgl) 등을 추천한다.
+
+* 이책은 수학색이 아니라. 물론 여러 종류의 알고리즘과 대수학과, 삼각함수에 기댄 수학수식이 많이 이용되지만, 그런것들에 대해 자세히 설명하지는 않을 것이다. 수학에 대한 질문은 : [3rd Edition of Mathematics for 3D Game Programming and computer Graphics](http://www.amazon.com/Mathematics-Programming-Computer-Graphics-Third/dp/1435458869/ref=sr_1_1?ie=UTF8&qid=1424007839&sr=8-1&keywords=mathematics+for+games) 를 보거나, [2nd Edition of Essential Mathematics for Games and Interactive Applications](http://www.amazon.com/Essential-Mathematics-Games-Interactive-Applications/dp/0123742978/ref=sr_1_1?ie=UTF8&qid=1424007889&sr=8-1&keywords=essentials+mathematics+for+developers) 등을 참고하기 바란다.
+
+## 시작하기 위해 무엇을 해야하나?
+
+필요한것은 따로 없다! 근대 브라우져를 이용하고 있다면, WebGL이 서포트 될것이고 (구글 크롬이나 파이어폭스, 사파리), 인터넷만 있으면 된다! (지금 보고 있지만) 페이지 최하단에 있는 "Next"버튼을 눌러 다음챕터로 가면 시작이다.
+
+아니면 , 다음과 같은 방법으로도 이 책을 접할수 있다:
+
+- [이책의 오프라인 버젼](http://thebookofshaders.com/appendix/)
+
+- [RaspberryPi에서 브라우져 없이 예제들 돌리기](http://thebookofshaders.com/appendix/)
+
+- [이책의 PDF버젼 만들기](http://thebookofshaders.com/appendix/)
+
+- 또는 [온라인 리포](https://github.com/patriciogonzalezvivo/thebookofshaders) 이슈들을 답하거나, 올려주세요.
+
--- a/06/README.md
+++ b/06/README.md
@ -27,7 +27,7 @@ vector[3] = vector.a = vector.w = vector.q;

 These different ways of pointing to the variables inside a vector are just nomenclatures designed to help you write clear code. This flexibility embedded in shading language is a door for you to start thinking interchangably about color and space coordinates. 

-Another great feature of vector types in GLSL is that the properties can be combined in any order you want, which makes it easy to cast and mix values. This ability is call *swizzle*.
+Another great feature of vector types in GLSL is that the properties can be combined in any order you want, which makes it easy to cast and mix values. This ability is called *swizzle*.

 ```glsl
 vec3 yellow, magenta, green;
--- a/10/README-ch.md
+++ b/10/README-ch.md
@ -0,0 +1,93 @@
+# 生成设计
+
+It is not a surprise that after so much repetition and order the author is forced to bring some chaos.
+
+## 随机
+
+[![Ryoji Ikeda - test pattern (2008) ](ryoji-ikeda.jpg) ](http://www.ryojiikeda.com/project/testpattern/#testpattern_live_set)
+
+Randomness is a maximal expression of entropy. How can we generate randomness inside the seemingly predictable and rigid code environment?
+
+让我们从分析下面的函数着手:
+
+<div class="simpleFunction" data="y = fract(sin(x)*1.0);"></div>
+
+以上，我们提取sin函数其波形的分数部分。[```sin()```](../glossary/?search=sin) 函数值在 ```-1.0``` 到 ```1.0``` 之间浮点分布，返回作业在 ```0.0``` 到 ```1.0``` 间的正值。（这里翻译有些奇怪）我们可以用这种效果通过把 [```sin(x)```](../glossary/?search=sin) 打散成小片段来得到一些伪随机数。如何实现？乘以大些的sin值。在上面函数的相应位置加些0.
+
+当你加到 ```100000.0``` （方程看起来是这样的：```y = fract(sin(x)*100000.0)``` ），你再也区分不出sin波了。小数部分的粒度将sine的循环变成了伪随机的混沌。
+
+## 控制混沌
+
+使用随机会很难；它不是太混沌难测就是有时又不够混乱。看看下面的图例。要实现这样的效果，我们像之前描述的那样应用用 ```rand()``` 函数。
+
+细看，你可以看到 [```sin()```](../glossary/?search=sin) 在 ```-1.5707``` 和 ```1.5707``` 到拐点。？？？我打赌一定理解为什么——那就是sin最大值和最小值的地方。
+
+如果你仔细观察随机分布，你会注意到相比边缘，中部更集中。
+
+<div class="simpleFunction" data="y = rand(x);
+//y = rand(x)*rand(x);
+//y = sqrt(rand(x));
+//y = pow(rand(x),5.);"></div>
+
+
+不久前 [Pixelero](https://pixelero.wordpress.com) 出版了 [interesting article about random distribution](https://pixelero.wordpress.com/2008/04/24/various-functions-and-various-distributions-with-mathrandom/)。 我添加了些前几张图所有的函数来供你试验，看看如何改变分布。取消函数的注释，看看发生什么变化。
+
+如果你读下 [Pixelero's article](https://pixelero.wordpress.com/2008/04/24/various-functions-and-various-distributions-with-mathrandom/)，一定谨记我们用的 ```rand()``` 是确定性随机，也被称作是伪随机。这就意味着， 就 ```rand(1.)``` 为例，总会返回相同的值。[Pixelero](https://pixelero.wordpress.com/2008/04/24/various-functions-and-various-distributions-with-mathrandom/) 用 ActionSript 函数做了些参考，```Math.random()```，一个非确定性随机；每次调用都返回不同的值。
+
+## 2D 随机
+
+现在我们对随机有了深入的理解，是时候将它应用到二维，```x``` 轴和 ```y``` 轴。为此我们需要将一个二维向量转化为一维浮点数。这里有几种不同的方法来实现，但 [```dot()```](../glossary/?search=dot) 函数在这个例子中尤其有用。它根据两个向量的方向返回一个 ```0.0``` 到 ```1.0``` 之间的值。
+
+<div class="codeAndCanvas" data="2d-random.frag"></div>
+
+看下第13行和15行，注意我们如何将 ```vec2 st``` 和另一个二维向量 （ ```vec2(12.9898,78.233)```）。
+
+* 试着改变14和15行的值。看看随机图案的变化，想想从中我们能学到什么。
+
+* 好好用鼠标（```u_mouse```）和时间（```u_time```）调戏这个随机函数，更好的理解它如何工作。
+
+## 使用混沌
+
+二维的随机看起来是不是像电视的噪点？对组成图像来说，随机是个难用的原始素材。让我们来学着如何来利用它。
+
+我们的第一步是在网格上的应用；用 [```floor()```](../glossary/?search=floor) 函数，我们将会产生一个单元整数列表。看下下面的代码，尤其是22行和23行。
+
+<div class="codeAndCanvas" data="2d-random-mosaic.frag"></div>
+
+在缩放空间10倍后（在21行），我们将坐标系统的整数和小数部分分离。我们对最后一步操作不陌生，因为我们曾经用这种方法来将空间细分成 ```0.0``` 到 ```1.0``` 的小单元。我们根据得到坐标的整数部分作为一个通用值来隔离一个区域的像素，让它看起来像个单独的单元。然后我们可以用这个通用值来为这个区域得到一个随机值。因为我们的随机函数是伪随机，在那个单元内的所有像素返回的随机值都是一个常量。
+
+取消第29行保留我们坐标的小数部分，这样我们仍旧可以将其用作一个坐标系统，来在单元内部画图形。
+
+结合这两个量 — 坐标的整数部分和小数部分 — 将使你可以结合变化和秩序。
+
+看下这个著名的 ```10 PRINT CHR$(205.5+RND(1)); : GOTO 10```迷宫生成器的GLSL代码块。
+
+<div class="codeAndCanvas" data="2d-random-truchet.frag"></div>
+
+这里我用前一章的 ```truchetPattern()``` 函数根据单元产生的随机值来随机画一个方向的对角线。
+
+你可以通过取消50到53行的代码块的注释得到其他有趣的图案，或者通过取消35和36行来得到图案的动画。
+
+## 掌握随机
+
+[Ryoji Ikeda](http://www.ryojiikeda.com/)，日本电子作曲家、视觉艺术家，是运用随机的大师；他的作品是如此的富有感染力而难忘。他在音乐和视觉媒介中随机的运用，不再是混乱无序，反而以假乱真地折射出我们技术文化的复杂性。
+
+<iframe src="https://player.vimeo.com/video/76813693?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
+看看 [Ikeda](http://www.ryojiikeda.com/) 的作品并试试看下面的练习：
+
+* 做按行随机移动的单元（以相反方向）。只显示亮一些的单元。让各行的速度随时间变化。
+
+<a href="../edit.html#10/ikeda-00.frag"><canvas id="custom" class="canvas" data-fragment-url="ikeda-00.frag"  width="520px" height="200px"></canvas></a>
+
+* 同样地，让某几行以不同的速度和方向。用鼠标位置关联显示单元的阀值。
+
+<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>
+
+* 创早其他有趣的效果。
+
+<a href="../edit.html#10/ikeda-04.frag"><canvas id="custom" class="canvas" data-fragment-url="ikeda-04.frag"  width="520px" height="200px"></canvas></a>
+
+优雅的使用随机是困难的，尤其是你希望创作自然的模拟。随机仅仅是过于混乱了，真实生活中很少有东西看上去如此 ```random()```。如果观察（玻璃床上）雨滴的肌理或是股票的曲线 — 这两个都挺随机的 — 但是他们和我们在章开始的随机图案看起来不是同一对爹妈生的。原因？嗯，随机值是没有因果关系的，而大多数自然图案（肌理）都对前一个状态有所记忆（基于前一个状态）。
+
+下一章我们将学习噪波，一种光滑 和 *自然的* 创作计算机混沌的方式。
--- a/14/README.md
+++ b/14/README.md
@ -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!
--- a/14/texture-stereo-06.jpg
+++ b/14/texture-stereo-06.jpg
--- a/14/texture-stereo.frag
+++ b/14/texture-stereo.frag
@ -14,7 +14,7 @@ uniform float u_time;

 void main () {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
-    vec3 color = vec3(1.0);
+    vec4 color = vec4(vec3(0.0),1.);

    st *= vec2(.5,1.);

@ -22,11 +22,10 @@ void main () {
    float t = u_time*24.;
    float pct = step(.75,abs(sin((st.x+t)*3.1415*10.)));

-    vec3 A = texture2D(u_tex0,st).rgb;
-    vec3 B = texture2D(u_tex0,st+vec2(.5,.0)).rgb;
+    vec4 A = texture2D(u_tex0,st);
+    vec4 B = texture2D(u_tex0,st+vec2(.5,.0));

-    color = abs(A-B);
-    // color = mix(A, B, abs(sin(pct)));
-    
-    gl_FragColor = vec4(color,1.);
+    color = mix(A, B, abs(sin(t)));
+
+    gl_FragColor = color;
 }
--- a/README-kr.md
+++ b/README-kr.md
@ -0,0 +1,98 @@
+<canvas id="custom" class="canvas" data-fragment-url="examples/moon.frag" data-textures="examples/images/moon-texture.jpg" width="350px" height="350px"></canvas>
+
+# The Book of Shaders
+*by [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/)*
+
+이것은 황량하게 넓고 복잡한 Fragment Shader의 세계를 한단계씩 살펴보는 지침서입니다. 
+
+## 번역에 대하여
+
+이 문서는 Patricio Gonzalez Vivo의 The Book of Shader의 한국어 번역입니다.
+
+<div class="header">
+<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=B5FSVSHGEATCG" style="float: right;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt=""></a>
+</div>
+
+## 차례
+
+* [이 책에 대하여](00/)
+
+* 시작하기 앞서
+    * [쉐이더란 무엇인가?](01/)
+    * [“헬로 월드!”](02/)
+    * [유니폼](03/)
+	* [쉐이더 실행하기](04/)
+
+* Algorithmic drawing
+    * [모양 그리기](05/)
+    * [색에 대해](06/)
+    * [형태에 대해](07/)
+    * [행렬](08/)
+    * [패턴](09/)
+
+* Generative designs
+    * [랜덤](10/)
+    * [노이즈](11/)
+    * Fractional brownian motion
+    * Fractals
+
+* Image processing:
+    * Textures
+    * Image operations
+    * Kernel convolutions
+    * Filters
+    * Others effects
+
+* Simulation
+    * Pingpong
+    * Conway
+    * Ripples
+    * Water color
+    * Reaction diffusion
+
+* 3D graphics
+    * Lights
+    * Normal-maps
+    * Bump-maps
+    * Ray marching
+    * Environmental-maps (spherical and cube)
+    * Reflect and refract
+
+* [Appendix:](appendix/) Other ways to use this book
+	* [How can I navigate this book offline?](appendix/)
+	* [How to run the examples on a RaspberryPi?](appendix/)
+	* [How to print this book?](appendix/)
+
+* [Examples Gallery](examples/)
+
+* [Glossary](glossary/)
+
+## About the Author
+
+[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, 부에노스 아이레스, 아르헨티나) 는 뉴욕 기반의 아티스트 겸 개발자이다. 그는 유기적요소와 인공적요소, 아날로그와 디지털, 단일적요소와 집단적요소 사이를 탐험한다. 그는 사람들과 함께 개발하기위해 코드를 표현요소로 사용해 작업을 한다.
+
+Patricio는 심리치료 및 표현예술을 공부했다. 그는 파슨스대학에서 디자인 및 기술 석사학위를 보유하고 있고 그곳에서 학생을 가르치고 있다. 또한 그는 현재 Mapzen에서 그래픽스 엔지니어로 맵을 만드는 오픈소스툴을 개발중에 있다.
+
+<div class="header"><a href="https://twitter.com/patriciogv" target="_blank">Twitter</a> - <a href="https://github.com/patriciogonzalezvivo" target="_blank">GitHub</a> - <a href="https://vimeo.com/patriciogv" target="_blank">Vimeo</a> - <a href="https://www.flickr.com/photos/106950246@N06/" target="_blank"> Flickr</a></div>
+
+## 감사의 표시
+
+아내[Jen Lowe](http://www.datatelling.com/)의 끊임없는 격려과 이책에 대한 애정에 감사를 드립니다.
+
+영감과 격려를 아끼지 않는 [Scott Murray](http://alignedleft.com/)에게 감사를 표합니다.
+
+일본어 번역을 맡고 있는 [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) 와 [Sawako](https://twitter.com/sawakohome) 에게 감사를 표합니다. [Japanese translation (日本語訳)](?lan=jp)
+
+중국어 번역을 맡고 있는 [Tong Li](https://www.facebook.com/tong.lee.9484) 와 [Yi Zhang](https://www.facebook.com/archer.zetta?pnref=story) 에게 감사를 표합니다. [Chinese translation (中国的翻译)](?lan=ch)
+
+한국어 번역을 맡고 있는 [Jae Hyun Yoo](https://www.facebook.com/fkkcloud) 에게 감사를 표합니다. [Korean translation (한국어)](?lan=kr)
+
+좋은 아이디어와 코드를 제공해주는 [Karim Naaji](http://karim.naaji.fr/) 에게 감사를 표합니다.
+
+이 프로젝트를 격려해주시고 기부해주신 모든 분들께 감사를 드립니다. [contributed with fixes](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors)
+
+## 새로운 챕터 업데이트 받기
+
+뉴스 업데이트를 위해 팔로우 해주세요. [follow it on Twitter](https://twitter.com/bookofshaders)
+
+ <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://tinyletter.com/thebookofshaders" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/thebookofshaders', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"><a href="https://tinyletter.com/thebookofshaders"><p><label for="tlemail">Enter your email address</label></p></a><p><input type="text" style="width:140px" name="email" id="tlemail" /></p><input type="hidden" value="1" name="embed"/><input type="submit" value="Subscribe" /><p><a href="https://tinyletter.com" target="_blank"></a></p></form>
--- a/README.md
+++ b/README.md
@ -81,6 +81,8 @@ Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) and [Sawako](https:

 Thanks [Tong Li](https://www.facebook.com/tong.lee.9484) and [Yi Zhang](https://www.facebook.com/archer.zetta?pnref=story) for the [Chinese translation (中文版)](?lan=ch)

+Thanks [Jae Hyun Yoo](https://www.facebook.com/fkkcloud) for the Korean [translation (한국어)](?lan=kr)
+
 Thanks [Karim Naaji](http://karim.naaji.fr/) for contributing with support, good ideas and code.

 Thanks to everyone who has believed in this project and [contributed with fixes](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors) or donations.
--- a/chap-header.php
+++ b/chap-header.php
@ -3,7 +3,7 @@
 	echo '
 	<div class="header">
 		<p><a href="http://thebookofshaders.com/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a> </p>
-		<p><a href=".">English</a> - <a href="?lan=jp">日本語</a> - <a href="?lan=ch">中文版</a> </p>
+		<p><a href=".">English</a> - <a href="?lan=jp">日本語</a> - <a href="?lan=ch">中文版</a> - <a href="?lan=kr">한국어</a> </p>
 	</div>
 	<hr>
 	';
--- a/edit.html
+++ b/edit.html
@ -22,14 +22,16 @@
 		<div id="glsl_editor"></div>
 	</body>

-	<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/css/main.css">
-    <script type="text/javascript" src="
-https://cdn.rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/glslEditor.js
-"></script>
+	<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="text/javascript">
-    	window.glslEditor = new GlslEditor('#glsl_editor');
-    	window.addEventListener("hashchange", function () {
-            window.glslEditor.chechHash()
-        }, false);
+        window.glslEditor = new GlslEditor('#glsl_editor', { 
+            viewSize: 500, 
+            theme: 'monokai',
+            multipleBuffers: true,
+            watchHash: true,
+            fileDrops: true,
+            menu: true
+        });
    </script>
 </html>