如何在GLSL中处理大数，例如下面的大数？
我提供的着色器具有Date.now()统一性，描述如下：
该
Date.now()方法返回自UTC 1970年1月1日00:00:00以来经过的毫秒数。— MDN
例如，1514678400000作为一年的最后一天。
ShaderMaterial除非我将值缩小很多，否则将这种值传递给我的结果很少发生。
具体来说，这是行为似乎与我期望的有所不同的部分，它将最后2500毫秒映射到范围为0–1的值：
JavaScript： ( Date.now() % 2500 ) / 2500
GLSL： mod( time, 2500.0 ) / 2500.0
我宁愿在GPU上进行这些计算，但不确定如何处理？
下面是一个说明问题的小场景：
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
camera.position.z = 0.5
document.body.appendChild( renderer.domElement )
const checkbox = document.getElementById( "toggle" )
const geo = new THREE.PlaneGeometry( 1, 1 )
const mat = new THREE.ShaderMaterial({
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
uniform bool check;
uniform float time;
const float TAU = 6.2831;
void main() {
float fColor;
check
? fColor = ( sin( ( time * TAU ) ) + 1.0 ) / 2.0
: fColor = ( sin( ( ( mod( time, 2500.0 ) / 2500.0 ) * TAU ) ) + 1.0 ) / 2.0;
gl_FragColor = vec4( 1.0, fColor, 1.0, 1.0 );
}
`,
uniforms: {
"check": { value: false },
"time": { value: 1.0 },
},
})
const plane = new THREE.Mesh( geo, mat )
scene.add( plane )
const animate = function() {
requestAnimationFrame( animate )
if ( checkbox.checked ) {
plane.material.uniforms.check.value = true
plane.material.uniforms.time.value = ( Date.now() % 2500 ) / 2500
} else {
plane.material.uniforms.check.value = false
plane.material.uniforms.time.value = Date.now()
}
renderer.render( scene, camera )
}
animate()body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
#config {
position: absolute;
color: #fff;
cursor: pointer;
user-select: none;
font: bold 1em/1.5 sans-serif;
padding: 1em;
}
#config label,
#config input {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>
<div id="config">
<input id="toggle" type="checkbox">
<label for="toggle">Use JavaScript</label>
</div>我为Date.now（）提供了一个着色器
它产生的着色器不可预知的事情，尤其是当你使用三角函数，像sin()，cos()等等。原因是您将毫秒作为一个大整数传递。这就是为什么必须将其除以1000使其成为浮点数，即将毫秒转换为秒的原因。
因此，划分是一种方法。另一个是使用THREE.Clock()及其.getDelta()方法。看一下代码片段。
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
camera.position.z = 0.5
document.body.appendChild( renderer.domElement )
const geo = new THREE.PlaneGeometry( 1, 1 )
const mat = new THREE.ShaderMaterial({
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
uniform bool check;
uniform float time;
const float TAU = 6.2831;
void main() {
float fColor;
fColor = ( sin( ( time * TAU ) ) + 1.0 ) / 2.0;
gl_FragColor = vec4( 1.0, fColor, 1.0, 1.0 );
}
`,
uniforms: {
"check": { value: false },
"time": { value: 1.0 },
},
})
const plane = new THREE.Mesh( geo, mat )
scene.add( plane )
var clock = new THREE.Clock();
var time = 0;
const animate = function() {
requestAnimationFrame( animate )
time += clock.getDelta();
plane.material.uniforms.time.value = time * 0.4; // make it 2.5 times slower
renderer.render( scene, camera )
}
animate()body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
#config {
position: absolute;
color: #fff;
cursor: pointer;
user-select: none;
font: bold 1em/1.5 sans-serif;
padding: 1em;
}
#config label,
#config input {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句