How can objects be outlined in a projected context using a shader?

I am currently experimenting with modifying the OutlinePass in threejs to create outlines of connected objects in clip space (after applying the projection matrix). While these objects may appear separate in 3D space, they are considered connected after projection.

Before Implementing Outline Pass:

After Implementing Outline Pass:

My goal is to outline only those objects that are connected to the object selected by the user's mouse. Currently, I have successfully managed to draw outlines of objects in their projected state.

However, when selecting the middle object with the mouse, I encountered a challenge where the torusgeometry object on the left side of the sample image does not display an outline as desired.

If anyone has suggestions or alternative methods for achieving this effect, I would greatly appreciate any input or examples shared.

javascriptthree.jsglslshader

Answer №1

After a long search, I've stumbled upon a solution that may not be optimized for performance but definitely nails the visual aspect!

The OutlinePass underwent modifications using the flood fill algorithm.

import {
    AdditiveBlending,
    Color,
    DataTexture,
    DoubleSide,
    LinearFilter,
    Matrix4,
    MeshBasicMaterial,
    MeshDepthMaterial,
    NoBlending,
    RGBADepthPacking,
    RGBAFormat,
    ShaderMaterial,
    UniformsUtils,
    Vector2,
    Vector3,
    Vector4,
    WebGLRenderTarget
} from '../../../build/three.module.js';
import { Pass } from '../postprocessing/Pass.js';
import { CopyShader } from '../shaders/CopyShader.js';

var OutlinePass = function (resolution, scene, camera, selectedObjects, ignoreObjects, mouse) {

    // Code continues...
};

// The rest of the code remains the same...

export { OutlinePass };

Moreover, the inspiration for implementing the flood fill algorithm was drawn from this resource:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there any specific reason not to use a short HTML/CSS syntax like <div a b c></div>?

When it comes to writing HTML in less standard environments, such as a phonegap app where strict syntax and semantics are not crucial, I have developed a unique approach that works for me. I aim to keep my HTML code short and concise by using the followin ...

javascriptcsshtml

JavaScript for Office Spreadsheet Titles

I'm having trouble fetching the names of sheets from an external Excel file, as I keep getting an empty array. async function retrieveSheetNames() { const fileInput = <HTMLInputElement>document.getElementById("file"); const fileReader ...

javascripttypescriptoffice-js

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

Utilizing Spotify's API search feature, I am working with an array of SongSearchParams that consist of title and artist parameters: export class SongSearchParams { public title: string; public artist: string; constructor(title: string, a ...

javascripttypescriptasynchronousxmlhttprequestangular-promise

Spin a vector using a perpendicular in Three.js

I need help with vector rotation in Three.js {x: 0, y: 0, z: 1} I also have a normal vector: {x: 1, y: 0, z: 0} How can I rotate the first vector based on the direction of the normal to achieve this result? {x: 1, y: 0, z: 0} Your assistance in this ...

javascriptmathvectorthree.js

Is it possible to utilize AJAX and cross-domain JSONP to determine if a URL is accessible?

I am currently utilizing JQuery to retrieve data from a URL and display it on my page asynchronously. The URL is sourced from a different domain, so I have implemented JSONP to acquire the necessary information. So far, this method has been functioning pro ...

javascriptjqueryajaxcross-domain

Top method for creating rectangular shapes in three.js

UPDATE: I managed to resolve my issue and discovered that the solution involved utilizing raw webgl with two triangles for each rectangle. You can check it out here. While I have experience as a developer, I am relatively new to 3D development. For my pr ...

three.js

Turn off the Ripple effect on MUI Button and incorporate a personalized touch

I am trying to create a custom click effect for the MUI Button by removing the default ripple effect and implementing my own shadow effect. I have disabled the ripple using disableRipple, but I am facing issues in applying the shadow effect when the user c ...

javascriptcssreactjsmaterial-uicss-animations

Displaying geoJSON data from a variable instead of a file is a feature implemented by

Let's say I have a geoJSON data stored in a variable or parsed as an object: // GeoJSON stored as an object var segment = segment; // GeoJSON saved as a JSON string var json = JSON.stringify(segment); Now, the challenge is to display this geoJSON o ...

javascriptjsongoogle-maps

What measures can be taken to stop both of these cubes from being dragged simultaneously?

Check out this drag example: https://codepen.io/alexcheninfo/pen/vKkgkE. You'll notice that if you stack cubes and drag the one in front, the one behind it moves as well. Take a look at the complete code below: <script> AFRAME.registerCompon ...

javascriptthree.jsaframe

Is object rest/spread properties not supported by Node.js version 6.3.1?

After attempting to run this code in Node.js v6.3.1 CLI, the following output was generated: let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // 2 console.log(z); // { a: 3, b: 4 } Unexpectedly, the output was diffe ...

javascriptnode.js

"Removing an item from an array stored in localstorage: A step-by-step guide

I need to remove an object from an array and also delete it from local storage. I have attempted to use the splice method but am struggling with how to implement it correctly. Below is the code that I have tried: var details = []; function addEntry() ...

javascriptlocal-storage

Removing jQuery error label from an HTML block

I need a single command that will remove an error label from my HTML when the field content is changed. It currently works on input and select elements, but not within an input-group. I am looking for a solution that will work universally across all instan ...

javascriptjqueryhtml

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked

My current project involves creating HTML buttons through JavaScript using AJAX. Each time I click one of these buttons, it triggers an AJAX function. If the AJAX request is successful, it retrieves a number that will be utilized in a for loop. As the loop ...

javascriptjqueryhtmlajax

When attempting to input a date, the forward slashes symbolize the dividing line between

In my webpage, I have a variable called var holding a date "29/5/2017". I am attempting to pass this variable to a function stored in a separate JavaScript file. However, when I examine the JavaScript code through debugging, I notice that it interprets the ...

javascriptjqueryasp.net

regex tips for updating URLs within CSS using JavaScript

var content = '$content {style:url("csshover.htc");}'; //using " with link content += "$content {background:transparent image('pic.png') no-repeat;}"; //using ' with web address content += "$content {bg-image:url('awesome.jpg& ...

javascripthtmlcssregexurl

Enhancing a three.js project with point-and-click functionality while utilizing OrbitControls

I am currently experimenting with a point-and-click navigation feature in three.js for a project. The goal is to move the camera to the location where the user clicks on the screen using a raycaster along with a simple mechanic implemented with gsap: ...

javascriptthree.jsgsaporbitcontrols

Is there a way to make the Dotted THREE.MeshLine function properly?

I am currently experimenting with THREE.MeshLine in order to create a dashed line with thickness. After searching for examples, I have compiled the following codepen to demonstrate what I am attempting to accomplish: Dashed THREE.MeshLine Example Instea ...

three.jsline

Can someone help me uncover the previous URL for login using just JavaScript? I've tried using document.referrer but it's not giving me the

Currently, I am utilizing express with pug templates and pure JavaScript. In order to enhance the user experience of my log in system, I would like to save the URL that someone came to the login page with, so that I can redirect them back to it once they h ...

javascripthtmlnode.jsexpresspug

A guide on shading specific faces based on their normal vectors' alignment with the camera's view

https://i.sstatic.net/FG4hp.png I'm currently working on a shader that requires darkening the faces with normals perpendicular to the camera (dot product is 0). How can I calculate this dot product and make sure it works correctly? uniform float tim ...

javascriptthree.jsglslwebgl

SCRIPT5007: The property 'href' cannot be assigned a value as the object is either null or undefined

This script is functioning properly in browsers like Chrome and Firefox, however it is encountering issues when used with Internet Explorer. An error message is displayed in the IE console: SCRIPT5007: Unable to set value of the property 'href': ...

javascriptphpjqueryhtmlinternet-explorer