playing with glsl codes in the ipython notebook

gistfile1.txt

{
 "metadata": {
  "name": "",
  "signature": "sha256:9b19077405f3d19a20c586240f960df88ffc905854899a3cd49ffb16acc455d5"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "## ipython notebook\uc744 \uac00\uc9c0\uace0 \ub180\uc544\ubcf4\ub294 \uae40\uc5d0 \uc2e4\ud5d8\n",
      "\n",
      "- \uacfc\uc5f0 glsl\uacfc \uc5f0\ub3d9\uc774 \uc798 \ub420 \uac83\uc77c\uae4c?\n",
      "- ipython notebook \ud2b9\uc720\uc758 \uae30\ub2a5\uc774 \ucda9\ubd84\ud55c \uc758\ubbf8\ub97c \uac00\uc9c8 \uac83\uc778\uac00?"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<script id=\"vs\" type=\"x-shader/x-vertex\">\n",
      "  attribute vec2 a_pos;\n",
      "  void main() {\n",
      "    gl_Position = vec4(a_pos, 0.0, 1.0);\n",
      "  }\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<script id=\"vs\" type=\"x-shader/x-vertex\">\n",
        "  attribute vec2 a_pos;\n",
        "  void main() {\n",
        "    gl_Position = vec4(a_pos, 0.0, 1.0);\n",
        "  }\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x105067950>"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "\uba3c\uc800 \ubc84\ud14d\uc2a4 \uc250\uc774\ub354\uc758 \uc18c\uc2a4\ub97c \uc124\uc815\ud55c\ub2e4. \uc774 \ucf54\ub4dc\uc5d0\uc11c \ub80c\ub354\ub7ec\ub294 \ud504\ub798\uadf8\uba3c\ud2b8 \uc250\uc774\ub354 \uc18c\uc2a4\uc5d0 \uc8fc\ub85c \uae30\uc220\uc774 \ub420 \uc608\uc815."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<script id=\"fs\" type=\"x-shader/x-fragment\">\n",
      "  precision highp float;\n",
      "  uniform vec2 resolution;\n",
      "  uniform vec3 ps[%nds%];\n",
      "  uniform float time;\n",
      "\n",
      "  float sdPlane(in vec3 p) {\n",
      "    return p.y;\n",
      "  }\n",
      "\n",
      "  float sdSphere(in vec3 p, in float r) {\n",
      "    return length(p) - r;\n",
      "  }\n",
      "\n",
      "  float map(in vec3 p) {\n",
      "    float d = sdPlane(p);\n",
      "\n",
      "    for(int i = 0; i < %nds%; i++) {\n",
      "      vec3 v = vec3(ps[i].x, ps[i].y + 100.0, 0.0) / resolution.x;\n",
      "      d = min(d, sdSphere(p - v, ps[i].z / 100.0)); \n",
      "    }\n",
      "    return d;\n",
      "  }\n",
      "\n",
      "  float castRay(in vec3 ro, in vec3 rd, in float tmax) {\n",
      "    float e = 0.01;\n",
      "    float t = 0.0;\n",
      "    float h = e * 2.0;\n",
      "    for(int i = 0; i < 60; i++) {\n",
      "      if(h < e || t > tmax) continue;\n",
      "      h = map(ro + rd * t);\n",
      "      t += h;\n",
      "    }\n",
      "    return t;\n",
      "  }\n",
      "\n",
      "  vec3 calcNormal(in vec3 p) {\n",
      "    vec2 e = vec2(-1.0, 1.0) * 0.01;\n",
      "    return normalize(\n",
      "      e.xyy * map(p + e.xyy) +\n",
      "      e.yxy * map(p + e.yxy) +\n",
      "      e.yyx * map(p + e.yyx) +\n",
      "      e.xxx * map(p + e.xxx)\n",
      "    );\n",
      "  }\n",
      "\n",
      "  float shadow(in vec3 ro, in vec3 rd, in float tmin, in float tmax, in float k) {\n",
      "    float t = tmin;\n",
      "    float res = 1.0;\n",
      "    for(int i = 0; i < 20; i++) {\n",
      "      if(t > tmax) continue;\n",
      "      float h = map(ro + rd * t);\n",
      "      res = min(res, k * h / t);\n",
      "      t += h;\n",
      "    }\n",
      "    return res;\n",
      "  }\n",
      "\n",
      "  vec3 render(in vec3 ro, in vec3 rd) {\n",
      "    float t = castRay(ro, rd, 20.0);\n",
      "    vec3 p = ro + rd * t;\n",
      "    vec3 nor = calcNormal(p);\n",
      "    vec3 lig = normalize(vec3(-0.2, 0.5, 0.1));\n",
      "    float dif = clamp(dot(nor, lig), 0.0, 1.0);\n",
      "    float spe = pow(clamp(dot(reflect(rd, nor), lig), 0.0, 1.0), 32.0);\n",
      "    float sh = shadow(p, lig, 0.01, 20.0, 6.0); \n",
      "    return vec3(dif + spe) * sh;\n",
      "  }\n",
      "\n",
      "  void main() {\n",
      "    vec2 p = gl_FragCoord.xy / resolution;\n",
      "    p = 2.0 * p - 1.0;\n",
      "    p.x *= resolution.x / resolution.y;\n",
      "\n",
      "    float cx = 3.0 * sin(time);\n",
      "    float cz = 3.0 * cos(time);\n",
      "    vec3 ro = vec3(cx, 2.0, cz);\n",
      "    vec3 ta = vec3(0.0, 0.5, 0.0);\n",
      "    vec3 cw = normalize(ta - ro);\n",
      "    vec3 cup = vec3(0.0, 1.0, 0.0);\n",
      "    vec3 cu = normalize(cross(cw, cup));\n",
      "    vec3 cv = normalize(cross(cu, cw));\n",
      "    vec3 rd = normalize(vec3(p.x * cu + p.y * cv + 2.5 * cw));\n",
      "\n",
      "    vec3 col = render(ro, rd);\n",
      "    gl_FragColor = vec4(col, 1.0);\n",
      "  }\n",
      "</script>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<script id=\"fs\" type=\"x-shader/x-fragment\">\n",
        "  precision highp float;\n",
        "  uniform vec2 resolution;\n",
        "  uniform vec3 ps[%nds%];\n",
        "  uniform float time;\n",
        "\n",
        "  float sdPlane(in vec3 p) {\n",
        "    return p.y;\n",
        "  }\n",
        "\n",
        "  float sdSphere(in vec3 p, in float r) {\n",
        "    return length(p) - r;\n",
        "  }\n",
        "\n",
        "  float map(in vec3 p) {\n",
        "    float d = sdPlane(p);\n",
        "\n",
        "    for(int i = 0; i < %nds%; i++) {\n",
        "      vec3 v = vec3(ps[i].x, ps[i].y + 100.0, 0.0) / resolution.x;\n",
        "      d = min(d, sdSphere(p - v, ps[i].z / 100.0)); \n",
        "    }\n",
        "    return d;\n",
        "  }\n",
        "\n",
        "  float castRay(in vec3 ro, in vec3 rd, in float tmax) {\n",
        "    float e = 0.01;\n",
        "    float t = 0.0;\n",
        "    float h = e * 2.0;\n",
        "    for(int i = 0; i < 60; i++) {\n",
        "      if(h < e || t > tmax) continue;\n",
        "      h = map(ro + rd * t);\n",
        "      t += h;\n",
        "    }\n",
        "    return t;\n",
        "  }\n",
        "\n",
        "  vec3 calcNormal(in vec3 p) {\n",
        "    vec2 e = vec2(-1.0, 1.0) * 0.01;\n",
        "    return normalize(\n",
        "      e.xyy * map(p + e.xyy) +\n",
        "      e.yxy * map(p + e.yxy) +\n",
        "      e.yyx * map(p + e.yyx) +\n",
        "      e.xxx * map(p + e.xxx)\n",
        "    );\n",
        "  }\n",
        "\n",
        "  float shadow(in vec3 ro, in vec3 rd, in float tmin, in float tmax, in float k) {\n",
        "    float t = tmin;\n",
        "    float res = 1.0;\n",
        "    for(int i = 0; i < 20; i++) {\n",
        "      if(t > tmax) continue;\n",
        "      float h = map(ro + rd * t);\n",
        "      res = min(res, k * h / t);\n",
        "      t += h;\n",
        "    }\n",
        "    return res;\n",
        "  }\n",
        "\n",
        "  vec3 render(in vec3 ro, in vec3 rd) {\n",
        "    float t = castRay(ro, rd, 20.0);\n",
        "    vec3 p = ro + rd * t;\n",
        "    vec3 nor = calcNormal(p);\n",
        "    vec3 lig = normalize(vec3(-0.2, 0.5, 0.1));\n",
        "    float dif = clamp(dot(nor, lig), 0.0, 1.0);\n",
        "    float spe = pow(clamp(dot(reflect(rd, nor), lig), 0.0, 1.0), 32.0);\n",
        "    float sh = shadow(p, lig, 0.01, 20.0, 6.0); \n",
        "    return vec3(dif + spe) * sh;\n",
        "  }\n",
        "\n",
        "  void main() {\n",
        "    vec2 p = gl_FragCoord.xy / resolution;\n",
        "    p = 2.0 * p - 1.0;\n",
        "    p.x *= resolution.x / resolution.y;\n",
        "\n",
        "    float cx = 3.0 * sin(time);\n",
        "    float cz = 3.0 * cos(time);\n",
        "    vec3 ro = vec3(cx, 2.0, cz);\n",
        "    vec3 ta = vec3(0.0, 0.5, 0.0);\n",
        "    vec3 cw = normalize(ta - ro);\n",
        "    vec3 cup = vec3(0.0, 1.0, 0.0);\n",
        "    vec3 cu = normalize(cross(cw, cup));\n",
        "    vec3 cv = normalize(cross(cu, cw));\n",
        "    vec3 rd = normalize(vec3(p.x * cu + p.y * cv + 2.5 * cw));\n",
        "\n",
        "    vec3 col = render(ro, rd);\n",
        "    gl_FragColor = vec4(col, 1.0);\n",
        "  }\n",
        "</script>"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x105069310>"
       ]
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "\uadf8\ub7f0\ub370 \uc774\ub7f0\uc2dd\uc73c\ub85c \ud558\uba74 HTML \uc694\uc18c\uac00 \ucd94\uac00\uac00 \uc798 \ub418\uace0 \uc788\ub294 \uac83\uc77c\uae4c? console\uc5d0\uc11c \ucc0d\uc5b4\ubd10\uc57c \uc54c \uc218 \uc788\uc744 \uac83 \uac19\ub2e4. \ud06c\ub86c \uac1c\ubc1c\uc790 \ucf58\uc194\uc744 \uc5f4\uace0 \ucffc\ub9ac\ub97c \ub0a0\ub824\ubcf4\ub2c8\uae4c \uc798 \ud655\uc778\ud560 \uc218 \uc788\uc5c8\ub2e4. \ub2e8, \uc5b4\ub514\uc5d0 \ub4e4\uc5b4\uac00 \uc788\ub294 \uac83\uc778\uc9c0\ub294 \uc544\uc9c1 \uc798 \ubaa8\ub974\uaca0\ub2e4."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<canvas id=\"canvas\">"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "<canvas id=\"canvas\">"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.HTML at 0x105067b10>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];\n",
      "var ds = [];\n",
      "dataset.forEach(function(d) {\n",
      "  ds.push(d[0], d[1], Math.sqrt(100 - d[1]));\n",
      "});\n",
      "\n",
      "var gl = document.querySelector('#canvas').getContext('webgl');\n",
      "gl.canvas.width = 400;\n",
      "gl.canvas.height = 300;\n",
      "gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n",
      "\n",
      "var vsSrc = document.querySelector('#vs').textContent;\n",
      "var fsSrc = document.querySelector('#fs').textContent;\n",
      "\n",
      "fsSrc = fsSrc.replace(/%nds%/g, dataset.length);\n",
      "\n",
      "var vs = gl.createShader(gl.VERTEX_SHADER);\n",
      "gl.shaderSource(vs, vsSrc);\n",
      "gl.compileShader(vs);\n",
      "if(gl.getShaderInfoLog(vs)) {\n",
      "  console.log(gl.getShaderInfoLog(vs));\n",
      "}\n",
      "\n",
      "var fs = gl.createShader(gl.FRAGMENT_SHADER);\n",
      "gl.shaderSource(fs, fsSrc);\n",
      "gl.compileShader(fs);\n",
      "if(gl.getShaderInfoLog(fs)) {\n",
      "  console.log(gl.getShaderInfoLog(fs));\n",
      "}\n",
      "\n",
      "var prog = gl.createProgram();\n",
      "gl.attachShader(prog, vs);\n",
      "gl.attachShader(prog, fs);\n",
      "gl.linkProgram(prog);\n",
      "\n",
      "var a_pos = gl.getAttribLocation(prog, 'a_pos');\n",
      "gl.enableVertexAttribArray(a_pos);\n",
      "var vb = gl.createBuffer();\n",
      "gl.bindBuffer(gl.ARRAY_BUFFER, vb);\n",
      "gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n",
      "\n",
      "gl.useProgram(prog);\n",
      "var u_resolution = gl.getUniformLocation(prog, 'resolution');\n",
      "var u_time = gl.getUniformLocation(prog, 'time');\n",
      "var u_ps= gl.getUniformLocation(prog, 'ps');\n",
      "gl.uniform2f(u_resolution, gl.canvas.width, gl.canvas.height);\n",
      "gl.uniform3fv(u_ps, ds);\n",
      "\n",
      "gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);\n",
      "\n",
      "var frameCount = 0;\n",
      "var time = 0;\n",
      "var draw = function() {\n",
      "  gl.uniform1f(u_time, time);\n",
      "  gl.clear(gl.COLOR_BUFFER);\n",
      "  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n",
      "};\n",
      "\n",
      "var loop = function() {\n",
      "  time = frameCount / 60;\n",
      "  draw();\n",
      "  frameCount++;\n",
      "  requestAnimationFrame(loop);\n",
      "};\n",
      "\n",
      "loop();"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];\n",
        "var ds = [];\n",
        "dataset.forEach(function(d) {\n",
        "  ds.push(d[0], d[1], Math.sqrt(100 - d[1]));\n",
        "});\n",
        "\n",
        "var gl = document.querySelector('#canvas').getContext('webgl');\n",
        "gl.canvas.width = 400;\n",
        "gl.canvas.height = 300;\n",
        "gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n",
        "\n",
        "var vsSrc = document.querySelector('#vs').textContent;\n",
        "var fsSrc = document.querySelector('#fs').textContent;\n",
        "\n",
        "fsSrc = fsSrc.replace(/%nds%/g, dataset.length);\n",
        "\n",
        "var vs = gl.createShader(gl.VERTEX_SHADER);\n",
        "gl.shaderSource(vs, vsSrc);\n",
        "gl.compileShader(vs);\n",
        "if(gl.getShaderInfoLog(vs)) {\n",
        "  console.log(gl.getShaderInfoLog(vs));\n",
        "}\n",
        "\n",
        "var fs = gl.createShader(gl.FRAGMENT_SHADER);\n",
        "gl.shaderSource(fs, fsSrc);\n",
        "gl.compileShader(fs);\n",
        "if(gl.getShaderInfoLog(fs)) {\n",
        "  console.log(gl.getShaderInfoLog(fs));\n",
        "}\n",
        "\n",
        "var prog = gl.createProgram();\n",
        "gl.attachShader(prog, vs);\n",
        "gl.attachShader(prog, fs);\n",
        "gl.linkProgram(prog);\n",
        "\n",
        "var a_pos = gl.getAttribLocation(prog, 'a_pos');\n",
        "gl.enableVertexAttribArray(a_pos);\n",
        "var vb = gl.createBuffer();\n",
        "gl.bindBuffer(gl.ARRAY_BUFFER, vb);\n",
        "gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n",
        "\n",
        "gl.useProgram(prog);\n",
        "var u_resolution = gl.getUniformLocation(prog, 'resolution');\n",
        "var u_time = gl.getUniformLocation(prog, 'time');\n",
        "var u_ps= gl.getUniformLocation(prog, 'ps');\n",
        "gl.uniform2f(u_resolution, gl.canvas.width, gl.canvas.height);\n",
        "gl.uniform3fv(u_ps, ds);\n",
        "\n",
        "gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0, 0);\n",
        "\n",
        "var frameCount = 0;\n",
        "var time = 0;\n",
        "var draw = function() {\n",
        "  gl.uniform1f(u_time, time);\n",
        "  gl.clear(gl.COLOR_BUFFER);\n",
        "  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n",
        "};\n",
        "\n",
        "var loop = function() {\n",
        "  time = frameCount / 60;\n",
        "  draw();\n",
        "  frameCount++;\n",
        "  requestAnimationFrame(loop);\n",
        "};\n",
        "\n",
        "loop();"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x1050692d0>"
       ]
      }
     ],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "\uc77c\ub2e8 \uc2e4\ud589\uc774 \ub418\ub294 \uac83\uc740 \ud655\uc778\ud560 \uc218 \uc788\uc5c8\ub2e4. %%html \ub9e4\uc9c1\uacfc %%javascript \ub9e4\uc9c1\uc744 \uc11e\uc5b4\uc11c \uc4f0\ub294 \ud3b8\uc774 \ud6e8\uc52c \uac00\ub3c5\uc131\uc774 \ub192\uc740 \ub4ef \ud558\ub2e4.\n",
      "\n",
      "gl \uc14b\uc5c5\ud558\ub294 \ubd80\ubd84\uacfc data\uc5d0 \uad00\ub828\ud55c \ubd80\ubd84, \uadf8\ub9ac\uace0 update, draw\ub97c \ud638\ucd9c\ud558\ub294 loop\uc740 \ubb38\uc11c \uc548\uc5d0\uc11c \ubd84\ub9ac\uc2dc\ud0a4\ub294 \ud3b8\uc774 \uc88b\uc744 \uac83 \uac19\ub2e4. \uac00\ub2a5\ud55c\uc9c0\ub294 \ubaa8\ub974\uaca0\uc9c0\ub9cc \uc250\uc774\ub354\ub97c \ubd80\ubd84 \ubd80\ubd84 \ub098\ub220\uc11c \uc4f8 \uc218 \uc788\ub2e4\uba74 \ub354 \uc88b\uc744\ud150\ub370 \uc544\ubb34\ub798\ub3c4 \uadf8 \uc811\uadfc\uc740 \uc26c\uc6cc\ubcf4\uc774\uc9c4 \uc54a\ub294\ub2e4.\n",
      "\n",
      "\uadf8\ub798\ub3c4 \uc5b4\ub5a4 \uc2dd\uc73c\ub85c \uac00\uc9c0\uace0 \ub180 \uc218 \uc788\ub294\uc9c0\ub294 \ubc29\ud5a5\uc744 \uc7a1\uc558\ub294\ub370, js \ub9d0\uace0 python\uc73c\ub85c\ub3c4 \ub2e4\ub8f0 \uc218 \uc788\ub2e4\uba74 \uc4f8\ubaa8\uac00 \ub354 \ub9ce\uc9c0 \uc54a\uc744\uae4c? \uc911\uac04 \uc911\uac04 \ucf54\ub4dc\uc758 \uac1c\ub150\uc744 \uc124\uba85\ud558\ub294 \ubb38\uc11c\uc640 \uc778\ud130\ub799\ud2f0\ube0c \uc791\uc5c5\uc744 \uc11e\ub294 \uc2dc\ub3c4\ub97c \ub2e4\uc74c\uc5d0 \ud574\ubd10\uc57c \uaca0\ub2e4."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}