гладкий край в программировании WebGL

Question

Когда вы создаете сферу (на самом деле это также apolyhedron) или другой многогранник в API-интерфейсе WebGL, вы получите многогранник с плоским стилем, и вы придадите текстуре многограннику, он будет выглядеть уродливый с углом между двумя малыми гранями на многограннике. на самом деле, вы можете разделить поверхность, чтобы получить гладкую поверхность. и есть ли другой способ smooth the surface на polyhedron.just взгляд LILE как два изображения, как показано ниже. (две картины захват с помощью программного обеспечения блендер)

Вот мой код для создания сферы

function getSphere(r,segment_lat,segment_lon){ 
     var normalData = []; 
     var vertexData = []; 
     var textureCoord = []; 
     var vertexIndex = [], 
     for (var latNum = 0; latNum <= segment_lat; latNum++) { 
      var theta = latNum * Math.PI/segment_lat; 
      var sinTheta = Math.sin(theta); 
      var cosTheta = Math.cos(theta); 
     for (var lonNum = 0; lonNum <= segment_lon; lonNum++) { 
       var phi = lonNum * 2 * Math.PI/segment_lon; 
       var sinPhi = Math.sin(phi); 
       var cosPhi = Math.cos(phi); 
       var x = cosPhi * sinTheta; 
       var y = cosTheta; 
       var z = sinPhi * sinTheta; 
       var u = 1 - (lonNum/segment_lon); 
       var v = 1 - (latNum/segment_lat); 
       textureCoord.push(u); 
       textureCoord.push(v); 
       vertexData.push(r * x); 
       vertexData.push(r * y); 
       vertexData.push(r * z); 
      } 
     } 
     for (var latNum=0; latNum < segment_lat;latNum++) { 
      for (var lonNum=0; lonNum < segment_lon; lonNum++) { 
      var first = (latNum * (segment_lon + 1)) + lonNum; 
      var second = first + segment_lon + 1; 
      vertexIndex .push(first); 
      vertexIndex .push(second); 
      vertexIndex .push(first + 1); 
      vertexIndex .push(second); 
      vertexIndex .push(second + 1); 
      vertexIndex .push(first + 1); 
     } 
     } 
     return {'vertexData':vertexData,'vertexIndex':vertexIndex,'textureCoord':textureCoord,'normalDatas':normalData}; 
    }, 

пиксельного шейдера:

 precision mediump float; 
     varying vec2 vTextureCoord; 
     uniform sampler2D uSampler; 

     void main(void) { 
      vec3 light = vec3(1,1,1); 
      vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); 
      gl_FragColor = vec4(textureColor.rgb*light,textureColor.a); 
      // gl_FragColor = vec4 (1,0,0,.8); 
     } 

Vertex Shader:

 attribute vec2 aTextureCoord; 
     attribute vec3 aVertexPosition; 
     // uniform mediump mat4 proj_inv; 
     uniform mediump mat4 modelViewMatrix; 
     uniform mediump mat4 projectMatrix; 
     varying highp vec2 vTextureCoord; 

     void main(void) { 
      //projectMatrix multi modelViewMatrix must be in vertex shader,or it will be wrong; 
      gl_Position = projectMatrix*modelViewMatrix*vec4(aVertexPosition, 1.0); 
      vTextureCoord = aTextureCoord; 
     } 

Answer 1

Если я должен угадать ваш результат визуализации отличается от картины вы показали. То, что вы видите, является «плоской» сферой в одном однородном цвете, и вы хотите заштрихованную сферу, это правильно?

Если это так, вам нужно прочитать учебники о том, как работает освещение. В основном, угол между вектором просмотра и нормальным фрагментом используется для определения яркости каждого фрагмента. Фрагмент на сфере, на который вы смотрите прямо, имеет очень малый угол между вектором вида и его нормальным и, следовательно, его ярким. Фрагмент на едва видимом краю на сфере имеет большой угол между нормальным и видимым и тем самым становится темным.

В коде поколения кода вам также необходимо рассчитать нормали и передать эту информацию в gpu вместе с остальными. К счастью для сферы, нормаль легко вычислить: normal = normalize(position - center); или просто normalize(position), если предполагается, что центр находится в точке (0,0,0).