Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. 3D Blocks
  4. Add an Image Processing Pipeline

Add an Image Processing Pipeline

Scheduled Pinned Locked Moved 3D Blocks
1 Posts 1 Posters 854 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

    Introduction

    If you are working on an art project, you often would like to make your scene look beautiful. This can be done using an “image processing pipeline”. The idea is to take the image stream captured by the camera, and change them before showing them on the screen. Note that this is a 2D operation, as we are not changing the 3D objects in the scene, but rather modifying the 2D images captured by the camera.

    Since we can apply a sequence of operations on these images, it is called a “pipeline”.

     
     

    The “Add Pipeline” Block

    You can run this block anytime after the scene and camera are ready to add the image processing pipeline:

    2f8f4506-4177-43aa-8ef1-709b57ee8a1a-image.png

     
    You can run this block multiple times. Each time, the previous pipeline will be removed first, so the operations won’t be applied more than once.

    Each operation is explained below. To show the effect, we’ll use a motorcycle model like this:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/df59b913-0303-4cd5-97eb-34a1a8898d50.gif" width="500" style="border-radius: 5px; border: 1px solid #29622d;">

     
    And after applying the image processing pipeline, you can produce a result like this:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/b134af31-7518-47a4-a4ad-ddb72842d90f.gif" width="500" style="border-radius: 5px; border: 1px solid #29622d;">

     
    You can open this project to view the scene and experiment with the pipeline:

    https://play.creaticode.
    com/projects/91004ea4f0cb26718d48a04a

     
     

    Vignette Effect

    The vignette effect will make the 4 borders of the image darker and blurry, thus highlighting the area in the center.

    In the block, you can specify the size and color of the vignette effect: 472b7667-dac3-4215-9115-284202efbf46-image.png

    • The size of the vignette controls the size of the affected area in the 4 borders.
    • The color of the vignette is the color being painted in the borders.

    Here are the results from different sizes and colors:

    ca90f10f-cd98-4404-8080-60d100dc9f8b-image.png

    f2f01706-0555-4ba3-98fa-12e7abb8dcee-image.png

    2e870167-b409-4354-a895-2e7ea7139d4e-image.png

     
     

    Bloom Effect

    The bloom effect is used to highlight the bright areas in an image. The idea is that sometimes it is hard for the camera to capture an area that is very bright, because it would just show up as white colors. To solve this problem, we can make the area around the bright spots glow lights as well, so those spots would appear really bright.

    There are 3 inputs that control the bloom effect:

    263735cc-7ae5-4d6a-9f22-770eac663109-image.png

     

    Strength

    The strength controls the intensity of the lights we add. When it is 0, no bloom effect is applied.

    db42df33-5655-43fa-a4e3-743290239e7c-image.png

    5da89314-7b21-40f8-ba7f-7b937daa36de-image.png

    92fe8406-8896-493a-8418-cb544ccc45bb-image.png

     

    Threshold

    The threshold controls which parts of the image are treated as bright spots that would glow lights. If a spot on the image is brighter than the threshold, then it will glow lights under the bloom effect. When the threshold is 0, that means all areas in the image will be glowing lights.

    9db6521e-0ef2-4bba-a9cd-d39b005ba0a6-image.png

    0f69df8e-675b-45e2-9e05-0c2e20c659ae-image.png

    3a4ce4e9-c07f-4e13-89a5-ad314fe21f19-image.png

     

    Kernel

    The kernel controls how to spread the glowing lights around the bright spots. The larger the kernel, the bigger the glowing area, but also the less intense effect.

    7dd7250d-1e8f-4626-8790-c196d5edac8f-image.png

    e2d29196-9d29-4aad-af1a-750f2e8cebdd-image.png

    f4711788-35c8-4c14-b1f9-f88758ba215d-image.png

     
    Note that larger kernels will require significantly more computations, so usually you should keep it below 16.

     
     

    Antialiasing

    When the computer screen displays an image, it will divide the image into many tiny squares called “pixels”, and draw each pixel with a different color. This leads to the problem that curved edges in the image may appear jagged:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/20430ec7-606a-4630-b0dd-15a4523a7fdb.png" width="300" style="border-radius: 5px; border: 1px solid #29622d;">

     
    If you set antialiasing to “yes”, then these pixels will be blurred up to make the edges look smoother:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/463843bf-915d-4e7a-8854-091d3fdcd705.png" width="300" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    Sharpening

    Sometimes due to low resolution, the edges in an image may appear blurry, such as the bricks on the ground:

    edfc57dc-3ea9-4017-a521-4fcd608ad8e7-image.png

     
    You can make the edges in the image sharper by setting “sharpening” to “yes”:

    a78f6b6a-cb70-4ca7-8dc3-17c88085fd08-image.png

     
     

    Contrast

    The contrast refers to the relative difference between the bright areas and the dark areas. An image will look more lively if there is a high contrast. You can use the “camera contrast” input to change the contrast of the image. By default it is at 100, which means no change is made. If the value is less than 100, the image will become foggy; if the value is more than 100, the image will look more clear.

    3aadb0cf-343a-4fb7-a413-442e0c8b7de6-image.png

    22c97f48-66bc-4c4d-a07b-b0c251a8401a-image.png

    78fb9564-2d89-411e-9b1f-8b8e6437494c-image.png

     
     

    Exposure

    The exposure value controls the brightness of an image. The normal exposure value is 100. If it is more than 100, the image will become overly bright; at less than 100, the image will appear dark.

    4e07580f-d7a3-421e-b7af-f71281927a90-image.png

    4c2d31ed-426d-4348-ac80-37f02ad0b24e-image.png

    617603ec-94bf-4f52-93c9-aabb60d4cb08-image.png

     
     

    Remove the Pipeline

    To turn off all the image processing operations, you can run the following block:

    d09267f7-d441-454c-81c8-69d605be5079-image.png

    1 Reply Last reply
    0

    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

    With your input, this post could be even better 💗

    Register Login
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode