Веб-шейдер - three.js, нужно исправить?

Я использовал vUv = uv для работы с шейдером материала three.js для IcosahedronGeometry. Но это не работает, и мне нужна помощь, чтобы исправить этот шейдер:Веб-шейдер - three.js, нужно исправить?

var container, 
 
    renderer, 
 
    scene, 
 
    camera, 
 
    mesh, 
 
    start = Date.now(), 
 
    fov = 30; 
 

 
window.addEventListener('load', function() { 
 
container = document.getElementById("container"); 
 
scene = new THREE.Scene(); 
 
camera = new THREE.PerspectiveCamera( 
 
    fov, 
 
    window.innerWidth/window.innerHeight, 
 
    1, 
 
    10000); 
 
camera.position.z = 100; 
 
camera.target = new THREE.Vector3(0, 0, 0); 
 
scene.add(camera); 
 
material = new THREE.ShaderMaterial({ 
 
vertexShader: document.getElementById('vertexShader').textContent, 
 
fragmentShader: document.getElementById('fragmentShader').textContent 
 
}); 
 
mesh = new THREE.Mesh( 
 
    new THREE.IcosahedronGeometry(20, 4), 
 
    material 
 
); 
 
scene.add(mesh); 
 
renderer = new THREE.WebGLRenderer(); 
 
renderer.setSize(window.innerWidth, window.innerHeight); 
 
container.appendChild(renderer.domElement); 
 
render(); 
 
}); 
 

 
function render() { 
 
renderer.render(scene, camera); 
 
requestAnimationFrame(render); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script> 
 
<head> 
 
    <title>Shader test</title> 
 
<script type="x-shader/x-vertex" id="vertexShader"> 
 
vUv = uv; 
 
varying vec3 N; 
 
varying vec3 I; 
 
varying vec4 Cs; 
 
void main() 
 
{ 
 
    vec4 P = gl_ModelViewMatrix * gl_Vertex;  
 
    I = P.xyz - vec3 (0); 
 
    N = gl_NormalMatrix * gl_Normal; 
 
    Cs = gl_Color; 
 
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; 
 
    //gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
 
} 
 
</script> 
 
<script type="x-shader/x-vertex" id="fragmentShader"> 
 
varying vec2 vUv; 
 
varying vec3 N; 
 
varying vec3 I; 
 
varying vec4 Cs; 
 
uniform float edgefalloff; 
 
uniform float intensity; 
 
uniform float ambient; 
 
void main() 
 
{ 
 
    float opac = dot(normalize(-N), normalize(-I)); 
 
    opac = abs(opac); 
 
    opac = ambient + intensity*(1.0-pow(opac, edgefalloff)); 
 
    //opac = 1.0 - opac; 
 
    gl_FragColor = opac * Cs; 
 
    gl_FragColor.a = opac; 
 
    //gl_FragColor = vec4(vec3(vUv, 0.), 1.); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
</body>

источник

2016-05-20 Cătălin George Feștilă

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

Обязательно создайте исполняемый код в свой следующий раз (кнопка «<>» в редакторе вопросов), никто здесь «не нужен», чтобы делать что-либо, а также более конкретно о вашей проблеме «не работает»/«нужно исправить "- довольно плохое описание. Попробуйте взглянуть на базовый учебник glsl, так как на консольном выходе все сказано: 'ERROR: 0:43: 'vUv': синтаксическая ошибка' –

LJ - прав, извините, я не успел, спасибо! –

ли нужно добавить следующее:

var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

Некоторые шейдеры должны иметь этот тип определения над webgl и три для материала.

var customMaterial = new THREE.ShaderMaterial({ 
    uniforms: { 
     p: { type: "f", value: 3 }, 
     glowColor: { type: "c", value: new THREE.Color(0x84ccff) }, 
    }, 
    vertexShader: $('#vertexShader').text, 
    fragmentShader: $('#fragmentShader').text, 
    side: THREE.DoubleSide, 
    blending: THREE.AdditiveBlending, 
    transparent: true, 
    depthWrite: false 
});

У вас должен быть один объект для использования материального шейдера. Я не тестировал текстуру uv - просто с этим customMaterial. Попробуйте использовать x-shader/x-vertex, а другой x-shader/x-фрагмент работает даже с x-shader/x-vertex и x-shader/x-vertex.

источник

2016-05-22 19:51:35

попробовать:

<script type="x-shader/x-vertex" id="vertexShader"> 
varying vec3 vUv; 
varying vec3 N; 
varying vec3 I; 
varying vec4 Cs; 
void main() 
{ 
    vUv = uv; 
    vec4 P = gl_ModelViewMatrix * gl_Vertex;  
    I = P.xyz - vec3 (0); 
    N = gl_NormalMatrix * gl_Normal; 
    Cs = gl_Color; 
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; 
    //gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
} 
</script>

Обратите внимание, где vUv = uv установлен.

Кроме того, у вас есть оба шейдерных тега с type="x-shader/x-vertex", фрагмент шейдера должен быть type="x-shader/x-fragment" (хотя это может и не изменить).

Кроме того, вы используете переменные в своем вершинном шейдере, начиная с gl_. Я не уверен, что они доступны.
Доступные переменные в вершинном шейдере в three.js (что я знаю) являются:
- равномерная mat4 modelMatrix - object.matrixWorld
- равномерная mat4 modelViewMatrix - camera.matrixWorldInverse * object.matrixWorld
- равномерная mat4 projectionMatrix - camera.projectionMatrix
- равномерная mat4 viewMatrix - camera.matrixWorldInverse
- равномерная mat3 normalMatrix - обратная транспонированная modelViewMatrix
- равномерная vec3 cameraPosition - положение камеры в мировом пространстве
- атрибут vec3 положение - положение вершин
- атрибут vec3 нормальный - нормаль вершины
- атрибут vec2 уф
- атрибут vec2 uv2

источник

2016-05-21 10:08:20 2pha

Я думаю, что есть три.js, когда взять объект, чтобы применить материал с шейдером. Я пытаюсь сделать один рентгеновский шейдер. Мой первый пример хорошо работает: vertexShader с: переменным vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4 (позиция, 1.0); } и фрагментарный шейдер с: различный vec2 vUv; void main() { // цвет RGBA: u, v, 0, 1 gl_FragColor = vec4 (vec3 (vUv, 0.), 1.); } –

Я понятия не имею, что означает вышеуказанный комментарий. Я также заметил, что вы оба шейдерных тега как 'x-shader/x-vertex', вместо одного' x-shader/x-vertex' и другого 'x-shader/x-fragment' – 2pha

Я решаю его. Спасибо. –

Веб-шейдер - three.js, нужно исправить?

ответ

Смежные вопросы