三渲二 Cocos Creator

最新推荐文章于 2024-11-07 20:29:03 发布

「已注销」

最新推荐文章于 2024-11-07 20:29:03 发布

阅读量419

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45686592/article/details/128945911

版权

分享把3D动画输出成序列帧图片的一种方法，希望对大家有所帮助，代码工程将整理到 Cocos 论坛。

实现效果

配置环境

Cocos Creator 3.6.2 编辑器
Chrome 浏览器

实现

原理

相机渲染成一张纹理
读取纹理数据传给 Canvas 绘制
Canvas 生成纹理数据传给 HTML <a> 标签

步骤

将动画的模型放入场景中
调整相机视角，修改相机参数
引入脚本组件，填充参数

讲解视频

https://www.bilibili.com/video/BV1g8411u7Pp

工程代码

ScreenCapture.ts

面向网络编程，拼凑起来的代码，在此感谢各路神仙

import {
    _decorator, Component, log, Camera
    , math, view, RenderTexture, Animation
} from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ScreenCapture')
export class ScreenCapture extends Component {
    @property(Camera)
    camera: Camera = null!

    @property(Animation)
    animation: Animation = null!

    @property
    count = 3

    start() {
        log('欢迎关注微信公众号【白玉无冰】 https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA')
        const defaultState = this.animation.getState(this.animation.defaultClip!.name)
        let count = this.count;
        if (count < 2) count = 2;
        defaultState.stop();
        const stepTime = defaultState.duration / count;
        const doAfterCap = () => {
            count--;
            if (count > 0) {
                defaultState.update(stepTime);
                this.doCapture(doAfterCap)
            }
        }
        defaultState.update(0);
        this.doCapture(doAfterCap);
    }

    private doCapture(doAfterCap = () => {

    }) {
        let vSize = new math.Size
        vSize.width = view.getVisibleSize().width
        vSize.height = view.getVisibleSize().height
        let texture = new RenderTexture();
        texture.reset(vSize);
        this.camera.targetTexture = texture;
        this.scheduleOnce(() => {
            this.saveCapture(texture)
            this.camera.targetTexture = null;
            doAfterCap()
        }, 0)
    }

    private index = 0
    private timestamp = Date.now()
    private saveCapture(rt: RenderTexture) {
        let data: string = this.getImgBase(rt)
        this.saveAs(`${this.timestamp}_${++this.index}`, data)
    }

    private getImgBase(texture: RenderTexture) {
        const rtW = Math.floor(texture.width);
        const rtH = Math.floor(texture.height);
        const texPixels = new Uint8Array(rtW * rtH * 4);
        let data = texture.readPixels(0, 0, rtW, rtH, texPixels)!

        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')!

        canvas.width = texture.width
        canvas.height = texture.height

        let width = texture.width
        let height = texture.height

        let rowBytes = width * 4
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row
            let imgData = ctx.createImageData(width, 1)
            let start = srow * width * 4
            for (let i = 0; i < rowBytes; i++) {
                imgData.data[i] = data[start + i]
            }
            ctx.putImageData(imgData, 0, row)
        }
        let dataUrl = canvas.toDataURL('image/png')
        console.log(dataUrl)
        return dataUrl
    }

    private saveAs(fileName: string, data: any | string) {
        var element = document.createElement('a');
        if (typeof data === "string") {
            element.setAttribute('href', data);
        }
        else {
            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
        }

        element.setAttribute('download', fileName);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }
}