Three.js Lightmap вызывает WebGLRenderingContext ошибки: GL ОШИБКА: GL_INVALID_OPERATION

Question

я загружаю файл в формате JPEG для карты света var texture = new THREE.ImageUtils.loadTexture("textures/metal.jpg");
Затем я применить текстуру к THREE.MeshPhongMaterial

var frontMaterial = new THREE.MeshPhongMaterial({ 
     color: 0xfade7e, 
     specular: 0xffffff, 
     ambient: 0xaa0000, 
     lightMap:texture 
    }) 

сообщения Полной ошибки WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

Это что-то не так? Ошибка во всех браузерах. Three.js r.56

Answer 1

Как пояснил @alteredq в редакции this, a LightMap требует второго набора УФ.

Пункт световых карт состоит в том, что они могут жить независимо от других текстур, тем самым давая другим текстурам шанс быть намного более детальными. Lightmaps используют свой собственный набор UV-координат (как правило, автоматически генерируется некоторым светом для выпечки, в отличие от созданного художником первичного набора UV).

Использование ламповых карт с такими же УФ-лучами, как и все остальное, не имеет большого смысла, так как тогда вы могли бы достичь в основном того же результата для снижения стоимости текстуры, просто выпекая световую карту вместе с цветовой картой (это, например, это выглядит фантастически, но требует лодок текстур).

Также световые карты должны быть мультипликативными, а не аддитивными. Большим вариантом использования для светлых карт являются предварительно испеченные тени и окружающая окклюзия, поэтому вам нужно уметь темнее.

Таким образом, ответ на ваш вопрос заключается в том, что geometry.faceVertexUvs[0] содержит обычный набор УФ; вам нужно добавить к своей геометрии geometry.faceVertexUvs[1].

Three.js R.56

Answer 2

Эта ошибка стала, потому что буферы three.js устарели. Когда ваш добавить некоторые текстуры (карты, BumpMap ...) в Mesh, вы должны перекомпонуйте буферы и обновления UVs как это:

ob is THREE.Mesh, mt is a Material, tex is a texture. 

tex.needsUpdate = true; 
mt.map = tex; 
ob.material = mt; 
ob.geometry.buffersNeedUpdate = true; 
ob.geometry.uvsNeedUpdate = true; 
mt.needsUpdate = true; 

Это все люди!

Надеюсь, это поможет.

С уважением.

Sayris