Почему мне нужно определить значение точности в шейдерах webgl?

Question

Я пытаюсь получить this tutorial, но я столкнулся с двумя проблемами, одним из которых является следующее.

Когда я запускаю код, как есть, я получаю сообщение об ошибке в шейдере фрагмента: THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float). Так что я сделал, указав точность для каждого float/vector, который я определяю так varying highp vec3 vNormal. Это устраняет ошибку, но я не понимаю почему? Я не могу найти другого примера, в котором значения точности добавляются к объявлениям переменных. Может ли кто-нибудь объяснить, почему это происходит? Связано ли это с моим браузером (Chrome 38)?

Answer 1

Ответ Джесси правилен тем, что большинство фрагментарных шейдеров задали точность по умолчанию в верхней части кода шейдера фрагмента.

Однако вы используете RawShaderMaterial файл 3.js, который не добавляет ни одной из встроенных форм, атрибутов и объявлений точности. Поэтому вы должны сами определить это.

С другой стороны, учебное пособие, с которым вы связались, использует файл ShaderMaterial от Three.js, поэтому у Three.js будет объявление точности заранее.

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

вершинных шейдеров

varying vec3 vNormal; 

void main() { 
    vNormal = normal; 
    gl_Position = projectionMatrix * 
       modelViewMatrix * 
       vec4(position,1.0); 
} 

Фрагмент шейдер

varying vec3 vNormal; 

void main() { 
    vec3 light = vec3(0.5, 0.2, 1.0); 

    // ensure it's normalized 
    light = normalize(light); 

    // calculate the dot product of 
    // the light to the vertex normal 
    float dProd = max(0.0, dot(vNormal, light)); 

    // feed into our frag colour 
    gl_FragColor = vec4(dProd, // R 
         dProd, // G 
         dProd, // B 
         1.0); // A 
} 

Обновление к материалу

// create the sphere's material 
var shaderMaterial = new THREE.ShaderMaterial({ 
    vertexShader: document.getElementById('vertex-shader').innerHTML, 
    fragmentShader: document.getElementById('fragment-shader').innerHTML 
}); 

Here - это скрипка вашего кода без деклараций точности.

Answer 2

В шейдерах фрагментов WebGL отсутствует точность по умолчанию. (Высокая точность по умолчанию для вершинных шейдеров.) Самым простым решением является добавление

precision highp float; 

для всех ваших фрагментов шейдеров, что позволит устранить необходимость определения точности для всех плавающих векторных переменных точек, но в целом,

precision mediump float; 

будет предпочтительнее, для обеспечения эффективности. Я не советую lowp; хорошее мобильное оборудование сегодня даже не поддерживает его, и делает эквивалент typedeffing lowp для mediump.