Simple Fragment shader in Three.js
我正在Three.JS中探索着色器，并尝试创建简单的电视静态效果。据我了解，我需要使用片段着色器作为网格中的材质。
我很难从教程切换到Three.js环境，因为事情是不确定的。我的问题似乎是位置变量未设置为统一变量，但是我不确定如何执行此操作。
控制台错误：
着色器：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="x-shader/x-fragment" id="static"> uniform float time; varying vec2 position; float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec2 uv = position.xy; float r = floor(rand(uv * time / 2.0) + 0.5); gl_FragColor = vec4(r, r, r, 1.0); } |
JS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | var camera, scene, renderer, geometry, material, mesh, uniforms; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 500; scene.add(camera); geometry = new THREE.CylinderGeometry(100, 100, 20, 32); debugMaterial = new THREE.MeshNormalMaterial(); uniforms = { time: { type: 'f', value: 0 } }; var shaderMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, fragmentShader: document.getElementById('static').innerHTML }); mesh = new THREE.Mesh(geometry, shaderMaterial); /* toggle the mesh variable to see the object */ //mesh = new THREE.Mesh(geometry, debugMaterial); scene.add(mesh); renderer = new THREE.CanvasRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); render(); } function render(delta) { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; uniforms.time += delta * 10; renderer.render(scene, camera); } render(); |
所需的效果：圆柱几何体上的以下像素着色器。
提琴(输出为空，尽管我已经包含了debugMaterial，所以您只需切换
您似乎没有顶点着色器。通过将
1 2 3 4 5 6 7 | <script id="vertShader" type="shader"> varying vec2 vPosition; void main() { vPosition = position.xy; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 ); } |
我已经将