File talk:Parallax barrier vs lenticular screen.svg

Latest comment: 12 years ago by Cmglee

Cool illustration. (with those semitransparent surfaces and outlines) How did you make it - is it drawn or really 3D? ...Or a combination of those two?

Thank you! It was "drawn" in Notepad++ by manually entering the Scalable Vector Graphics code below. The 3D effect is similar to the dimetric projection used in older video games. cmɢʟeeτaʟκ 18:45, 16 June 2011 (UTC)Reply
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-180 -166 256 384">
 <title>Comparison of parallax-barrier and lenticular autostereoscopic displays</title>
 <desc>Comparison of two autostereoscopic displays: Parallax barrier and Lenticular, by CMG Lee.</desc>
 <defs>
  <radialGradient id="grad_eye" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
   <stop offset="25%" stop-color="#ffffff"/>
   <stop offset="100%" stop-color="#cccccc"/>
  </radialGradient>

  <linearGradient id="grad_lens" x1="100%" y1="0%" x2="0%" y2="0%">
   <stop offset="0%" stop-color="#0099ff" stop-opacity="0.5"/>
   <stop offset="100%" stop-color="#ffffff" stop-opacity="0.5"/>
  </linearGradient>

  <path id="bar" d="M -7 -3 l 14 7 v 40 l -14 -7 Z" fill="#333333"/>
  <g id="barrier">
   <use transform="translate(-84,-22)" xlink:href="#bar"/>
   <use transform="translate(-52,-6)" xlink:href="#bar"/>

   <use transform="translate(-20,10)" xlink:href="#bar"/>
   <use transform="translate(12,26)" xlink:href="#bar"/>
   <use transform="translate(44,42)" xlink:href="#bar"/>
   <line x1="-90" y1="-15" x2="-110" y2="-25" stroke-width="0.5"/>
   <text x="-110" y="-25" text-anchor="end" stroke="none">
    <tspan>Parallax</tspan><tspan x="-115" dy="1em">barrier</tspan>
   </text>
  </g>

  <path id="lens" d="M -16 -8 q 0 16 32 16 v 40 q -32 0 -32 -16 Z" fill="url(#grad_lens)"/>
  <g id="lenses">
   <path d="M -64 -32 v 40 l 128 64" fill="none"/>
   <path d="M -64 8 l -20 10 v -40 l 20 -10 l 128 64 v 40 l -20 10 v -20" fill="url(#grad_lens)"/>
   <path d="M 64 32 l -20 10"/>
   <use transform="translate(-68,-14)" xlink:href="#lens"/>
   <use transform="translate(-36,2)" xlink:href="#lens"/>
   <use transform="translate(-4,18)" xlink:href="#lens"/>

   <use transform="translate(28,34)" xlink:href="#lens"/>
   <line x1="-84" y1="-22" x2="-100" y2="-30" stroke-width="0.5"/>
   <text x="-100" y="-25" text-anchor="end" stroke="none">
    <tspan>Lenticular</tspan><tspan x="-120" dy="1em">lens</tspan>
   </text>
  </g>

  <g id="col">

   <path d="M -10 -5 l 10 -5 l 20 10 v 40 l -10 5 l -20 -10 Z"/>
   <path d="M 10 5 l 10 -5 v 40 l -10 5 Z" fill="#000000" fill-opacity="0.6"/>
   <path d="M 10 5 l -20 -10 v 40 l 20 10 Z" fill="#000000" fill-opacity="0.5"/>
  </g>
  <g id="col_r">
   <use xlink:href="#col" fill="#ff9999"/>
   <text x="10" y="-5" text-anchor="start" stroke="none">R</text>
  </g>

  <g id="col_l">
   <use xlink:href="#col" fill="#99cc66"/>
   <text x="10" y="-5" text-anchor="start" stroke="none">L</text>
  </g>
  <g id="screen">
   <use transform="translate(-50,-25)" xlink:href="#col_l"/>
   <use transform="translate(-30,-15)" xlink:href="#col_r"/>
   <use transform="translate(-10,-5)" xlink:href="#col_l"/>

   <use transform="translate(10,5)" xlink:href="#col_r"/>
   <use transform="translate(30,15)" xlink:href="#col_l"/>
   <use transform="translate(50,25)" xlink:href="#col_r"/>
   <line x1="-50" y1="-30" x2="-90" y2="-50" stroke-width="0.5"/>
   <text x="-90" y="-50" text-anchor="end" stroke="none">Screen</text>
  </g>

  <g id="parallax_1" stroke="#669900" fill="#99cc66" fill-opacity="0.75">
   <path d="M -60 -30 l -80 60 l 100 -50"/>

   <path d="M -20 -10 l -120 40 l 140 -30"/>
   <path d="M 20 10 l -160 20 l 180 -10"/>
  </g>
  <g id="parallax_2" stroke="#cc6666" fill="#ff9999" fill-opacity="0.5">
   <path d="M -40 -20 l -20 90 l 40 -80"/>
   <path d="M 0 0 l -60 70 l 80 -60"/>
   <path d="M 40 20 l -100 50 l 120 -40"/>
  </g>

  <g id="lenticular_1" stroke="#669900" fill="#99cc66" fill-opacity="0.75">
   <path d="M -60 -30 L -84 -20 L -140 30 L -56 -6 L -40 -20"/>
   <path d="M -20 -10 L -52 -4 L -140 30 L -24 10 L 0 0"/>
   <path d="M 20 10 L -20 12 L -140 30 L 6 26 L 40 20"/>
  </g>
  <g id="lenticular_2" stroke="#cc6666" fill="#ff9999" fill-opacity="0.5">
   <path d="M -40 -20 L -52 -4 L -60 70 L -24 10 L -20 -10"/>
   <path d="M 0 0 L -20 12 L -60 70 L 6 26 L 20 10"/>
   <path d="M 40 20 L 10 28 L -60 70 L 38 42 L 60 30"/>

  </g>

  <g id="eye_1" transform="translate(-140,30)">
   <ellipse cx="0" cy="0" rx="20" ry="20" fill="url(#grad_eye)"/>
   <ellipse transform="translate(14,-5) rotate(-20)" cx="0" cy="0" rx="5" ry="10" fill="#663300"/>
   <ellipse transform="translate(16,-6) rotate(-20)" cx="0" cy="0" rx="2" ry="6" fill="#000000"/>
   <ellipse cx="15" cy="-9" rx="1" ry="2" stroke="none" fill="#cccccc"/>
   <text x="0" y="40" text-anchor="middle" stroke="none">Left eye</text>
  </g>

  <g id="eye_2" transform="translate(-60,70)">
   <ellipse cx="0" cy="0" rx="20" ry="20" fill="url(#grad_eye)"/>
   <text x="0" y="40" text-anchor="middle" stroke="none">Right eye</text>
  </g>

  <g id="main" text-anchor="middle" font-family="sans-serif" font-size="16" stroke="#000000" fill="#000000">
   <g transform="translate(0,-100)">
    <use xlink:href="#screen"/>
    <use xlink:href="#barrier"/>

    <use xlink:href="#parallax_1"/>
    <use xlink:href="#parallax_2"/>
    <use xlink:href="#eye_1"/>
    <use xlink:href="#eye_2"/>
   </g>

   <g transform="translate(0,100)">
    <use xlink:href="#screen"/>
    <use xlink:href="#lenses"/>

    <use xlink:href="#lenticular_1"/>
    <use xlink:href="#lenticular_2"/>
    <use xlink:href="#eye_1"/>
    <use xlink:href="#eye_2"/>
   </g>
  </g>
 </defs>
 <use xlink:href="#main" />
</svg>