如何用3D流体实现逼真水流效果？

华为应用市场在2022年HDC大会期间发布了一款3D水流主题，基于华为HMS Core Scene Kit服务能力，展现立体灵动的水流岛屿，可跟随用户指尖实现实时流体波动效果，既趣味又解压。

如何用3D流体实现逼真水流效果？

让变幻莫测的物质来实现我们在影视和游戏等多种应用场景中的奇思妙想，从早期步骤繁重的特效制作演变到如今，已经有了更为轻量易用的解题范式，只需花费10分钟便可打造一个逼真的3D流体效果。

如何用3D流体实现逼真水流效果？

什么是Scene Kit流体模拟？

Scene Kit即图形引擎服务，提供轻量级3D图形渲染引擎，可以为游戏、AR & VR等移动端应用提供易于使用的渲染接口，助力打造精致酷炫的视觉体验。

Scene Kit的3D流体技术，目前支持移动端水、油、岩浆等不同类型的物理真实流体模拟。服务中包含原子化接口，场景话接口，离线简模插件，实时光追插件等。

性能优越：基于三维图形渲染框架和算法，提供高性能低功耗的三维立体场景构建能力。

轻量易用：提供场景化移动应用接口，简化三维图形应用开发，易于为二维图形应用拓展构建三维立体场景。

效果逼真：基于物理的渲染能力，提供高画质三维场景效果和沉浸式图形体验。

实操环节：用3D流体实现逼真水流效果

开发环境

安装Android Studio 3.6.1及以上。

JDK 1.8（推荐）。

您的应用应满足以下条件：

minSdkVersion 19及以上。

targetSdkVersion 30（推荐）。

compileSdkVersion 30（推荐）。

Gradle 5.4.1及以上（推荐）。

如果同时使用多个HMS Core的服务，则需要使用各个Kit对应的最大值。

测试应用的设备：Android 4.4及以上。

开发配置

详细准备步骤请参考图形引擎服务开发者联盟官网。

开发准备

Android Studio的代码库配置在Gradle插件7.0以下版本、7.0版本和7.1及以上版本有所不同。请根据您当前的Gradle插件版本，选择对应的配置过程。

在“buildscript > repositories”中配置HMS Core SDK的Maven仓地址。
如果App中添加了“agconnect-services.json”文件则需要在“buildscript > dependencies”中增加agcp插件配置。打开项目级“settings.gradle”文件，配置HMS Core SDK的Maven仓地址。

buildscript {
    repositories {
        google()
        jcenter()
        // 配置HMS Core SDK的Maven仓地址。
        maven {url 'https://developer.huawei.com/repo/'}
    }
    dependencies {
        ...
        // 增加agcp插件配置，推荐您使用最新版本的agcp插件。
        classpath 'com.huawei.agconnect:agcp:
1.6.0.300
'
    }
}

dependencyResolutionManagement {
...
repositories {
google()
jcenter() 
// 配置HMS Core SDK的Maven仓地址。
maven {url 'https://developer.huawei.com/repo/'}
}
}

添加权限

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
<uses-permission android:name="android.permission.CAMERA" />

开发步骤

创建两个Activity：MainActivity和SampleActivity。其中MainActivity负责完成SceneKit初始化，SampleActivity用于容纳渲染视图，并呈现最终效果。
在MainActivity中添加初始化标识和初始化方法。在初始化方法中设置SceneKit全局属性，并使用同步初始化接口initializeSync初始化SceneKit。

private static final int REQ_CODE_UPDATE_SCENE_KIT = 10001;
private boolean initialized = false;


private void initializeSceneKit() {
    // 如果已经初始化，不再重复初始化。
    if (initialized) {
        return;
    }
    // 创建SceneKit属性，配置AppId与图形后端API。
    SceneKit.Property property = SceneKit.Property.builder()
        .setAppId("${app_id}")
        .setGraphicsBackend(SceneKit.Property.GraphicsBackend.GLES)
        .build();
    try {
        // 使用同步接口进行初始化。
        SceneKit.getInstance()
            .setProperty(property)
            .initializeSync(getApplicationContext());
        initialized = true;
        Toast.makeText(this, "SceneKit initialized", Toast.LENGTH_SHORT).show();
    } catch (UpdateNeededException e) {
        // 捕获需要升级异常，拉起升级Activity。
        startActivityForResult(e.getIntent(), REQ_CODE_UPDATE_SCENE_KIT);
    } catch (Exception e) {
        // 处理初始化异常。
        Toast.makeText(this, "failed to initialize SceneKit: " + e.getMessage(), Toast.LENGTH_SHORT).show();
    }
}

复写MainActivity的onActivityResult方法，处理升级结果

// resultCode为-1时代表升级成功，其他resultCode均代表升级失败。
private static final int RES_CODE_UPDATE_SUCCESS = -1;

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    // 如果升级成功，尝试重新初始化。
    if (requestCode == REQ_CODE_UPDATE_SCENE_KIT
        && resultCode == RES_CODE_UPDATE_SUCCESS) {
        try {
            SceneKit.getInstance()
                .initializeSync(getApplicationContext());
            initialized = true;
            Toast.makeText(this, "SceneKit initialized", Toast.LENGTH_SHORT).show();
        } catch (Exception e) {
            // 重新尝试初始化时不再捕获升级异常。
            Toast.makeText(this, "failed to initialize SceneKit: " + e.getMessage(), Toast.LENGTH_SHORT).show();
        }
}
}

在MainActivity的Layout文件中添加按钮，用于跳转至SampleActivity。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:andro
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_render_view_demo_text"
        android:onClick="onBtnRenderViewDemoClicked"/>
</LinearLayout>

在MainActivity中添加按钮回调。

public void onBtnRenderViewDemoClicked(View view) {
    // 如果未初始化，先初始化。
    if (!initialized) {
        initializeSceneKit();
        return;
    }
    // 跳转到SampleActivity。
    startActivity(new Intent(this, SampleActivity.class));
}

新建渲染视图子类XRenderView,需要在这个子类中添加相机与灯光组件，详情请见布置场景。

.public class XRenderView extends RenderView {
    public XRenderView(Context context) {
        //...
        prepareScene();
    }
    //...
}

创建SampleActivity为展示效果页面

public class DemoActivity extends Activity implements SensorEventListener {
    private XRenderView renderView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        renderView = new XRenderView(this);
        setContentView(renderView);
        //...
    }
}

添加createFluidSecene方法用于流体布局

3D流体组件不支持动态加载，只有在流体场景初始化时设置，才生效

private Node fluidNode;
private void createFluidScene(Context context) {
    // 创建3D流体节点。
    fluidNode = renderView.getScene().createNode("fluidNode");
    // 添加3D流体组件。
    FluidComponent fluidComponent = fluidNode.addComponent(FluidComponent.descriptor());
}

创建流体边界形状，设置流体体积量

private void createFluidScene(Context context) {
    // ...


    // 创建球形流体边界形状。
    SdfSphereShape sphere = fluidComponent.createSdfSphereShape();
    // 设置球体半径。
    sphere.setRadius(12.0f);
    // 设置流体体积量。
    fluidComponent.setFluidVolume(0.4f);
}

注册传感器事件，获取加速度传感器信息

private SensorManager sensorManager;
private Sensor sensor;
private int rotation;

private void createFluidScene(Context context) {
    // ...


    sensorManager = (SensorManager)getSystemService(SENSOR_SERVICE);
    // 获取加速度传感器。
    sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
}

@Override
protected void onResume() {
    super.onResume();
    // 注册传感器事件。
    sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL);
    //...
}
@Override
protected void onPause() {
    super.onPause();
    // 去注册传感器事件。
    sensorManager.unregisterListener(this);
    //...
}

复写传感器onSensorChanged方法，根据加速度传感器获取的值，更新流体系统的重力加速度。

@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
}
@Override
public void onSensorChanged(SensorEvent event) {
    if (event.sensor == null) {
        return;
    }
    // 加速度传感器。
    if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
        int x = (int) event.values[0];
        int y = (int) event.values[1];
        int z = (int) event.values[2];
        int gravityX = 0;
        int gravityY = 0;
        int gravityZ = 0;
        // 屏幕的旋转信息。
        rotation = this.getWindowManager().getDefaultDisplay().getRotation();
        // 根据屏幕的旋转角度，更新加速度信息。
        switch (rotation) {
            case Surface.ROTATION_0:
                gravityX = -x;
                gravityY = -y;
                gravityZ = -z;
                break;
            case Surface.ROTATION_90:
                gravityX = y;
                gravityY = -x;
                gravityZ = -z;
                break;
            case Surface.ROTATION_180:
                gravityX = x;
                gravityY = y;
                gravityZ = -z;
                break;
            case Surface.ROTATION_270:
                gravityX = -y;
                gravityY = x;
                gravityZ = -z;
                break;
            default:
                break;
        }


        FluidComponent fluidComponent = fluidNode.getComponent(FluidComponent.descriptor());
        if (fluidComponent != null) {
            // 设置流体系统的重力加速度。
            fluidComponent.setGravity(new Vector3(gravityX, gravityY, gravityZ));
        }
    }
}


@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
}

新建触屏交互手势事件子类GestureEvent。

public class GestureEvent implements View.OnTouchListener {
    private FluidComponent fluidComponent;
    private int surfaceWidth;
    private int surfaceHeight;
    private boolean sceneReady;


    public GestureEvent(FluidComponent fluidComponent, int surfaceWidth, int surfaceHeight) {
        this.fluidComponent = fluidComponent;
        this.surfaceWidth = surfaceWidth;
        this.surfaceHeight = surfaceHeight;
        sceneReady = fluidComponent != null && surfaceWidth != 0 && surfaceHeight != 0;
    }
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        if (!sceneReady) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                // 流体触屏交互接口，滑动流体，模拟流体晃动的效果。
                fluidComponent.setGesture(event.getX() / surfaceWidth, event.getY() / surfaceHeight);
                break;
            case MotionEvent.ACTION_UP:
                fluidComponent.setGesture(-1.0f, -1.0f);
                break;
            default:
                break;
        }
        return true;
    }
}

注册触屏交互的手势事件，支持触屏滑动流体，模拟流动飞溅效果。复写DemoActivity中的onTouchEvent方法。

private GestureEvent gesture;
private void createFluidScene(Context context) {
    // ...
    // 获取屏幕信息。
    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
    // 注册手势事件。
    gesture = new GestureEvent(fluidComponent, displayMetrics.widthPixels, displayMetrics.heightPixels);
}


@Override
public boolean onTouchEvent(MotionEvent motionEvent) {
    if (gesture != null) {
        gesture.onTouch(renderView, motionEvent);
    }
    return true;
}

在DemoActivity的onCreate方法中调用createFluidScene方法，完成流体场景创建。

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    //...
    createFluidScene();
}

完成上述步骤后，运行应用，启动DemoActivity，就能够看见流体在不可视的球形边界内流动。细节详情见原子化接口3D流体示例代码。

了解更多详情>>

访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址：GitHub、Gitee

关注我们，第一时间了解 HMS Core 最新技术资讯~

秒客网

如何用3D流体实现逼真水流效果？

什么是Scene Kit流体模拟？

实操环节：用3D流体实现逼真水流效果

开发环境

开发配置

开发准备

添加权限

开发步骤

相关文章