我对PIXI.js和自定义着色器都是陌生的,所以在这里我有点儿不深。
有一个GLSL着色器(由DonKarlssonSan提供),我想将其转换为PIXI.js来比较性能,任何帮助将不胜感激!
var container;
var camera, scene, renderer;
var uniforms;
var startTime;
init();
animate();
function init() {
cOntainer= document.getElementById('container');
startTime = Date.now();
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry(16, 9);
uniforms = {
iGlobalTime: { type: "f", value: 1.0 },
iResolution: { type: "v2", value: new THREE.Vector2() }
};
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();
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
uniforms.iResolution.value.x = window.innerWidth;
uniforms.iResolution.value.y = window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var currentTime = Date.now();
uniforms.iGlobalTime.value = (currentTime - startTime) * 0.0005;
renderer.render(scene, camera);
}
JSFiddle:https ://jsfiddle.net/9t0ayrmh/1/
*到目前为止,如果需要,我可以发表我的努力,但实际上包括一个可以正常使用的PIXI.js模板,但是我不足以将着色器连接到滤镜。
谢谢!