{"id":800,"date":"2020-06-22T14:42:09","date_gmt":"2020-06-22T14:42:09","guid":{"rendered":"http:\/\/adrianbell.me\/?p=800"},"modified":"2020-06-22T14:43:37","modified_gmt":"2020-06-22T14:43:37","slug":"depth-of-field","status":"publish","type":"post","link":"http:\/\/adrianbell.me\/?p=800","title":{"rendered":"Depth of Field"},"content":{"rendered":"\r\n<p>I'm glad I finally managed to get this working. I have almost no experience in real-time graphics like these, so this was a bit of a battle. Really interesting effect though. It's not perfect, as it's some kind of 2D blur process, but I think it's effective for what it is! <\/p>\r\n\r\n\r\n<!--\r\n<canvas id=\"canvas\" width=\"550\" height=\"375\">\r\n-->\r\n<p><canvas id=\"canvas20020622\" width=\"375\" height=\"375\"> Your browser does not support the canvas tag. This is a static example of what would be seen. <\/canvas> \r\n\r\n\r\n<script type=\"module\">\r\n            var canvas = document.getElementById('canvas20020622');\r\n\r\n            import * as THREE from '.\/js\/build\/three.module.js';\r\n\r\n            \/\/ post effects includes\r\n            import { EffectComposer } from '.\/js\/examples\/jsm\/postprocessing\/EffectComposer.js';\r\n            import { RenderPass } from '.\/js\/examples\/jsm\/postprocessing\/RenderPass.js';\r\n            import { BokehPass } from '.\/js\/examples\/jsm\/postprocessing\/BokehPass.js';\r\n\r\n            var scene = new THREE.Scene();\r\n            scene.background = new THREE.Color( 0x000011);\r\n            \/\/var camera = new THREE.PerspectiveCamera( 50, window.innerWidth \/ window.innerHeight, 0.1, 1000 );\r\n            var camera = new THREE.PerspectiveCamera( 30, canvas.clientWidth \/ canvas.clientHeight, 0.1, 1000 );\r\n\r\n           \r\n\r\n            var renderer = new THREE.WebGLRenderer({canvas: canvas});\r\n            \/\/renderer.setSize( window.innerWidth, window.innerHeight );\r\n            renderer.setSize( canvas.clientWidth, canvas.clientHeight );\r\n            \/\/renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);\r\n            \/\/document.body.appendChild( renderer.domElement );\r\n            \r\n\r\n            \/\/ create composer for post effects layering \r\n            var composer = new EffectComposer( renderer );                    \r\n\r\n            \/\/ create all post processing passes\r\n            var renderPass = new RenderPass( scene, camera );\r\n        \r\n            var bokehPass = new BokehPass( scene, camera, {\r\n                    focus: 41.0,\r\n                    aperture: 0.001,\r\n                    maxblur: 0.5,\r\n                    width: canvas.clientWidth,\r\n                    height: canvas.clientHeight\r\n            } );\r\n            \r\n            var composer = new EffectComposer( renderer );\r\n\r\n            composer.addPass( renderPass );\r\n            composer.addPass( bokehPass );\r\n\r\n            \/\/ TET\r\n            var material = new THREE.LineBasicMaterial( { color: 0x0000ff, linewidth: 1.2 } );\r\n            var points = [];\r\n            var p0 = new THREE.Vector3( -4.300125, -5, -7.448035 ); \r\n            var p1 = new THREE.Vector3( -4.300125, -5, 7.448035 ); \r\n            var p2 = new THREE.Vector3( 8.66025, -5, 0 ); \r\n            var p3 = new THREE.Vector3( 0, 10, 0 ); \r\n\r\n            points.push( p0 );\r\n            points.push( p1 );\r\n            points.push( p2 );\r\n            points.push( p0 );\r\n            var geometry1 = new THREE.BufferGeometry().setFromPoints( points );\r\n            var line1 = new THREE.Line( geometry1, material );\r\n            scene.add( line1 );\r\n\r\n            points = [];\r\n            \/\/points.push( p0 );\r\n            points.push( p2 );\r\n            points.push( p3 );\r\n            points.push( p0 );\r\n            var geometry2 = new THREE.BufferGeometry().setFromPoints( points );\r\n            var line2 = new THREE.Line( geometry2, material );\r\n            scene.add( line2 );\r\n\r\n            points = [];\r\n            \/\/points.push( p0 );\r\n            points.push( p3 );\r\n            points.push( p1 );\r\n            \/\/points.push( p0 );\r\n            var geometry3 = new THREE.BufferGeometry().setFromPoints( points );\r\n            var line3 = new THREE.Line( geometry3, material );\r\n            scene.add( line3 );\r\n\r\n            \/\/ camera pos for lines\r\n            camera.position.z = 50;\r\n\r\n            var animate = function () {\r\n                requestAnimationFrame( animate );\r\n                line1.rotation.x += 0.005;\r\n                line2.rotation.x += 0.005;\r\n                line3.rotation.x += 0.005;\r\n                line1.rotation.y += 0.005;\r\n                line2.rotation.y += 0.005;\r\n                line3.rotation.y += 0.005;\r\n                \/\/line.rotation.y += 0.01;\r\n                \r\n                \/\/ call render on post effects composer instead\r\n                composer.render( scene, camera);\r\n\r\n            };\r\n\r\n            animate();\r\n        <\/script><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>I'm glad I finally managed to get this working. I have almost no experience in real-time graphics like these, so this was a bit of a battle. Really interesting effect though. It's not perfect, as it's some kind of 2D blur process, but I think it's effective for what it is! Your browser does not &hellip; <a href=\"http:\/\/adrianbell.me\/?p=800\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Depth of Field<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[42],"class_list":["post-800","post","type-post","status-publish","format-standard","hentry","category-webgl","tag-webgl"],"_links":{"self":[{"href":"http:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=800"}],"version-history":[{"count":38,"href":"http:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/800\/revisions"}],"predecessor-version":[{"id":838,"href":"http:\/\/adrianbell.me\/index.php?rest_route=\/wp\/v2\/posts\/800\/revisions\/838"}],"wp:attachment":[{"href":"http:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=800"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/adrianbell.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}