我用的是色度键示例 https://github.com/google-ar/sceneform-android-sdk/tree/master/samples/chromakeyvideo作为起点。
首先，我通过添加一个标志来禁用色度过滤来更改用于视频的自定义材质。
material {
"name" : "Chroma Key Video Material",
"defines" : [
"baseColor"
],
"parameters" : [
{
// The texture displaying the frames of the video.
"type" : "samplerExternal",
"name" : "videoTexture"
},
{
// The color to filter out of the video.
"type" : "float4",
"name" : "keyColor"
},
{
"type" : "bool",
"name" : "disableChromaKey",
}
],
"requires" : [
"position",
"uv0"
],
"shadingModel" : "unlit",
// Blending is "masked" instead of "transparent" so that the shadows account for the
// transparent regions of the video instead of just the shape of the mesh.
"blending" : "masked",
// Material is double sided so that the video is visible when walking behind it.
"doubleSided" : true
}
fragment {
vec3 desaturate(vec3 color, float amount) {
// Convert color to grayscale using Luma formula:
// https://en.wikipedia.org/wiki/Luma_%28video%29
vec3 gray = vec3(dot(vec3(0.2126, 0.7152, 0.0722), color));
return vec3(mix(color, gray, amount));
}
void material(inout MaterialInputs material) {
prepareMaterial(material);
vec2 uv = getUV0();
if (!gl_FrontFacing) {
uv.x = 1.0 - uv.x;
}
vec4 color = texture(materialParams_videoTexture, uv).rgba;
if (!materialParams.disableChromaKey) {
vec3 keyColor = materialParams.keyColor.rgb;
float threshold = 0.675;
float slope = 0.2;
float distance = abs(length(abs(keyColor - color.rgb)));
float edge0 = threshold * (1.0 - slope);
float alpha = smoothstep(edge0, threshold, distance);
color.rgb = desaturate(color.rgb, 1.0 - (alpha * alpha * alpha));
material.baseColor.a = alpha;
material.baseColor.rgb = inverseTonemapSRGB(color.rgb);
material.baseColor.rgb *= material.baseColor.a;
} else {
material.baseColor = color;
}
}
}
然后在 .sfa 文件中将 `disableChromaKey' 设置为 false：
materials: [
{
name: 'DefaultMaterial',
parameters: [
{
videoTexture: {
external_path: 'MISSING_PATH',
},
},
{
keyColor: [
0,
0,
0,
0,
],
},
{
disableChromaKey : true,
}
],
source: 'sampledata/models/chroma_key_video_material.mat',
},
],
然后，我根据命中测试中的锚点放置视频节点，并在其上方放置一个 ViewRenderable 节点作为文本。
private Node createVideoDisplay(final AnchorNode parent, Vector3 localPosition, String title) {
// Create a node to render the video and add it to the anchor.
Node videoNode = new Node();
videoNode.setParent(parent);
videoNode.setLocalPosition(localPosition);
// Set the scale of the node so that the aspect ratio of the video is correct.
float videoWidth = mediaPlayer.getVideoWidth();
float videoHeight = mediaPlayer.getVideoHeight();
videoNode.setLocalScale(
new Vector3(
VIDEO_HEIGHT_METERS * (videoWidth / videoHeight),
VIDEO_HEIGHT_METERS, 1.0f));
// Place the text above the video
final float videoNodeHeight = VIDEO_HEIGHT_METERS+ localPosition.y;
ViewRenderable.builder().setView(this,R.layout.video_title)
.build().thenAccept(viewRenderable -> {
Node titleNode = new Node();
titleNode.setLocalPosition(new Vector3(0,videoNodeHeight,0));
titleNode.setParent(parent);
titleNode.setRenderable(viewRenderable);
((TextView)viewRenderable.getView().findViewById(R.id.video_text))
.setText(title);
});
return videoNode;
}
