三维模型上的webGL等高线颜色绘制

Question

我在软件上工作，这是可视化的三维模型表面上的工程数据作为彩色地图。为此，我使用WebGL。当时我可以在3D模型的表面上显示颜色。但现在我需要改进可视化，以便在颜色之间进行尖锐的转换(不需要在三角形表面上进行颜色插值)。我不确定如何有效地做到这一点。

平滑等值线图

​

​

清晰的等高线图

​

​

Answer 1

现在还不清楚你想要做什么。首先，您没有提供足够的信息来了解颜色是如何选择/计算的。

我只能猜出几个可能符合你描述的解决方案。

使用色散类型技术的

1. 后处理

你可以做一个简单的

gl_FragColor.rgb = floor(gl_FragColor.rgb * numLevels) / numLevels；

或者你可以在一些颜色空间中这样做

//转换为HSV vec3 hsv = rgb2hsv( gl_FragColor.rgb )；//仅量化色调hsv.x = floor(hsv.x * numLevels) / numLevels；//音乐会恢复为RGB gl_FragColor.rgb= hsv2rgb(hsv)；

或者你也可以在你的3D着色器中这样做，它不需要是后期处理。

您可以找到rgb2hsv和hsv2rgb here，但当然也可以使用其他颜色空间。

示例：

​

const gl = document.querySelector('canvas').getContext('webgl');
const m4 = twgl.m4;
const v3 = twgl.v3;
// used to generate colors
const ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = 1;
ctx.canvas.height = 1;

const vs = `
  attribute vec4 position;
  attribute vec3 normal;

  // note: there is no reason this has to come from an attrbute (per vertex)
  // it could just as easily come from a texture used in the fragment shader
  // for more resolution

  attribute vec4 color;

  uniform mat4 projection;
  uniform mat4 modelView;
  
  varying vec3 v_normal;
  varying vec4 v_color;
  
  void main () {
    gl_Position = projection * modelView * position;
    v_normal = mat3(modelView) * normal;
    v_color = color;
  }
`;
const fs = `
  precision mediump float;
  
  varying vec3 v_normal;
  varying vec4 v_color;
  
  uniform float numLevels;
  uniform vec3 lightDirection;

  vec3 rgb2hsv(vec3 c) {
    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
  }

  vec3 hsv2rgb(vec3 c) {
    c = vec3(c.x, clamp(c.yz, 0.0, 1.0));
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }

  void main() {
    vec3 hsv = rgb2hsv(v_color.rgb);
    
    hsv.x = floor(hsv.x * numLevels) / numLevels;
    
    vec3 rgb = hsv2rgb(hsv);
    
    // fake light
    float light = dot(normalize(v_normal), lightDirection) * .5 + .5;
    
    gl_FragColor = vec4(rgb * light, v_color.a);
    
    // uncomment next line to see without hue quantization
    // gl_FragColor = v_color;
  }
`;
  
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

const radius = 5;
const thickness = 2;
const radialDivisions = 32;
const bodyDivisions = 12;
// creates positions, normals, etc...
const arrays = twgl.primitives.createTorusVertices(
    radius, thickness, radialDivisions, bodyDivisions);

// add colors  for each vertex
const numVerts = arrays.position.length / 3;
const colors = new Uint8Array(numVerts * 4);
for (let i = 0; i < numVerts; ++i) {
  const pos = arrays.position.subarray(i * 3, i * 3 + 3);
  const dist = v3.distance([3, 1, 3 + Math.sin(pos[0])], pos);
  colors.set(hsla(clamp(dist / 10, 0, 1), 1, .5, 1), i * 4);
}
arrays.color = {
  numComponents: 4,
  data: colors,
};

// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each
// array in arrays
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

gl.enable(gl.DEPTH_TEST);

const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const halfHeight = 8;
const halfWidth = halfHeight * aspect;
const projection = m4.ortho(
  -halfWidth, halfWidth,
  -halfHeight, halfHeight,
  -2, 2);
const modelView = m4.identity();
m4.rotateX(modelView, Math.PI * .5, modelView);

gl.useProgram(programInfo.program);

// calls gl.bindbuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
// for each attribute
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);

// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
twgl.setUniforms(programInfo, {
  projection,
  modelView,
  numLevels: 8,
  lightDirection: v3.normalize([1, 2, 3]),
});

// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);

function hsla(h, s, l, a) {
  ctx.fillStyle = `hsla(${h * 360 | 0},${s * 100 | 0}%,${l * 100 | 0}%,${a})`;
  ctx.fillRect(0, 0, 1, 1);
  return ctx.getImageData(0, 0, 1, 1).data;
}

function clamp(v, min, max) {
  return Math.min(max, Math.max(min, v));
}

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

​

1. 在1个通道中渲染，使用查找表

在本例中，您将使用N种颜色制作一个Nx1纹理。然后在你的着色器中，你只需要计算一个灰度(现在还不清楚你是如何给物体上色的)，然后用它来从你的纹理中查找颜色

uniform sampler2D lookupTable；// Nx1纹理设置为最近的过滤浮动灰度= whateverYourDoingNow()；vec4 Nx1= texture2D(lookupTable，vec2((灰色，0.5)；//将光照应用于颜色...

示例：

​

const gl = document.querySelector('canvas').getContext('webgl');
const m4 = twgl.m4;
const v3 = twgl.v3;

const vs = `
  attribute vec4 position;
  attribute vec3 normal;
  
  // note: there is no reason this has to come from an attrbute (per vertex)
  // it could just as easily come from a texture used in the fragment shader
  // for more resolution

  attribute float hotness;  // the data value 0 to 1
  
  uniform mat4 projection;
  uniform mat4 modelView;
  
  varying vec3 v_normal;
  varying float v_hotness;
  
  void main () {
    gl_Position = projection * modelView * position;
    v_normal = mat3(modelView) * normal;
    v_hotness = hotness;
  }
  `;
  const fs = `
  precision mediump float;
  
  varying vec3 v_normal;
  varying float v_hotness;
  
  uniform float numColors;
  uniform sampler2D lookupTable;
  uniform vec3 lightDirection;
  
  void main() {
    vec4 color = texture2D(lookupTable, vec2(v_hotness, 0.5));
    
    // fake light
    float light = dot(normalize(v_normal), lightDirection) * .5 + .5;
    
    gl_FragColor = vec4(color.rgb * light, color.a);
  }
  `;
  
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
  
  const radius = 5;
  const thickness = 2;
  const radialDivisions = 32;
  const bodyDivisions = 12;
  // creates positions, normals, etc...
  const arrays = twgl.primitives.createTorusVertices(
      radius, thickness, radialDivisions, bodyDivisions);
      
  // add a hotness value, 0 <-> 1, for each vertex
  const numVerts = arrays.position.length / 3;
  const hotness = [];
  for (let i = 0; i < numVerts; ++i) {
    const pos = arrays.position.subarray(i * 3, i * 3 + 3);
    const dist = v3.distance([3, 1, 3 + Math.sin(pos[0])], pos);
    hotness[i] = clamp(dist / 10, 0, 1);
  }
  arrays.hotness = {
    numComponents: 1,
    data: hotness,
  };

  // calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each
  // array in arrays
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
  
  const colors = [
     255,   0,   0, 255,  // red
     255, 150,  30, 255,  // orange
     255, 255,   0, 255,  // yellow
       0, 210,   0, 255,  // green
       0, 255, 255, 255,  // cyan
       0,   0, 255, 255,  // blue
     160,  30, 255, 255,  // purple
     255,   0, 255, 255,  // magenta
  ];
  // calls gl.createTexture, gl.texImage2D, gl.texParameteri
  const lookupTableTexture = twgl.createTexture(gl, {
    src: colors,
    width: colors.length / 4,
    wrap: gl.CLAMP_TO_EDGE,
    minMag: gl.NEAREST,   // comment this line out to see non hard edges
  });
  
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  
  gl.enable(gl.DEPTH_TEST);
  
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const halfHeight = 8;
  const halfWidth = halfHeight * aspect;
  const projection = m4.ortho(
    -halfWidth, halfWidth,
    -halfHeight, halfHeight,
    -2, 2);
  const modelView = m4.identity();
  m4.rotateX(modelView, Math.PI * .5, modelView);
  
  gl.useProgram(programInfo.program);

  // calls gl.bindbuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  // for each attribute
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
  twgl.setUniforms(programInfo, {
    projection,
    modelView,
    lookupTable: lookupTableTexture,
    lightDirection: v3.normalize([1, 2, 3]),
  });
  
  // calls gl.drawArrays or gl.drawElements
  twgl.drawBufferInfo(gl, bufferInfo);
  
  
  function clamp(v, min, max) {
    return Math.min(max, Math.max(min, v));
  }

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>

​

Answer 2

执行此操作的一种方法是将flat interpolation modifier添加到颜色属性，如this教程中所述。这将防止对颜色值进行插值，因此每个三角形最终将只有一种颜色(在三个顶点的第一个顶点中指定的颜色)。遗憾的是，我找不到任何关于它的webgl支持的东西，但你不妨试一试，看看它是否有效。

如果它不起作用或您不希望独立的三角形可见，您也可以在片段着色器中load the color data to a texture和检索每个像素的颜色。仍然会有一些插值，这取决于纹理大小(类似于图像在放大时变得模糊)。