通过交互式网页学习相机成像原理

入门摄影这门艺术,你是否有以下这些问题?

焦距、光圈、CMOS是什么?为什么光圈越大,背景虚化效果越好?什么是过曝?...

今天我将分享一个简单的、可交互的相机成像模型,可供大家以可视化的方式深入学习和理解这些术语。

1. Ray Optics Simulation 光学模拟平台

使用者可以交互式的方式,利用该平台提供的光源、镜子、透光物、遮光物等工具创建和模拟 2D 几何光学场景,并与其互动。此外,该平台还提供画廊,使用者可将自己创建的光学场景上传,供其他用户使用与学习。

以下是几个比较有意思的画廊作品,分别构建了日食、变焦镜头、菲涅尔透镜的光学模型。有兴趣的小伙伴也可以自己做一些有意思的模型。

2. 相机成像原理模型的使用

在这里,我通过简单修改该画廊 Camera obscura - Ray Optics Simulation 作品,实现相机成像原理模型的创建。大家可通过如下方式使用:

2.1 创建一个 json文件

这里我创建一个名为 The principle of camera imaging.json 的文件,内容如下:

json 复制代码
{
  "version": 5,
  "name": "The principle of camera imaging",
  "objs": [
    {
      "type": "Blocker",
      "p1": {
        "x": 1060,
        "y": 680
      },
      "p2": {
        "x": 760,
        "y": 680
      }
    },
    {
      "type": "Blocker",
      "p1": {
        "x": 1060,
        "y": 400
      },
      "p2": {
        "x": 760,
        "y": 400
      }
    },
    {
      "type": "Ruler",
      "p1": {
        "x": 1063.0130526315788,
        "y": 698.7886315789475
      },
      "p2": {
        "x": -141.88572433595814,
        "y": 694.8105495423805
      }
    },
    {
      "type": "Aperture",
      "p1": {
        "x": 760,
        "y": 400
      },
      "p2": {
        "x": 760,
        "y": 680
      },
      "p3": {
        "x": 760,
        "y": 504.62570743711734
      },
      "p4": {
        "x": 760,
        "y": 575.3742925628826
      }
    },
    {
      "type": "TextLabel",
      "x": 199.55899596667035,
      "y": 367.9691032858637,
      "text": "Objects outside",
      "alignment": "right"
    },
    {
      "type": "TextLabel",
      "x": 913.5043956043952,
      "y": 392.9062845651083,
      "text": "Camera",
      "alignment": "center"
    },
    {
      "type": "CropBox",
      "p1": {
        "x": -139.83866396761127,
        "y": 326.32154443423786
      },
      "p4": {
        "x": 1133.424493927126,
        "y": 779.921544434238
      }
    },
    {
      "type": "CropBox",
      "p1": {
        "x": 704.0034412955467,
        "y": 362.3215444342379
      },
      "p4": {
        "x": 1086.74028340081,
        "y": 745.058386434238
      }
    },
    {
      "type": "IdealLens",
      "p1": {
        "x": 786.0224861903579,
        "y": 405.29349691080154
      },
      "p2": {
        "x": 786.3857418161693,
        "y": 675.2470299262627
      },
      "focalLength": 155
    },
    {
      "type": "PointSource",
      "x": 432.30290724298936,
      "y": 470.70739164764365,
      "brightness": 0.43,
      "wavelength": 434
    },
    {
      "type": "PointSource",
      "x": -191.5518295991161,
      "y": 572.4623390160647,
      "brightness": 0.68,
      "wavelength": 669
    },
    {
      "type": "Detector",
      "p1": {
        "x": 1059.5017824181016,
        "y": 397.5102132692092
      },
      "p2": {
        "x": 1059.5017824181016,
        "y": 679.7590553744725
      },
      "irradMap": true
    },
    {
      "type": "TextLabel",
      "x": 1066.2885915124061,
      "y": 423.45358025984,
      "text": "CMOS"
    }
  ],
  "width": 1500,
  "height": 800,
  "rayModeDensity": 1.224337645235499,
  "origin": {
    "x": 286.1284655189088,
    "y": -55.57492358816593
  },
  "scale": 0.8255126868265552,
  "simulateColors": true
}

2.2 打开平台导入并使用

打开网站 https://phydemo.app/ray-optics/simulator/ , 左上角文件 -- 打开 -- 选择刚刚创建的json文件,就可以使用啦!

3 交互式相机模拟器网站

交互式相机模拟器,允许用户调整光圈、快门速度、ISO 等设置,模拟不同场景下的拍摄效果。这个网站直观地展示了不同设置如何影响曝光和照片质量,非常适合理解相机的基本原理。

https://www.camerasim.com/

摄影曝光三要素,光圈、快门、ISO 如何平衡

相关推荐
守护者1701 分钟前
JAVA学习-练习试用Java实现“实现一个Hadoop程序,使用Hive进行复杂查询和数据筛查”
java·学习
吴梓穆31 分钟前
UE5学习笔记 FPS游戏制作35 使用.csv配置文件
笔记·学习·ue5
虾球xz33 分钟前
游戏引擎学习第199天
学习·游戏引擎
luoganttcc41 分钟前
BEV感知中如何使用相机内外参?
数码相机
A林玖1 小时前
【计算机相关学习】R语言
开发语言·学习·r语言
浪淘沙jkp2 小时前
大模型学习三:DeepSeek R1蒸馏模型组ollama调用流程
学习·ollama·deepseek
nuo5342022 小时前
黑马 C++ 学习笔记
c语言·c++·笔记·学习
会讲英语的码农2 小时前
如何学习C++以及C++的宏观认知
开发语言·c++·学习
云上艺旅2 小时前
K8S学习之基础六十八:Rancher创建deployments资源
学习·云原生·容器·kubernetes·rancher
SKYDROID云卓小助手5 小时前
三轴云台之相机技术篇
运维·服务器·网络·数码相机·音视频