title: How to use a shaderModifier to alter the color of specific triangles in a SCNGeometry
body: <p>First, before I go on, I have read through: <a href="https://stackoverflow.com/questions/26129111/ios8-scenekit-painting-on-texture-with-texture-coordinates">SceneKit painting on texture with texture coordinates</a> which seems to suggest I'm on the right track.</p>
  
  <p>I have a complex SCNGeometry representing a hexasphere.  It's rendering really well, and with a full 60fps on all of my test devices.</p>
  
  <p>At the moment, all of the hexagons are being rendered with a single material, because, as I understand it, every SCNMaterial I add to my geometry adds another draw call, which I can't afford.</p>
  
  <p>Ultimately, I want to be able to color each of the almost 10,000 hexagons individually, so adding another material for each one is not going to work.</p>
  
  <p>I had been planning to limit the color range to (say) 100 colors, and then move hexagons between different geometries, each with their own colored material, but that won't work because SCNGeometry says it works with an immutable set of vertices.</p>
  
  <p>So, my current thought/plan is to use a shader modifier as suggested by @rickster in the above-mentioned question to somehow modify the color of individual hexagons (or sets of 4 triangles).</p>
  
  <p>The thing is, I sort of understand the Apple doco referred to, but I don't understand how to provide the shader with what I think must essentially be an array of colour information, somehow indexed so that the shader knows which triangles to give what colors.</p>
  
  <p>The code I have now, that creates the geometry reads as:</p>
  
  <pre><code>NSData *indiceData = [NSData dataWithBytes:oneMeshIndices length:sizeof(UInt32) * indiceIndex];
  SCNGeometryElement *oneMeshElement =
      [SCNGeometryElement geometryElementWithData:indiceData
                                    primitiveType:SCNGeometryPrimitiveTypeTriangles
                                   primitiveCount:indiceIndex / 3
                                    bytesPerIndex:sizeof(UInt32)];
  [oneMeshElements addObject:oneMeshElement];
  
  SCNGeometrySource *oneMeshNormalSource =
      [SCNGeometrySource geometrySourceWithNormals:oneMeshNormals count:normalIndex];
  
  SCNGeometrySource *oneMeshVerticeSource =
      [SCNGeometrySource geometrySourceWithVertices:oneMeshVertices count:vertexIndex];
  
  SCNGeometry *oneMeshGeom =
      [SCNGeometry geometryWithSources:[NSArray arrayWithObjects:oneMeshVerticeSource, oneMeshNormalSource, nil]
                              elements:oneMeshElements];
  
  SCNMaterial *mat1 = [SCNMaterial material];
  mat1.diffuse.contents = [UIColor greenColor];
  oneMeshGeom.materials = @[mat1];
  SCNNode *node = [SCNNode nodeWithGeometry:oneMeshGeom];
  </code></pre>
  
  <p>If someone can shed some light on how to provide the shader with a way to color each triangle indexed by the indices in indiceData, that would be fantastic.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've tried looking at providing the shader with a texture as a container for color information that would be indexed by the VertexID however it seems that SceneKit doesn't make the VertexID available.  My thought was to provide this texture (actually just an array of bytes, 1 per hexagon on the hexasphere), via the SCNMaterialProperty class and then, in the shader, pull out the appropriate byte, based on the vertex number.  That byte would be used to index an array of fixed colors and the resultant color for each vertex would then give the desired result.</p>
  
  <p>Without a VertexID, this idea won't work, unless there is some other, similarly useful piece of data...</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Perhaps I am stubborn.  I've been trying to get this to work, and as an experiment I created an image that is basically a striped rainbow and wrote the following shader, thinking it would basically colour my sphere with the rainbow.</p>
  
  <p>It doesn't work.  The entire sphere is drawn using the colour in the top left corner of the image.</p>
  
  <p>My shaderModifer code is:</p>
  
  <pre><code>#pragma arguments
  sampler2D colorMap;
  uniform sampler2D colorMap;
  #pragma body
  vec4 color = texture2D(colorMap, _surface.diffuseTexcoord);
  _surface.diffuse.rgba = color;
  </code></pre>
  
  <p>and I apply this using the code:</p>
  
  <pre><code>SCNMaterial *mat1 = [SCNMaterial material];
  mat1.locksAmbientWithDiffuse = YES;
  mat1.doubleSided = YES;
  
  mat1.shaderModifiers = @{SCNShaderModifierEntryPointSurface :
                               @"#pragma arguments\nsampler2D colorMap;\nuniform sampler2D colorMap;\n#pragma body\nvec4 color = texture2D(colorMap, _surface.diffuseTexcoord);\n_surface.diffuse.rgba = color;"};
  
  colorMap = [SCNMaterialProperty materialPropertyWithContents:[UIImage imageNamed:@"rainbow.png"]];
  
  [mat1 setValue:colorMap forKeyPath:@"colorMap"];
  </code></pre>
  
  <p>I had thought that the _surface.diffuseTexcoord would be appropriate but I'm beginning to think I need to somehow map that to a coordinate in the image by knowing the dimensions of the image and interpolating somehow.</p>
  
  <p>But if this is the case, what units are _surface.diffuseTexcoord in?  How do I know the min/max range of this so that I can map it to the image?</p>
  
  <p>Once again, I'm hoping someone can steer me in the right direction if these attempts are wrong.</p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>OK, so I know I'm on the right track now.  I've realised that by using _surface.normal instead of _surface.diffuseTexcoord I can use that as a latitude/longitude on my sphere to map to an x,y in the image and I now see the hexagons being colored based on the color in the colorMap however it doesn't matter what I do (so far); the normal angles seem to be fixed in relation to the camera position, so when I move the camera to look at a different point of the sphere, the colorMap doesn't rotate with it.</p>
  
  <p>Here is the latest shader code:</p>
  
  <pre><code> #pragma arguments
   sampler2D colorMap;
   uniform sampler2D colorMap;
   #pragma body
   float x = ((_surface.normal.x * 57.29577951) + 180.0) / 360.0;
   float y = 1.0 - ((_surface.normal.y * 57.29577951) + 90.0) / 180.0;
   vec4 color = texture2D(colorMap, vec2(x, y));
   _output.color.rgba = color;
  </code></pre>
  
  <p><strong>ANSWER</strong></p>
  
  <p>So I solved the problem.  It turned out that there was no need for a shader to achieve my desired results.</p>
  
  <p>The answer was to use a <a href="http://developer.apple.com/reference/scenekit/scnmaterialproperty/1395405-mappingchannel" rel="nofollow noreferrer"><code>mappingChannel</code></a> to provide the geometry with a set of texture coordinates for each vertex.  These texture coordinates are used to pull color data from the appropriate texture (it all depends on how you set up your material).</p>
  
  <p>So, whilst I did manage to get a shader working, there were performance issues on older devices, and using a mappingChannel was much much better, working at 60fps on all devices now.</p>
  
  <p>I did find though that despite the documentation saying that a mapping channel is a series of CGPoint objects, that wouldn't work on 64 bit devices because CGPoint seems to use doubles instead of floats.</p>
  
  <p>I needed to define my own struct:</p>
  
  <pre><code>typedef struct {
    float x;
    float y;
  } MyPoint;
  
  MyPoint oneMeshTextureCoordinates[vertexCount];
  </code></pre>
  
  <p>and then having built up an array of these, one for each vertex, I then created the mappingChannel source as follows:</p>
  
  <pre><code>SCNGeometrySource *textureMappingSource =
    [SCNGeometrySource geometrySourceWithData:
      [NSData dataWithBytes:oneMeshTextureCoordinates
                     length:sizeof(MyPoint) * vertexCount]
                                     semantic:SCNGeometrySourceSemanticTexcoord
                                  vertexCount
                              floatComponents:YES
                          componentsPerVector:2
                            bytesPerComponent:sizeof(float)
                                   dataOffset:0
                                   dataStride:sizeof(MyPoint)];
  </code></pre>
  
  <p>EDIT:
  In response to a request, here is a project that demonstrates how I use this.  <a href="https://github.com/pkclsoft/HexasphereDemo" rel="nofollow noreferrer">https://github.com/pkclsoft/HexasphereDemo</a></p>