三渲二 Cocos Creator

分享把3D動畫輸出成序列幀圖片的一種方法，希望對大家有所幫助，代碼工程將整理到 Cocos 論壇。

實現(xiàn)效果

配置環(huán)境

• Cocos Creator 3.6.2 編輯器

• Chrome 瀏覽器

實現(xiàn)

原理

• 相機(jī)渲染成一張紋理

• 讀取紋理數(shù)據(jù)傳給 Canvas 繪制

• Canvas 生成紋理數(shù)據(jù)傳給 HTML?<a>?標(biāo)簽

步驟

• 將動畫的模型放入場景中

• 調(diào)整相機(jī)視角，修改相機(jī)參數(shù)
  

• 引入腳本組件，填充參數(shù)
  

講解視頻

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

工程代碼

ScreenCapture.ts

面向網(wǎng)絡(luò)編程，拼湊起來的代碼，在此感謝各路神仙

    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('歡迎關(guān)注微信公眾號【白玉無冰】 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);
    }
}




  

示例工程

capture-ccc3.6.2.zip?(488.2 KB)

https://forum.cocos.org/uploads/short-url/9Q24VrBnMKyybOaKQM8SwRYtZkw.zip

文末閱讀原文可下載

參考資料

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement

• https://developer.mozilla.org/en-US/docs/web/api/htmlelement/click

更多精彩 零代碼實現(xiàn)面片效果(UV滾動,幀動畫) ?Cocos Creator
如何快速升級 Cocos Shader 版本，以簡易水shader為例
游戲開發(fā)資料合集，2022年版
【3D游戲基礎(chǔ)】蒙皮骨骼動畫與骨架
讓編輯器顯示場景內(nèi)的相機(jī)視角

點擊 “閱讀原文”下載完整工程

“點贊“ ”在看”?鼓勵一下▼