動畫自定義着色器/ three.js所

-1

目前我正在學習的OpenGL和整個本教程中偶然發現： http://patriciogonzalezvivo.com/2015/thebookofshaders/03/動畫自定義着色器/ three.js所

我試圖使用的WebGL的剪斷，以便進一步瞭解機制，但不知何故，它不工作，我老實說不知道爲什麼。我相信肯定會有一些語法錯誤，但它會是什麼？如果沒有，那我該如何做這項工作？

說實話，我試圖瞭解如何實施u_time。我認爲GPU自動有一個內置的計時器，它會引起顏色過渡動畫。

// set the scene size 
 
var WIDTH = 400, 
 
    HEIGHT = 300; 
 

 
// set some camera attributes 
 
var VIEW_ANGLE = 45, 
 
    ASPECT = WIDTH/HEIGHT, 
 
    NEAR = 0.1, 
 
    FAR = 10000; 
 

 
// get the DOM element to attach to 
 
// - assume we've got jQuery to hand 
 
var $container = $('#container'); 
 

 
// create a WebGL renderer, camera 
 
// and a scene 
 
var renderer = new THREE.WebGLRenderer(); 
 
var camera = new THREE.Camera( VIEW_ANGLE, 
 
           ASPECT, 
 
           NEAR, 
 
           FAR ); 
 
var scene = new THREE.Scene(); 
 

 
// the camera starts at 0,0,0 so pull it back 
 
camera.position.z = 300; 
 

 
// start the renderer 
 
renderer.setSize(WIDTH, HEIGHT); 
 

 
// attach the render-supplied DOM element 
 
$container.append(renderer.domElement); 
 

 
// create the sphere's material 
 
var shaderMaterial = new THREE.MeshShaderMaterial({ 
 
    vertexShader: $('#vertexshader').text(), 
 
    fragmentShader: $('#fragmentshader').text() 
 
}); 
 

 
// set up the sphere vars 
 
var radius = 50, segments = 16, rings = 16; 
 

 
// create a new mesh with sphere geometry - 
 
// we will cover the sphereMaterial next! 
 
var sphere = new THREE.Mesh(
 
    new THREE.Sphere(radius, segments, rings), 
 
    shaderMaterial); 
 

 
// add the sphere to the scene 
 
scene.addChild(sphere); 
 

 
// draw! 
 
renderer.render(scene, camera);

<div id="container"></div> 
 

 
<script type="x-shader/x-vertex" id="vertexshader"> 
 
// switch on high precision floats 
 
#ifdef GL_ES 
 
precision highp float; 
 
#endif 
 

 
void main() 
 
{ 
 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 
 
} 
 
</script> 
 

 
<script type="x-shader/x-fragment" id="fragmentshader"> 
 

 
uniform float u_time; 
 

 
void main() { 
 
    gl_FragColor = vec4(sin(u_time),0.0,0.0,1.0); 
 
} 
 

 
</script> 
 
<script src="https://aerotwist.com/static/tutorials/an-introduction-to-shaders-part-1/demo/js/Three.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

來源

2016-05-23 Asperger

你在哪裏聲明瞭projectionMatrix，modelViewMatrix和position？投影矩陣和modelViewMatrix應聲明爲制服;位置作爲屬性，加上你應該將它們發送到GPU。如果這不是你的問題，那麼你應該澄清什麼是不工作，我猜。 – Zouch

順便說一句，我不知道THREE.js，但我沒有看到你發送u_time制服的位置。 – Zouch

@Zouch我在學習本教程。我想我必須以某種方式綁定JavaScript代碼中的u_time。創建某種計時器。 – Asperger

你是對的，你需要綁定/更新JavaScript中的價值。要做到這一點，你需要做兩件事情：

聲明u_time均勻（包括type和初始value）是在着色器，當您創建着色器材料。

var shaderMaterial = new THREE.MeshShaderMaterial({ 
    uniforms: { // <- This is an object with your uniforms as keys 
    u_time: { type: "f", value: 0 } 
    }, 
    vertexShader: $('#vertexshader').text(), 
    fragmentShader: $('#fragmentshader').text() 
});

你需要有一個循環渲染，你不斷更新的統一的value。下面是使用requestAnimationFrame()調用自身一旦瀏覽器是準備渲染另一幀渲染循環的一個基本的例子：您更新uniforms.u_time.value不uniforms.u_time
```
function draw() { 
    requestAnimationFrame(draw); 

    // Update shader's time 
    sphere.materials[0].uniforms.u_time.value += 0.01; 

    // draw! 
    renderer.render(scene, camera); 
} 

draw(); 
```
注意。這是因爲制服持有type和現在的value。

Working jsFiddle with changes

也知道你在你的提琴使用非常古老的版本three.js所的。 r40版本是從2011年開始的，目前我們已經達到r76。最近版本中有一些細節使得這個更簡單。

來源

2016-05-23 20:40:59

動畫自定義着色器/ three.js所

回答

相關問題