Creating a Three.js shader that generates a textual output

Currently, I am in the process of building a web application using Three.js that displays a scene in ASCII art, much like the example showcased here. However, I am encountering some challenges with the frame rate.

In an attempt to enhance performance, I have experimented with various algorithms to convert the rendered scene into an ASCII string. While some were slower than the provided example and others faster, none proved efficient enough for rendering extensive scenes, even with the WebGL renderer.

Considering this predicament, I am contemplating transferring this conversion process to the GPU by implementing a shader. Nevertheless, I am uncertain about how to configure a Three.js shader to produce a string output. Additionally, my ideal scenario would involve the ability to specify a custom ASCII character set as a palette, even though GLSL does not support a string data type.

Appreciate any guidance on this matter! :)

Answer №1

Check out this great example

Essentially, the concept involves taking a texture, known as the map texture, and utilizing each pixel to reference another texture containing sprite images.

For your specific scenario, you would convert those tiles into ASCII characters and then render your 3D environment onto the map texture by connecting it to a framebuffer. In simpler terms,

Render your scene onto a texture
Use that texture to reference another texture containing ASCII characters.

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

svg-import.js encountered an import error stating "Unexpected type sodipodi:namedview in SVG Import."

Currently, I am utilizing svgjs to load SVG files and perform various manipulations. In addition, I have integrated the svg-import plugin to bring in pre-existing SVG files. However, when attempting to load an SVG file, I encountered the following error: ...

An obstacle prevents the code injection process in the Chrome extension when a button is pressed

My basic chrome extension is not functioning correctly. More specifically, I am encountering an issue where the alert box does not appear when I click on the button in the popup. Here are the contents of my manifest.json file: {"manifest_version": 2, "n ...

Angular - Dealing with the value of zero in the @if template syntax

Having a dilemma with the Angular template flow syntax using @if. There is a value within an RxJs Observable, which is handled with the async pipe and assigned to a variable. @if (currentPageNumber$ | async; as currentPageNumber) { // currentPageNumber is ...

Encountering a null value in a function parameter assigned within an AJAX success callback in JavaScript

function fetchData(url) { var response = null; $.ajax({ type: "GET", url: url, crossDomain: true, async: false, contentType: "application/json; charset=utf-8", da ...

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

PHP implementation for updating JSON data

I have a JSON file that requires updating its numerical values before writing it to a new file. Here is an example of the script: [ { "type": "flipImage", "image": "img/new.jpg", "trigger": "{{10,80},{300,350}}", "animationDuration": ...

Error: The value of "$tweetId" cannot be parsed as it is set to "undefined". Please ensure that string values are properly enclosed

I am utilizing sanity, and if you require more details, I will furnish it promptly. When I try to access http://localhost:3000/api/getComments, I encounter the following error message: ClientError: Unable to process value of "$tweetId=undefined". Kindly ...

Struggles encountered while trying to set up camera controls in three.js

https://i.sstatic.net/vQdxh.png I've been working on implementing camera navigation functionality in threejs using THREE.OrbitControls. Despite following a tutorial, I'm struggling to get it to function correctly. You can find my code on jsfiddl ...

What steps can be taken to halt an ongoing AJAX call and initiate a new one with different parameters?

I recently implemented an ajax call using the jQuery.everyTime() function. The setup involves a combo box where users can select different graph names, triggering dynamic calls to an ajax function that returns JSON data and populates a chart in the View ev ...

Implementing Adaptive Images in Bootstrap 5 for a Specified Design

I am currently working on a website layout that involves displaying one image per section. My goal is to have the images positioned on either side of the text when viewed on a larger screen, as shown in the example below: https://i.sstatic.net/bms6S.png ...

Switch the selected option in JQuery UI dropdown using a clickable button

I have a code snippet that is almost working. My goal is to change the selection of a JQuery dropdown select combobox using a separate button named "next". What I want is for the JQuery dropdown to automatically switch to the next selection every time I c ...

What causes inability for JavaScript to access a property?

My current coding project involves the usage of typescript decorators in the following way: function logParameter(target: any, key : string, index : number) { var metadataKey = `__log_${key}_parameters`; console.log(target); console.log(metadataKey ...

Troubleshooting problem with Angular4's HTTP requests

While working on my Angular 4 application, I am creating an oath guard service to check the validity of tokens. If the token is not valid, I want the user to log in again. Below are the functions I have implemented for this purpose: isLogedIn(){ ret ...

Preserving input data based on click and change events

Upon form submission, I encounter an issue with displaying only the divs that contain fields with saved values. The form saves user-entered values using PHP, where some of the fields are initially hidden within div elements until an onclick or onchange eve ...

Make sure two elements are siblings in JavaScript / jQuery

Looking at the HTML structure below: <div class="wrap"> <div id="a"></div> <div id="b"></div> </div> A statement is presented as false: ($('#a').parent() == $('#b').parent()); //=> false ...

Unnecessary PHP code will run on its own in JavaScript

Attempting to initiate a session in PHP and assign a value to a session variable within a Javascript function on a PHP/HTML page is creating an issue. The problem arises when the PHP code inside the if statement runs automatically upon loading the page, ra ...

Encountering an "undefined" error when implementing the useReducer hook in React

I'm encountering an error when using the UseReducer hook in React. Even though I have destructured the state object, I still receive this error: const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{}); return ( ...

Error: Trying to access the parent node of an undefined property

After incorporating this script into my webpage for the newsletter sign-up process, I aimed to reveal customized content post user subscription. <script> function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode ...

Newbie in JavaScript - reinitiating my for loop journey

After running an animation in 4 steps, I want it to restart once all the steps are completed. var aSteps = [ { "x": "800", "y": "0" }, { "x": "800", "y": "500" }, { "x": "0", "y": "500" ...

Implementing promises in Node JS Express

I am new to promises and trying to understand how they function. Here are my initial questions: When a request is handled in a route function, does it wait for all promises? Does using a promise or callback create a new scope where execution continues ...