前一段时间(想想让我们试一下浏览器)我掀起了一个小的three.js测试,用2个自定义着色器绘制四边形玩具。撕掉一些示例代码,将着色器放入,瞧。我直接从Github嵌入了three.js,所以我当然容易出现迁移问题:)
这就是发生的事情:经过几周的重访后,我的制服停止了工作(使用WebGL-Inspector进行验证,它们全部为零,而由three.js上传的前面制服仍然没有问题。)
WebGL-Inspector确认:
0 projectionMatrix 1 FLOAT_MAT4
[ 1.000000000, 0.000000000, 0.000000000, 0.000000000,
0.000000000, 1.000000000, 0.000000000, 0.000000000,
0.000000000, 0.000000000, -0.002000200, 0.000000000,
0.000000000, 0.000000000, -1.000200033, 1.000000000 ]
1 modelViewMatrix 1 FLOAT_MAT4
[ 1.000000000, 0.000000000, 0.000000000, 0.000000000,
0.000000000, 1.000000000, 0.000000000, 0.000000000,
0.000000000, 0.000000000, 1.000000000, 0.000000000,
0.000000000, 0.000000000, -0.100000001, 1.000000000 ]
2 u_resolution 1 FLOAT_VEC2
[ 0.000000000, 0.000000000 ]
3 u_time 1 FLOAT 0.000000000
4 u_aspectRatio 1 FLOAT 0.000000000
这是“代码”(当涉及到所有网络内容时,我就像一个假人,所以不要减少指出其他愚蠢行为的任何可能的冲动=)):
<!--
next: texture!
also, it doesn't work anymore =) (uniforms are invalid?)
-->
<html>
<head>
<title>taste the browser!</title>
<style>canvas { width: 100%; height: 100% }</style>
<script type="text/javascript" src="../WebGL-Inspector/core/embed.js"> </script>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"> </script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
// varying vec2 v_UV;
void main() {
// vUV = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform float u_aspectRatio;
uniform float u_time;
uniform vec2 u_resolution;
// varying vec2 v_UV;
void main()
{
vec2 p = -1.0 + 2.0*(gl_FragCoord.xy/u_resolution);
// cheapest trick in the book #1: tunnel
float r = sqrt(dot(p, p));
float a = atan(p.y, p.x); // abs(a)/3.1416
float flower = r + 0.2*sin(a*4.0 + u_time);
// cheapest trick in the book #2: 2D blobs
vec2 blob1 = vec2(sin(u_time*0.66), cos(u_time*0.96));
vec2 blob2 = vec2(cos(u_time*0.75 + 1.4), sin(u_time*0.4 - 3.0));
vec2 dist1 = p - blob1;
vec2 dist2 = p - blob2;
dist1 *= 2.0; dist2 *= 3.0;
float energy = 1.0/dot(dist1, dist1) + 1.0/dot(dist2, dist2);
energy = pow(energy, 4.0);
gl_FragColor = vec4(energy, flower, u_time, 1.0);
}
</script>
<script>
// initialize renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// setup scene & camera
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);
// setup uniforms
var myUniforms = {
aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight },
time: { type: "f", value: 0.0 },
resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
};
// build plane with custom shader material
var geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
var material = new THREE.ShaderMaterial(
{
uniforms: myUniforms,
attributes: null,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent }
);
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
// anything non-zero will do
camera.position.z = 0.1;
// create timer
var timer = new THREE.Clock(true);
// render loop func.
function render() {
// update & render
myUniforms.time.value = timer.getElapsedTime(); // % 1.0;
renderer.render(scene, camera);
// req. next frame
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
关于此的任何指示:非常欢迎!
(是的,这是一个丑陋的着色器;))
答案 0 :(得分:2)
您的制服变量名称与着色器中的变量名称不匹配。
var myUniforms = {
u_aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight },
u_time: { type: "f", value: 0.0 },
u_resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
};