Я заменил ваш фрагментарный шейдер кодом от pixhaders.com. Консоль сообщила следующее сообщение об ошибке:
> THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false
> gl.getPRogramInfoLog Varyings with the same name but different type,
> or statically used varyings in fragment shader are not declared in
> vertex shader: position
Переменных переменное, в сущности интерфейс между вершинным шейдером и пиксельным шейдером. Эта ошибка сообщает нам, что position объявлен в шейдере фрагмента, но не в шейдере вершин.
У вас на самом деле была требуемая переменная в вашем вершинном шейдере ... кроме того, что она была названа vUv. Все, что мне нужно было сделать, это сделать имена переменных согласованными.
Полный источник (я взял отслаивания на time в функции render() тоже):
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials - shaders [custom]</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #050505;
margin: 0px;
overflow: hidden;
}
a {
color: #ffffff;
}
#oldie a { color:#da0 }
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/codemirror.css">
<script src="js/lib/three.min.js"></script>
<script src="js/lib/Detector.js"></script>
<script src="js/geo.js"></script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vUv;
uniform float time;
float random(float p) {
return fract(sin(p)*10000.);
}
float noise(vec2 p) {
return random(p.x + p.y*10000.);
}
vec2 sw(vec2 p) {return vec2(floor(p.x) , floor(p.y));}
vec2 se(vec2 p) {return vec2(ceil(p.x) , floor(p.y));}
vec2 nw(vec2 p) {return vec2(floor(p.x) , ceil(p.y) );}
vec2 ne(vec2 p) {return vec2(ceil(p.x) , ceil(p.y) );}
float smoothNoise(vec2 p) {
vec2 inter = smoothstep(0., 1., fract(p));
float s = mix(noise(sw(p)), noise(se(p)), inter.x);
float n = mix(noise(nw(p)), noise(ne(p)), inter.x);
return mix(s, n, inter.y);
return noise(nw(p));
}
float movingNoise(vec2 p) {
float total = 0.0;
total += smoothNoise(p - time);
total += smoothNoise(p*2. + time)/2.;
total += smoothNoise(p*4. - time)/4.;
total += smoothNoise(p*8. + time)/8.;
total += smoothNoise(p*16. - time)/16.;
total /= 1. + 1./2. + 1./4. + 1./8. + 1./16.;
return total;
}
float nestedNoise(vec2 p) {
float x = movingNoise(p);
float y = movingNoise(p + 100.);
return movingNoise(p + vec2(x, y));
}
void main() {
vec2 p = vUv * 6.;
float brightness = nestedNoise(p);
gl_FragColor.rgb = vec3(brightness);
gl_FragColor.a = 1.;
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script>
if (! Detector.webgl) Detector.addGetWebGLMessage();
var container;
var camera, controls, scene, renderer;
var uniforms;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 1, 3000);
camera.position.z = 2;
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
uniforms = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector3() }
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
uniforms.time.value += delta;
// for (var i = 0; i < scene.children.length; i ++) {
//
// var object = scene.children[ i ];
//
// object.rotation.y += delta * 0.5 * (i % 2 ? 1 : -1);
// object.rotation.x += delta * 0.5 * (i % 2 ? -1 : 1);
//
// }
renderer.render(scene, camera);
}
</script>
</body>
</html>
добавить [shaderMaterial] (http://threejs.org/docs/#Reference/Materials/ShaderMaterial) в файле three.js и добавьте шейдерный код из примера для этого материала, он должен работать ([примеры] (http://threejs.org/examples/webgl_shader2.html)) –
oops только увидели, что вы используете аналогичный пример для shaderMaterial –
шейдер принимает параметр 'time', передаете ли вы этот параметр в шейдер? возможно, это проблема, в примерах используется glsl.js вместо трех, .js, но она должна работать нормально, просто убедитесь, что все необходимые параметры переданы в шейдер. –