<p dir="auto">At the moment the texture coordinates for the caps of cylinders aren't particularly useful.</p>
<p dir="auto"><a href="http://dl.dropbox.com/u/21084952/Screen%20shot%202011-04-13%20at%202.15.16%20PM.png" rel="nofollow">http://dl.dropbox.com/u/21084952/Screen%20shot%202011-04-13%20at%202.15.16%20PM.png</a></p>
<p dir="auto">Here are two example mappings that would be more useful...<br>
<a href="http://www.vrarchitect.net/anu/cg/Texture/Image/slide09.jpg" rel="nofollow">http://www.vrarchitect.net/anu/cg/Texture/Image/slide09.jpg</a><br>
<a href="http://www.vrarchitect.net/anu/cg/Texture/Image/slide12.jpg" rel="nofollow">http://www.vrarchitect.net/anu/cg/Texture/Image/slide12.jpg</a></p>
<p dir="auto">...although they're still not as good as they could be.</p>
<p dir="auto">I imagine it is how it is because the coordinates used for the sides of the cylinder are those used for the caps; giving the strange curved UVs on the caps. I'm not sure how to resolve the issue without duplicating the vertices on the edges of the side face and caps.</p>
<p dir="auto">Just an idea that I would love to see in three.js. Let's say I want to slightly edit <code class="notranslate">MeshPhongMaterial</code> and apply that changes.</p>
<p dir="auto"><strong>What I need to do now:</strong></p>
<ol dir="auto">
<li>Go to three.js github</li>
<li>Search for <code class="notranslate">vertexShader</code> &amp; <code class="notranslate">fragmentShader</code> in ShaderChunk. <a href="https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk.js#L215-L216">Find this</a>
<ul dir="auto">
<li>Make a copy of <a href="https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib/meshphong_frag.glsl"><code class="notranslate">fragmentShader</code></a> into my shader.</li>
<li>...or even <code class="notranslate">vertexShader</code></li>
</ul>
</li>
<li>Search for <code class="notranslate">uniforms</code> in ShaderLib. <a href="https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderLib.js#L50">like this</a></li>
<li>Make a new <code class="notranslate">ShaderMaterial</code> and apply those uniforms, vertexShader &amp; fragmentShader...</li>
<li>Finally edit my copied vertexShader/fragmentShader.</li>
<li>Even more: I need to enable fog/lights as it is on Phong material.</li>
<li>If I want to use <code class="notranslate">map</code>: I need to define <code class="notranslate">USE_MAP</code> for my new shader material.</li>
</ol>
<p dir="auto">Those things require copying/modifying existing <code class="notranslate">.glsl</code>, copying and filling uniforms and finally setting such uncommon things (6, 7).</p>
<p dir="auto">And my question is what if we could make this process less complex? How about making "key" parts in shaders (those which we often modify/add something). And a way to fill them with some other glsl through material constructor like this or just make those chunks replacable:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  map: texture,

  parts: {
    frag: {
      map_pars_fragment: `
        uniform sampler2D map;
        uniform sampler2D map2;
     `,

      map_fragment: `
        vec4 texelColor = texture2D( map, vUv );
        vec4 texelColor2 = texture2D( map2, vUv );

	texelColor = mapTexelToLinear( 
          mix( texelColor, texelColor2, progress)
        );

	diffuseColor *= texelColor;
      `
    }
  }
});

material.uniforms.progress = {value: 1};
material.uniforms.map2 = {value: texture2};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">material</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshPhongMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">color</span>: <span class="pl-c1">0xffffff</span><span class="pl-kos">,</span>
  <span class="pl-c1">map</span>: <span class="pl-s1">texture</span><span class="pl-kos">,</span>

  <span class="pl-c1">parts</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">frag</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">map_pars_fragment</span>: <span class="pl-s">`</span>
<span class="pl-s">        uniform sampler2D map;</span>
<span class="pl-s">        uniform sampler2D map2;</span>
<span class="pl-s">     `</span><span class="pl-kos">,</span>

      <span class="pl-c1">map_fragment</span>: <span class="pl-s">`</span>
<span class="pl-s">        vec4 texelColor = texture2D( map, vUv );</span>
<span class="pl-s">        vec4 texelColor2 = texture2D( map2, vUv );</span>
<span class="pl-s"></span>
<span class="pl-s">	texelColor = mapTexelToLinear( </span>
<span class="pl-s">          mix( texelColor, texelColor2, progress)</span>
<span class="pl-s">        );</span>
<span class="pl-s"></span>
<span class="pl-s">	diffuseColor *= texelColor;</span>
<span class="pl-s">      `</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">material</span><span class="pl-kos">.</span><span class="pl-c1">uniforms</span><span class="pl-kos">.</span><span class="pl-c1">progress</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">value</span>: <span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s1">material</span><span class="pl-kos">.</span><span class="pl-c1">uniforms</span><span class="pl-kos">.</span><span class="pl-c1">map2</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">value</span>: <span class="pl-s1">texture2</span><span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r85</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>