title category import { OrbitControl } from "@oasis-engine/controls" ; import * as dat from "dat.gui" ; import { AmbientLight , Animator , AssetType , Camera , GLTFResource , RenderColorTexture , RenderTarget , Vector3 , WebGLEngine } from "oasis-engine" ; const gui = new dat . GUI ( ) ; const engine = new WebGLEngine ( "canvas" ) ; engine . canvas . resizeByClientSize ( ) ; const scene = engine . sceneManager . activeScene ; scene . background . solidColor . setValue ( 0 , 0 , 0 , 0 ) ; const rootEntity = scene . createRootEntity ( ) ; const cameraEntity = rootEntity . createChild ( "camera_node" ) ; cameraEntity . transform . position = new Vector3 ( 0 , 1 , 5 ) ; const camera = cameraEntity . addComponent ( Camera ) ; cameraEntity . addComponent ( OrbitControl ) . target = new Vector3 ( 0 , 1 , 0 ) ; engine . resourceManager . load < GLTFResource > ( "https://gw.alipayobjects.com/os/bmw-prod/5e3c1e4e-496e-45f8-8e05-f89f2bd5e4a4.glb" ) . then ( ( asset ) => { const { defaultSceneRoot } = asset ; rootEntity . addChild ( defaultSceneRoot ) ; const animator = defaultSceneRoot . getComponent ( Animator ) ; animator . play ( "run" ) ; } ) ; engine . resourceManager . load < AmbientLight > ( { type : AssetType . Env , url : "https://gw.alipayobjects.com/os/bmw-prod/34986a5b-fa16-40f1-83c8-1885efe855d2.bin" } ) . then ( ( ambientLight ) => { scene . ambientLight = ambientLight ; } ) ; engine . run ( ) ; /** ---------------------------- Capture ---------------------------- */ let screenshotCanvas = null ; let flipYCanvas = null ; function screenshot ( camera , width , height , flipY = true , isPNG = true , jpgQuality = 1 ) { if ( ! screenshotCanvas ) { screenshotCanvas = document . createElement ( "canvas" ) ; } let canvas = screenshotCanvas ; screenshotCanvas . width = width ; screenshotCanvas . height = height ; const context = screenshotCanvas . getContext ( "2d" ) ; const isPaused = engine . isPaused ; engine . pause ( ) ; const originalTarget = camera . renderTarget ; const renderColorTexture = new RenderColorTexture ( engine , width , height ) ; const renderTargetData = new Uint8Array ( width * height * 4 ) ; const renderTarget = new RenderTarget ( engine , width , height , renderColorTexture , undefined , 8 ) ; camera . renderTarget = renderTarget ; camera . aspectRatio = width / height ; camera . render ( ) ; renderColorTexture . getPixelBuffer ( null , 0 , 0 , width , height , 0 , renderTargetData ) ; const imageData = context . createImageData ( width , height ) ; imageData . data . set ( renderTargetData ) ; context . putImageData ( imageData , 0 , 0 ) ; if ( flipY ) { if ( ! flipYCanvas ) { flipYCanvas = document . createElement ( "canvas" ) ; } canvas = flipYCanvas ; flipYCanvas . width = width ; flipYCanvas . height = height ; const ctx2 = flipYCanvas . getContext ( "2d" ) ; ctx2 . translate ( 0 , height ) ; ctx2 . scale ( 1 , - 1 ) ; ctx2 . drawImage ( screenshotCanvas , 0 , 0 ) ; } canvas . toBlob ( ( blob ) => { const url = window . URL . createObjectURL ( blob ) ; const a = document . createElement ( "a" ) ; document . body . appendChild ( a ) ; a . style . display = "none" ; a . href = url ; a . download = "screenshot" ; a . addEventListener ( "click" , ( ) => { if ( a . parentElement ) { a . parentElement . removeChild ( a ) ; } } ) ; a . click ( ) ; window . URL . revokeObjectURL ( url ) ; camera . renderTarget = originalTarget ; camera . resetAspectRatio ( ) ; ! isPaused && engine . resume ( ) ; } , isPNG ? "image/png" : "image/jpeg" , ! isPNG && jpgQuality ) ; } function openDebug ( ) { const config = { width : 1024 , height : 1024 , flipY : true , isPNG : true , jpgQuality : 1 , screenshot : ( ) => { const { width , height , flipY , isPNG , jpgQuality } = config ; screenshot ( camera , width , height , flipY , isPNG , jpgQuality ) ; } } ; const configFolder = gui . addFolder ( "config" ) ; configFolder . add ( config , "width" , 1 , 2048 , 1 ) ; configFolder . add ( config , "height" , 1 , 2048 , 1 ) ; configFolder . add ( config , "flipY" ) ; configFolder . add ( config , "isPNG" ) ; configFolder . add ( config , "jpgQuality" , 0 , 1 , 0.01 ) ; gui . add ( config , "screenshot" ) ; } openDebug ( ) ;