gpt4 book ai didi

javascript - 如何从外部文件加载着色器?三、文件加载器

转载 作者:行者123 更新时间:2023-11-28 14:40:29 25 4
gpt4 key购买 nike

我想从外部文件加载着色器。该着色器是正确的,因为它在插入 <script> 时可以工作。标签。我执行以下操作:

var loader = new THREE.FileLoader();
loader.load('shader.vert',function ( data ) {vShader = data;},);
loader.load('shader.frag',function ( data ) {fShader = data;},);

后来我用它作为:

var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader,
fragmentShader: fShader,

});

问题是,当我重新加载页面时,我犯了错误,着色器未定义。当我在控制台中输入 vShader 时,它会打印出我想要的内容。当我开始调试时(init() 函数内的断点 vShader 未定义。

你能解释一下我的错误吗?

整个代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://threejs.org/build/three.min.js"></script>

</head>
<body>
<div class="WebGL-output" id="WebGL-output"></div>
<script id="vertexShader" type="x-shader/x-vertex" src="shader.vert">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color;
varying vec2 vUv;
void main() {
gl_FragColor = vec4(color,1.);
}
</script>

<script>
var renderer,uniforms,vShader,fShader,camera,scene;
var loader = new THREE.FileLoader();
init();
animate();
function init(){
renderer = new THREE.WebGLRenderer
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('WebGL-output').appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 5000;
scene = new THREE.Scene();

//******* DO NOT WORK
loader.load('plaid.frag',function ( data ) {fShader = data;},);
loader.load('plaid.vert',function ( data ) {vShader = data;},);
// ****** WORK
//fShader = document.getElementById('fragmentShader').text;
//vShader = document.getElementById('vertexShader').text;

// **************************
uniforms = {
"color" : {
type : "c",
//value :new THREE.Color(0xf0f0f0)
value :new THREE.Color(0x00ff00)
},
};


var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader,
fragmentShader: fShader,
});

// Create circles and add to scene.
var geometry = new THREE.CircleGeometry(100, 50);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

var light = new THREE.AmbientLight(0x000000); // soft white light
scene.add(light);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
</body>
</html>

最佳答案

您的错误是在浏览器中加载文件是异步的。首先你有这段代码

loader.load('plaid.frag',function ( data ) {fShader =  data;},);
loader.load('plaid.vert',function ( data ) {vShader = data;},);

您创建的设置fShadervShader的函数将在一段时间后才会被调用(无论下载文件需要多长时间)

但是,只需几行,您就可以立即使用 fShadervShader,即使它们尚未下载

var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader,
fragmentShader: fShader,
});

如果您确实想从外部文件加载,您需要构建代码以等待它们下载。

举个例子

var renderer,uniforms,vShader,fShader,camera,scene;
var loader = new THREE.FileLoader();
init();

function init() {
renderer = new THREE.WebGLRenderer
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('WebGL-output').appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 5000;
scene = new THREE.Scene();

var numFilesLeft = 2;

function runMoreIfDone() {
--numFilesLeft;
if (numFilesLeft === 0) {
more();
}
}

//******* DO NOT WORK
loader.load('plaid.frag',function ( data ) {fShader = data; runMoreIfDone(); },);
loader.load('plaid.vert',function ( data ) {vShader = data; runMoreIfDone(); },);
// ****** WORK
//fShader = document.getElementById('fragmentShader').text;
//vShader = document.getElementById('vertexShader').text;
}

function more() {

// **************************
uniforms = {
"color" : {
type : "c",
//value :new THREE.Color(0xf0f0f0)
value :new THREE.Color(0x00ff00)
},
};


var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vShader,
fragmentShader: fShader,
});

// Create circles and add to scene.
var geometry = new THREE.CircleGeometry(100, 50);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

var light = new THREE.AmbientLight(0x000000); // soft white light
scene.add(light);

animate();
}

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

关于javascript - 如何从外部文件加载着色器?三、文件加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48186368/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com