थ्री.जेएस

Question

में एक ही जाल के चेहरे पर एकाधिक पारदर्शी बनावट तीन.जेएस में एक ही चेहरे पर एक दूसरे के शीर्ष पर एकाधिक बनावट रखना संभव है ताकि अल्फा ब्लेंडिंग वेब जीएल में जीपीयू तेज हो सके?

बनावट (या होना चाहिए) एक ही चेहरे पर लागू होते हैं ताकि नीचे बनावट (बनावट 1) अल्फा चैनल के बिना हो और उपर्युक्त बनावट अल्फा चैनल के नीचे उदाहरण छवि में बनावट 2 जैसे चैनल में हों।

यह मिश्रण एचटीएमएल 5 कैनवास का उपयोग पूर्व-चरण के रूप में हासिल किया जा सकता है, लेकिन क्योंकि बनावट बिटमैप्स बहुत बड़ा हो सकता है, मैं कैनवास मिश्रण परिचालन को छोड़ना पसंद करता हूं।

मैंने जाल की एक प्रति बनाकर और एक जाल प्रति बनावट बनाकर परीक्षण किया और अन्य जाल पारदर्शी बनाया और इसे थोड़ा सा स्थानांतरित कर दिया, जो लगभग अच्छी तरह से सफल रहा, लेकिन कुछ झटकेदार और क्योंकि वस्तुएं एक ही स्थिति में बिल्कुल नहीं हो सकतीं , बनावट के बीच कुछ कमरा है जो सही प्रभाव नहीं है। उन्हें ऐसा लगता है जैसे वे मिश्रित थे। फ़ोटोशॉप (जैसा कि नीचे दी गई छवि है)।

Answer 1

उपयोग ShaderMaterial और वर्दी के रूप में दोनों बनावट निर्धारित करते हैं, और उसके बाद शेडर के भीतर उन्हें मिश्रण।

मैंने यह उदाहरण बनाया: http://abstract-algorithm.com/three_sh/ और यह वास्तव में पर्याप्त होना चाहिए।

तो, आप ShaderMaterial बनाने:

var vertShader = document.getElementById('vertex_shh').innerHTML; 
var fragShader = document.getElementById('fragment_shh').innerHTML; 

var attributes = {}; // custom attributes 

var uniforms = { // custom uniforms (your textures) 

    tOne: { type: "t", value: THREE.ImageUtils.loadTexture("cover.png") }, 
    tSec: { type: "t", value: THREE.ImageUtils.loadTexture("grass.jpg") } 

}; 

var material_shh = new THREE.ShaderMaterial({ 

    uniforms: uniforms, 
    attributes: attributes, 
    vertexShader: vertShader, 
    fragmentShader: fragShader 

}); 

और उस सामग्री के साथ जाल बनाने के लिए:

varying vec2 vUv; 

void main() 
{ 
    vUv = uv; 
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
    gl_Position = projectionMatrix * mvPosition; 
} 

:

var me = new THREE.Mesh(new THREE.CubeGeometry(80,80,80), material_shh); 

आप सरल शिखर शेडर डाल सकते हैं 0

और टुकड़ा शेडर है कि वास्तव में सम्मिश्रण करना होगा:

#ifdef GL_ES 
precision highp float; 
#endif 

uniform sampler2D tOne; 
uniform sampler2D tSec; 

varying vec2 vUv; 

void main(void) 
{ 
    vec3 c; 
    vec4 Ca = texture2D(tOne, vUv); 
    vec4 Cb = texture2D(tSec, vUv); 
    c = Ca.rgb * Ca.a + Cb.rgb * Cb.a * (1.0 - Ca.a); // blending equation 
    gl_FragColor= vec4(c, 1.0); 
} 

आप और भी अधिक बनावट मिश्रण करने के लिए की जरूरत है, आप एक ही समीकरण बस कई बार मिश्रण के लिए इस्तेमाल करते हैं।