Three.js WebGL 轮廓线着色器代码和示例

Outline shader in three.js。本实例用coffeescript编写。

three, shader, outline

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

scene       = null
normal      = null
outline     = null
outScene    = null
maskScene   = null
light       = null
renderer    = null
composer    = null
camera1     = null
camera2     = null
camera3     = null
mesh1       = null
mesh2       = null
mesh3       = null
renderTarget = null

screenWidth  = window.innerWidth
screenHeight = window.innerHeight

clock = new THREE.Clock

elapsedTime = 0
frameCount  = 0

shader =
    'outline' :
        vertex_shader: [
            "uniform float offset;",
            "void main() {",
                "vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );",
                "gl_Position = projectionMatrix * pos;",
            "}"
        ].join("\n"),

fragment_shader: [
            "void main(){",
                "gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );",
            "}"
        ].join("\n")

init = () ->

# SCENE

scene     = new THREE.Scene
    maskScene = new THREE.Scene
    outScene  = new THREE.Scene
    setModel()

# SCENE CAMERA

camera1 = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
    camera1.position.set 0, 0, 400
    scene.add camera1

camera2 = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
    camera2.position.set 0, 0, 400
    outScene.add camera2

camera3 = new THREE.PerspectiveCamera 40, screenWidth/screenHeight, 50, 10000
    camera3.position.set 0, 0, 400
    maskScene.add camera3

# LIGHTS

light = new THREE.DirectionalLight 0xffffff
    light.position.set 1, 1, 1
    scene.add light

# RENDERER

renderer = new THREE.WebGLRenderer
        width: screenWidth
        height: screenHeight
        antialias: true

renderer.setSize screenWidth, screenHeight
    renderer.setClearColor 0x666666
    renderer.autoClear = false
    renderer.gammaInput = true
    renderer.gammaOutput = true

document.body.appendChild renderer.domElement

# POSTPROCESSING

renderTargetParameters = 
        minFilter:      THREE.LinearFilter
        magFilter:      THREE.LinearFilter
        format:         THREE.RGBAFormat
        stencilBuffer:  true
    
    renderTarget = new THREE.WebGLRenderTarget window.innerWidth, window.innerHeight, renderTargetParameters

composer    = new THREE.EffectComposer renderer
    composer.renderTarget1.stencilBuffer = true
    composer.renderTarget2.stencilBuffer = true

normal      = new THREE.RenderPass scene, camera1
    outline     = new THREE.RenderPass outScene, camera2
    outline.clear = false
    
    mask        = new THREE.MaskPass maskScene, camera3
    mask.inverse = true
    clearMask   = new THREE.ClearMaskPass
    copyPass    = new THREE.ShaderPass THREE.CopyShader
    copyPass.renderToScreen = true

composer.addPass normal
    composer.addPass mask
    composer.addPass outline
    composer.addPass clearMask
    composer.addPass copyPass

# EVENTS

window.addEventListener 'resize', onWindowResize, false

setModel = ->

geometry = new THREE.TorusKnotGeometry 50, 10, 50, 20

# shaded model
    matColor = new THREE.MeshPhongMaterial 0xffffff
    mesh1 = new THREE.Mesh geometry, matColor
    scene.add mesh1

# flat mask
    matFlat = new THREE.MeshBasicMaterial
        color: 0x000000
    mesh2 = new THREE.Mesh geometry, matFlat
    maskScene.add mesh2

# shader
    uniforms = offset:
        type: "f"
        value: 1

outShader = shader['outline']
    
    matShader = new THREE.ShaderMaterial
        uniforms: uniforms,
        vertexShader: outShader.vertex_shader,
        fragmentShader: outShader.fragment_shader

mesh3 = new THREE.Mesh geometry, matShader
    outScene.add mesh3

onWindowResize = ->

screenWidth  = window.innerWidth
    screenHeight = window.innerHeight

camera1.aspect = screenWidth / screenHeight
    camera2.aspect = camera1.aspect
    camera3.aspect = camera1.aspect

camera1.updateProjectionMatrix()
    camera2.updateProjectionMatrix()
    camera3.updateProjectionMatrix()

renderer.setSize screenWidth, screenHeight

animate = ->

updateFps()
    requestAnimationFrame animate
    render()

render = ->

now = Date.now()
    delta = clock.getDelta()

if mesh1
        mesh1.rotation.y += 0.01
        mesh2.rotation.y = mesh1.rotation.y
        mesh3.rotation.y = mesh1.rotation.y
    
    composer.render()

updateFps = ->

elapsedTime += clock.getDelta()
    frameCount++

if elapsedTime >= 1
        $('#fps').html frameCount
        frameCount  = 0
        elapsedTime = 0

init()
animate()

编译

CSS

HTML

Outline shader in three.js。本实例用coffeescript编写。

three, shader, outline

编辑器支持Emmet

快捷键

Outline shader in three.js。 本实例用coffeescript编写。

three, shader, outline

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

Three.js WebGL 球体发光着色器代码实例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Outline shader in three.js。本实例用coffeescript编写。