Custom Texture Shader in Three.js
Chcę tylko stworzyć bardzo prosty Shader fragmentów, który rysuje określoną teksturę do siatki. Spojrzałem na garść niestandardowych shaderów fragmentów, które osiągnęły to samo i zbudowałem własne shadery i wspierając kod JS wokół niego. Jednak to po prostu nie działa. Oto robocza abstrakcja kodu, który próbuję uruchomić:
Vertex Shader
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}
</script>
Fragment Shader
<script id="fragmentShader" type="x-shader/x-fragment">
uniform sampler2D texture1;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(texture1, vUv); // Displays Nothing
//gl_FragColor = vec4(0.5, 0.2, 1.0, 1.0); // Works; Displays Flat Color
}
</script>
Kod Sceny
<script>
// Initialize WebGL Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var canvas = document.getElementById('canvas').appendChild(renderer.domElement);
// Initialize Scenes
var scene = new THREE.Scene();
// Initialize Camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);
camera.position.z = 10;
// Create Light
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(0, 0, 500);
scene.add(light);
// Create Ball
var vertShader = document.getElementById('vertexShader').innerHTML;
var fragShader = document.getElementById('fragmentShader').innerHTML;
var uniforms = {
texture1: { type: 't', value: 0, texture: THREE.ImageUtils.loadTexture( 'texture.jpg' ) }
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertShader,
fragmentShader: fragShader
});
var ball = new THREE.Mesh(new THREE.SphereGeometry(1, 50, 50), material);
scene.add(ball);
// Render the Scene
renderer.render(scene, camera);
</script>
texture.jpg
Istnieje, oraz wyświetla po zmapowaniu do MeshLambertMaterial
. Przełączając mój fragment shader na prosty kolor (komentowany w kodzie) prawidłowo wyświetla piłkę.
Uruchomienie tego nie wyświetla niczego. Nie dostaję żadnych błędów, piłka po prostu nie pojawia się w ogóle.
Wiem, że muszę robić coś zasadniczo złego, ale przeglądałem te same przykłady, w których ten kod wydaje się działać od kilku dni i czuję się jakbym walnął głową o ścianę. Każda pomoc byłaby doceniam to!
Edit: używam trzech.js Revision 51
1 answers
Nadal używasz starej składni dla mundurów
var uniforms = {
texture1: {
type: "t",
value: 0,
texture: THREE.ImageUtils.loadTexture("texture.jpg")
}
};
To jest nowa składnia
var uniforms = {
texture1: { type: "t", value: THREE.ImageUtils.loadTexture( "texture.jpg" ) }
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-08 19:53:54