webgl流式（streaming）渐进渲染技术演示代码示例2 （使用工作线程Worker）

使用Streams API来完成3D模型的webgl streaming流式渐进加载和渲染。

webgl, steaming, worker

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1326
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//note that: this demo is not working on latest chrome aka 76.77.78,
//will probably work in future version...
var dimensions = Math.min(window.innerWidth, window.innerHeight) - 100
try {
    var hasSharedArrayBuffer = !!SharedArrayBuffer
} catch (e) {
    var hasSharedArrayBuffer = false
}

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
camera.position.set(0, 2, 8)

var renderer = new THREE.WebGLRenderer()
renderer.setSize(dimensions, dimensions)
document.body.appendChild(renderer.domElement)

var material = new THREE.MeshBasicMaterial({
    wireframe: true
})
var SIZE = 5476284 // I'm lazy, so this is the hardcoded amount of Float32 we will download in total
var modelBuffer = new SharedArrayBuffer(SIZE * 4) // this is where we will put the bytes as they arrive
var modelVertices = new Float32Array(modelBuffer) // holds the vertices
var totalFrames = 0,
    loadStarted = false

var geometry = new THREE.BufferGeometry()
geometry.addAttribute('position', new THREE.BufferAttribute(modelVertices, 3))

var mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

var button = document.createElement('button')
button.textContent = '开始加载模型'
button.style.display = 'block'
button.addEventListener('click', function() {
    if (!hasSharedArrayBuffer) {
        alert('This browser does not support SharedArrayBuffer :(')
        return
    }
    var t0 = performance.now()
    var worker = new Worker('/uploads/1911/streaming-worker.js')
    var positionUpdateOffset = 0
    worker.onmessage = function(msg) {
        if (hasSharedArrayBuffer) {
            byteOffset = msg.data
        }
        var positionsReceived = Math.floor(byteOffset / 12) // 3 Floats, 4 bytes each = 1 position (x,y,z)
        var trianglesReady = Math.floor(positionsReceived / 3)
        requestIdleCallback(function() { // only do work when the thread isn't busy
            geometry.setDrawRange(0, positionsReceived - 1)
                // We only update the buffer where we've got new values
            geometry.attributes.position.updateRange.start = positionUpdateOffset
            geometry.attributes.position.updateRange.count = positionsReceived - positionUpdateOffset
            geometry.attributes.position.needsUpdate = true
            positionUpdateOffset = positionsReceived
        })
        if (byteOffset === geometry.attributes.position.array.byteLength) {
            var t1 = performance.now()
            var secondsTaken = (t1 - t0) / 1000
            console.log(`Ready after ${secondsTaken} s`)
            alert(`Ready after ${secondsTaken.toFixed(2)} seconds. Avg. ${(totalFrames / secondsTaken).toFixed(2)} fps`)
        }
    }

worker.postMessage(modelBuffer, [modelBuffer])
    loadStarted = true
    document.body.removeChild(button)
})
document.body.appendChild(button)

requestAnimationFrame(function render() {
    requestAnimationFrame(render)
    if (loadStarted) totalFrames++
        mesh.rotation.y += Math.PI / 200
    renderer.render(scene, camera)
})

编译

CSS

HTML

使用Streams API来完成3D模型的webgl streaming流式渐进加载和渲染。

webgl, steaming, worker

编辑器支持Emmet

快捷键

使用Streams API来完成3D模型的webgl streaming流式渐进加载和渲染。

webgl, steaming, worker

WebGL Three.js浑浊的球体 | GLSL光线行进（raymarching）着色器代码演示

使用WebAssembly（wasm）和Unity WebGL实现的FPS射击游戏：愤怒的机器人（AngryBots）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：