我偶然发现了this这样的帖子,描述了将shadertoy示例移植到threejs中的方法。
我尝试跟随并最终得到了plunk。片段着色器看起来像这样
#ifdef GL_ES
precision highp float;
#endif
uniform float iGlobalTime;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
varying vec2 vUv;
void main(void)
{
vec2 p = -1.0 + 2.0 *vUv;
vec2 q = p - vec2(0.5, 0.5);
q.x += sin(iGlobalTime* 0.6) * 0.2;
q.y += cos(iGlobalTime* 0.4) * 0.3;
float len = length(q);
float a = atan(q.y, q.x) + iGlobalTime * 0.3;
float b = atan(q.y, q.x) + iGlobalTime * 0.3;
float r1 = 0.3 / len + iGlobalTime * 0.5;
float r2 = 0.2 / len + iGlobalTime * 0.5;
float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
vec3 col = vec3(mix(tex1, tex2, m));
gl_FragColor = vec4(col * len * 1.5, 1.0);
}
和threejs这样的代码
window.addEventListener("load", function () {
// Camera variables.
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width/height;
var fov = 65;
var clipPlaneNear = 0.1;
var clipPlaneFar = 1000;
var clearColor = 0x221f26;
var clearAlpha = 1.0;
// main container.
var $container = $('#container');
// Clock
var clock = new THREE.Clock();
// Set up uniform.
var tuniform = {
iGlobalTime: { type: 'f', value: 0.1 },
iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture( 'images/tex07.jpg') },
iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture( 'images/tex03.jpg' ) },
};
tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;
// Set up our scene.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(fov, aspect, clipPlaneNear, clipPlaneFar);
//camera.position.z = 10;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setClearColor(new THREE.Color(clearColor, clearAlpha));
$container.append(renderer.domElement);
var mat = new THREE.ShaderMaterial( {
uniforms: tuniform,
vertexShader: $('#vertexshader').text(),
fragmentShader: $('#fragmentshader').text(),
side:THREE.DoubleSide
} );
tuniform.iGlobalTime.value += clock.getDelta();
var tobject = new THREE.Mesh( new THREE.PlaneGeometry(700, 394,1,1), mat);
//var tobject = new THREE.Mesh( new THREE.PlaneBufferGeometry (700, 394,1,1), mat);
scene.add(tobject);
// Keep updating our scene.
var loop = function loop() {
renderer.render(scene, camera);
};
loop();
}, false);
正如您从插件中看到的那样,该页面中没有输出。在这种情况下,我做错了什么?如何在threejs中成功实现着色器?
最佳答案
您的相机应位于camera.position.z = 1000;
处,
您的循环代码应为:
var loop = function loop() {
requestAnimationFrame(loop);
tuniform.iGlobalTime.value += clock.getDelta();
renderer.render(scene, camera);
};
loop();
Updated矮人: