簡單光照模型(Phong和Blinn-Phong)和明暗處理

支持點光源和平行光，是一種簡單光照模型，它將光照分解成了三個部分，分別為

• 漫反射
• 鏡面反射
• 環境光

如圖所示，是一個簡單的幾何模型。

• \(L\)是光源方向
• \(N\)是法線方向
• \(R\)是反射方向
• \(V\)是視線方向
• \(H\)是\(L\)和\(V\)的平分
• 所有向量都是單位向量

理想漫反射

當光源來自一個方向時，漫反射均勻地向各個方向傳播，與視點無關，是由物體表面粗糙不平引起的，漫反射的空間分佈是均勻的，也就是說不論從哪個方向看去，同一個點的漫反射光強都是一樣的。物體上的點\(P\)，法向量為\(N\)，入射光強度為\(I_p\)，\(L\)為\(P\)指向光源的方向。如果所有所有的向量都是單位向量，那麼有

\[I_d = I_pK_d\cdot(L\cdot N) \]

其中\(K_d=(K_{dr},K_{dg},K_{db})\)這三個分量分別是RGB三原色的漫反射係數，可以反應物體的顏色。同樣的\(I_p=(I_r,I_g,I_b)\)可以通過分量來設置光源的顏色。

鏡面反射

對於理想鏡面，反射光集中在一個方向，並遵守反射定律。對於一般的光滑表面，反射光則集中在一個範圍內，且反射定律決定的方向光強最大。所以從不同位置觀察到的鏡面反射光強不同。鏡面反射光可表示為

\[I_s = I_pK_s(R\cdot V)^{n} \]

\(R \cdot V\)計算的是反射方向和視線方向的夾角，夾角越小，強度越大。\(n\)是反射指數，反應了物體的表面的光滑程度，一般1-2000。\(n\)越大約光滑，因為n越大，例如2000，那麼當夾角很小時，例如很接近1，如0.9，但是經過2000乘方，就變得很小了，這意味着只有無限接近反射方向，才能看到高光，其他方向不行，這就表示物體很光滑。反過來，\(n\)很小那麼移動一點角度，也能看到衰弱的高光，所以光斑會比較明顯。

在鏡面反射模型中，最終要的是計算R的方向，\(R\)可以通過入射方向和法線方向計算出來

因為這裏的向量都是單位向量，只有方向不一致

\[\begin{aligned} ||L||\cos\theta &= ||M||=\cos\theta\\ &M和N的方向一致\\ R &= -L+2M \\ &=2N\cos\theta-L\\ &=2N\cdot(N\cdot L)-L \end{aligned} \]

高光區域只反映光源的顏色，漫反射才能設定物體的顏色。

環境光

光源間接對物體施加的明暗影響，在物體和環境之間多次反射。在簡單光照模型中進行了簡化，通常用一個常數來模擬環境光

\[I = I_aK_a \]

\(I_a\)是環境光強，\(K_a\)為物體對環境光的反射係數。

Phong模型

\[I = I_aK_a +I_pK_d\cdot(L\cdot N)+I_pK_s(R\cdot V)^{n} \]

Phong模型是上述三種因素的疊加，其中\(R\)的計算比較費時，需要對每一點計算一次\(R\)的值。

Blinn-Phong模型

由於Phong模型計算較為耗時，後來提出了一種對Phong模型的修改，Blinn-Phong模型。
假設:

1. 光源在無窮遠處，光線的方向L為常數（這就意味着，對物體上所有點來說，光線的方向都是一致的，正常情況應該是光源到點的向量，每個點的光照方向都不一致）
2. 視點在無窮遠處，視線的防線V為常數（這個同理）
3. 此模型針對高光部分進行了修改，\(R\cdot V\)的計算用\(H\cdot N\)近似，其中\(H=(L+V)/||L+V||\)，也就是\(L\)和\(V\)的平分向量。當\(V\)接近\(R\)的時候，\(H\)也接近\(N\)，符號高光的規律。對於所有點，\(H\)只需計算一次。

所以Blinn-Phong模型的可以表示成：

\[I = I_aK_a +I_pK_d\cdot(L\cdot N)+I_pK_s(H\cdot N)^{n} \]

（圖片中應該採用了明暗處理，不僅是光照模型）

明暗處理

如今的物體大多數用多邊形表示，一個多邊形的法線方向一致，因此一個多邊形內部的像素相同，而在鄰接出可能會有突變，感覺不連續。為了讓過度平滑，基本思想是：對多邊形的頂點計算合適的光強度，在內部進行均勻插值。其中有兩種主要的做法：

• 計算物體表面多邊形頂點的光強，然後插值，求多邊形內部光強。
• 對內部點的法向量進行插值，而頂點的法向量用相鄰多邊形的法向量的平均值得到。

Gouraud明暗處理（雙線性光強插值）

基本算法

1. 計算多邊形頂點的平均法向量
2. 用Phong模型計算頂點的平均強度
3. 插值計算離散邊上的各點光強
4. 插值計算多邊形區域內的各點光強

計算速度比簡單光照模型有了很大的提高，解決了顏色突變問題，但是鏡面反射效果不理想。

Phong明暗處理（雙線性法向量插值）

和Gouraud方法基本類似，只不過是對法向量插值。多邊形頂點的法向量用相鄰多邊形的法向量的平均值。而內部每個點都要計算法向量，用頂點的法向量插值得到。
這種做法效果好，可以產生正確的高光，但是計算量很大。

• [1]維基百科
• [2]計算機圖形學基礎教程 胡事民

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※想知道最厲害的網頁設計公司"嚨底家"!

※別再煩惱如何寫文案,掌握八大原則!

※產品缺大量曝光嗎?你需要的是一流包裝設計!

本次做後台管理系統，採用的是 AntD 框架。涉及到圖片的上傳，用的是AntD的 upload 組件。

我在上一篇文章《前端AntD框架的upload組件上傳圖片時遇到的一些坑》中講到：AntD 的 upload 組件有很多坑，引起了很多人的關注。折騰過的人，自然明白其中的苦楚。

今天這篇文章，我們繼續來研究 AntD 的 upload 組件的另一個坑。

備註：本文寫於2020-06-11，使用的 antd 版本是 3.13.6。

使用 AntD 的 upload 組件做圖片的上傳，效果演示

因為需要上傳多張圖片，所以採用的是照片牆的形式。上傳成功后的界面如下：

（1）上傳中：

（2）上傳成功：

（3）圖片預覽：

代碼實現

首先，你需要讓後台同學提供好圖片上傳的接口。上一篇文章中，我們是把接口調用直接寫在了 <Upload> 標籤的 action 屬性當中。但如果你在調接口的時候，動作很複雜（比如根據業務要求，需要連續調兩個接口才能上傳圖片，或者在調接口時還要做其他的事情），這個 action 方法就無法滿足需求了。那該怎麼做呢？

好在 AntD 的 upload 組件給我們提供了 customRequest這個方法：

關於customRequest 這個方法， AntD 官方並沒有給出示例，他們只是在 GitHub 上給出了這樣一個簡短的介紹：

但這個方法怎麼用呢？用的時候，會遇到什麼問題呢？AntD 官方沒有說。我在網上搜了半天，也沒看到比較完整的、切實可行的 Demo。我天朝地大物博，網絡資料浩如煙海，AntD 可是口口聲聲被人們號稱是天朝最好用的管理後台的樣式框架。可如今，卻面臨這樣的局面。我看着你們，滿懷羡慕。

既然如此，那我就自己研究吧。折騰了一天，總算是把 customRequest 的坑踩得差不多了。

啥也不說了，直接上代碼。

採用 AntD框架的 upload 組件的 customRequest 方法，自定義上傳行為。核心代碼如下：

import React, { PureComponent } from 'react';
import { Button, Card, Form, message, Upload, Icon, Modal, Row, Col } from 'antd';
import { connect } from 'dva';
import { queryMyData, submitData } from '../api';
import { uploadImage } from '../../utils/wq.img.upload';

import styles from '../../utils/form.less';

const FormItem = Form.Item;

@Form.create()
export default class PicturesWall extends PureComponent {
  constructor(props) {
    super(props);
    const { id } = this.props.match.params;
    this.state = {
      id,
      img: undefined, // 從接口拿到的圖片字段
      imgList: [], // 展示在 antd圖片組件上的數據
      previewVisible: false,
      previewImage: '',
    };
  }

  componentDidMount() {
    const { id } = this.state;
    id && this.queryData();
  }

  // 調接口，查詢已有的數據
  queryData() {
    const { id } = this.state;
    queryMyData({
      id,
    })
      .then(({ ret, data }) => {
        if (ret == 0 && data && data.list && data.list.length) {
          const item = data.list[0];

          const img = data.img;
          const imgList = item.img
            ? [
              {
                uid: '1', // 注意，這個uid一定不能少，否則展示失敗
                name: 'hehe.png',
                status: 'done',
                url: img,
              },
            ]
            : [];

          this.setState({
            img,
            imgList,
          });
        } else {
          return Promise.reject();
        }
      })
      .catch(() => {
        message.error('查詢出錯，請重試');
      });
  }

  handleCancel = () => this.setState({ previewVisible: false });

  // 方法：圖片預覽
  handlePreview = (file) => {
    console.log('smyhvae handlePreview:' + JSON.stringify(file));
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  // 參考鏈接：https://www.jianshu.com/p/f356f050b3c9
  handleBeforeUpload = (file) => {
    console.log('smyhvae handleBeforeUpload file:' + JSON.stringify(file));
    console.log('smyhvae handleBeforeUpload file.file:' + JSON.stringify(file.file));
    console.log('smyhvae handleBeforeUpload file type:' + JSON.stringify(file.type));

    //限製圖片 格式、size、分辨率
    const isJPG = file.type === 'image/jpeg';
    const isJPEG = file.type === 'image/jpeg';
    const isGIF = file.type === 'image/gif';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 1;
    if (!(isJPG || isJPEG || isPNG)) {
      Modal.error({
        title: '只能上傳JPG、JPEG、PNG格式的圖片~',
      });
    } else if (!isLt2M) {
      Modal.error({
        title: '圖片超過1M限制，不允許上傳~',
      });
    }
    return (isJPG || isJPEG || isPNG) && isLt2M;
  };

  // checkImageWH  返回一個promise  檢測通過返回resolve  失敗返回reject阻止圖片上傳
  checkImageWH(file) {
    return new Promise(function (resolve, reject) {
      let filereader = new FileReader();
      filereader.onload = (e) => {
        let src = e.target.result;
        const image = new Image();
        image.onload = function () {
          // 獲取圖片的寬高
          file.width = this.width;
          file.height = this.height;
          resolve();
        };
        image.onerror = reject;
        image.src = src;
      };
      filereader.readAsDataURL(file);
    });
  }

  // 圖片上傳
  doImgUpload = (options) => {
    const { onSuccess, onError, file, onProgress } = options;

    // start：進度條相關
    // 偽裝成 handleChange裏面的圖片上傳狀態
    const imgItem = {
      uid: '1', // 注意，這個uid一定不能少，否則上傳失敗
      name: 'hehe.png',
      status: 'uploading',
      url: '',
      percent: 99, // 注意不要寫100。100表示上傳完成
    };

    this.setState({
      imgList: [imgItem],
    }); // 更新 imgList
    // end：進度條相關

    const reader = new FileReader();
    reader.readAsDataURL(file); // 讀取圖片文件

    reader.onload = (file) => {
      const params = {
        myBase64: file.target.result, // 把 本地圖片的base64編碼傳給後台，調接口，生成圖片的url
      };

      // 上傳圖片的base64編碼，調接口后，返回 imageId
      uploadImage(params)
        .then((res) => {
          console.log('smyhvae doImgUpload:' + JSON.stringify(res));
          console.log('smyhvae 圖片上傳成功：' + res.imageUrl);

          const imgItem = {
            uid: '1', // 注意，這個uid一定不能少，否則上傳失敗
            name: 'hehe.png',
            status: 'done',
            url: res.imageUrl, // url 是展示在頁面上的絕對鏈接
            imgUrl: res.imageUrl, // imgUrl 是存到 db 里的相對鏈接
            // response: '{"status": "success"}',
          };

          this.setState({
            imgList: [imgItem],
          }); // 更新 imgList
        })
        .catch((e) => {
          console.log('smyhvae 圖片上傳失敗:' + JSON.stringify(e || ''));
          message.error('圖片上傳失敗，請重試');
        });
    };
  };

  handleChange = ({ file, fileList }) => {
    console.log('smyhvae handleChange file:' + JSON.stringify(file));
    console.log('smyhvae handleChange fileList:' + JSON.stringify(fileList));

    if (file.status == 'removed') {
      this.setState({
        imgList: [],
      });
    }
  };

  submit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const { id, imgList } = this.state;

      const tempImgList = imgList.filter((item) => item.status == 'done'); // 篩選出 status = done 的圖片
      const imgArr = [];
      tempImgList.forEach((item) => {
        imgArr.push(item.imgUrl);
        // imgArr.push(item.url);
      });

      submitData({
        id,
        img: imgArr[0] || '', // 1、暫時只傳一張圖片給後台。如果傳多張圖片，那麼，upload組件需要進一步完善，比較麻煩，以後有需求再優化。2、如果圖片字段是選填，那就用空字符串兜底
      })
        .then((res) => {
          if (res.ret == 0) {
            message.success(`${id ? '修改' : '新增'}成功，自動跳轉中...`);

          } else if (res.ret == 201 || res.ret == 202 || res.ret == 203 || res.ret == 6) {
            return Promise.reject(res.msg);
          } else {
            return Promise.reject();
          }
        })
        .catch((e) => {
          message.error(e || '提交失敗，請重試');
        });
    });
  };

  render() {
    const { id, imgList } = this.state;
    console.log('smyhvae render imgList:' + JSON.stringify(imgList));
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 3 },
      wrapperCol: { span: 10 },
    };
    const buttonItemLayout = {
      wrapperCol: { span: 10, offset: 3 },
    };

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    return (
      <Card title={id ? '修改信息' : '新增信息'}>
        <Form onSubmit={this.submit} layout="horizontal">

          {/* 新建圖片、編輯圖片 */}
          <FormItem label="圖片" {...formItemLayout}>
            {getFieldDecorator('img', {
              rules: [{ required: false, message: '請上傳圖片' }],
            })(
              <Upload
                action="2"
                customRequest={this.doImgUpload}
                listType="picture-card"
                fileList={imgList}
                onPreview={this.handlePreview}
                beforeUpload={this.handleBeforeUpload}
                onChange={this.handleChange}
              >
                {imgList.length >= 1 ? null : uploadButton}
              </Upload>
            )}
          </FormItem>
          <Row>
            <Col span={3} />
            <Col span={18} className={styles.graytext}>
              注：圖片支持JPG、JPEG、PNG格式，小於1M，最多上傳1張
            </Col>
          </Row>

          <FormItem {...buttonItemLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </FormItem>
        </Form>

        {/* 圖片點開預覽 */}
        <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
        </Modal>
      </Card>
    );
  }
}

參考鏈接

注意file的格式：https://www.lmonkey.com/t/oREQA5XE1

Demo在線演示：

• https://stackoverflow.com/questions/58128062/using-customrequest-in-ant-design-file-upload

fileList 格式在線演示：

• https://stackoverflow.com/questions/51514757/action-function-is-required-with-antd-upload-control-but-i-dont-need-it

ant design Upload組件的使用總結：https://www.jianshu.com/p/0aa4612af987

antd上傳功能的CustomRequest：https://mlog.club/article/3832743

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※別再煩惱如何寫文案,掌握八大原則!

※教你寫出一流的銷售文案?

※超省錢租車方案

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※產品缺大量曝光嗎?你需要的是一流包裝設計!